Tissue staining company redesign
Role
Senior Product Designer
Timeline
January — April 2024
Intro
As part of the preparation for the launch of a new product in the biotechnology and medical field, Parhelia Bio approached me with the idea of redesigning their current website.
Parhelia Bio is a biotechnology company renowned for its cutting-edge developments in the use of stains and dyes for detailed examination of cellular structures. These dyes significantly enhance the contrast of cellular structures, aiding researchers in analyzing metabolic processes.
Problem undestanding
An analysis of the current design revealed several critical issues that were adversely affecting the user experience. The existing design not only appeared outdated but also immediately immersed users into the details of one of the products, without providing general information about Parhelia Bio, its mission, achievements, and history. Some of the information on the website was outdated by more than 2 years, leading to user distrust.
To enhance the user experience, it was necessary to update the visual style, conduct a thorough content audit, and provide up-to-date information. Creating a more informative structure that outlines the company’s overall profile before delving into product details would help users better understand the company’s competencies before exploring its products.
Wireframing
The next phase of the project involved conducting research and market analysis to gather data on the preferences and needs of the target audience. Based on the collected data, conceptual prototypes were developed, reflecting new design solutions and website structure, while considering current trends and company priorities.
Clear Narrative
The prototype was constructed with a simple and understandable narrative, following the structure of “Who We Are?”, “How We Can Help?”, and “Why Work With Us?”. An official Tone of Voice was selected with motifs of “Maverick, Encouraging, Authentic, Exceptional”, creating an atmosphere of trust and professionalism. Following the main narrative were sections providing information about career opportunities, a contact form, and a footer, respectively. This structure allowed for an effective presentation of the company and its offerings, emphasizing key advantages and values for potential clients and partners.
Who we are
At the top of the page, blocks dedicated to key information about the company were featured — its mission and the individuals behind the creation of groundbreaking technologies. This approach immediately established context and the company’s value for users, allowing them to understand who stands behind the product and what values they share.
How can we help
Following were blocks detailing the company’s products and their key features. Each block contained a brief description of the product, highlighting its main characteristics and benefits. Additionally, to provide a deeper understanding of the complex product, a video presentation was included, helping users to obtain more detailed information about the product’s capabilities. This approach contributed to the enhancement of perception and absorption of information, making the presentation more visual and appealing to users.
Why you should work with us
Expertise blocks were created to increase trust in the company, presenting key features that emphasize the uniqueness and advantages of the company, as well as important figures reflecting its successes and achievements. Additionally, this section featured client testimonials and logos, confirming the quality of Parhelia Bio’s products and services, as well as its professionalism and reliability. This approach helps to convince potential clients of the correctness of choosing the company for collaboration and to establish trusting relationships.
Design part
The next stage of the project involved creating the visual concept for the future product. The client expressed a desire to convey a sense of space and futurism. Additionally, there was a wish to maintain the color palette of the product — a combination of blue, black, and purple hues. Based on these requirements, a visual concept was developed, incorporating elements of space, futuristic details, and deep shades of blue, creating a sense of modernity, innovation, and incredible possibilities.
Fresh look onto science
Drawing inspiration from futuristic interfaces, I incorporated angular buttons, modern font pairings, and muted colors. Additionally, to create an atmosphere of innovation and futurism, I added subtle white noise overlay across the page. These elements seamlessly blend with the company’s profile and reflect its commitment to cutting-edge technologies.
Product hightlight
To grab users’ attention to the products, I utilized angular cards displaying brief information about each product and its key features, accompanied by a background slideshow presentation. This approach helped make the offerings more appealing and stand out among other elements on the page.
Addons
In addition to the core products, Parhelia Bio offers various supplementary materials and kits for laboratory research. Unique illustrations reflecting the essence of each product were created for these items. Moreover, hover animation effects on specific items were also executed in a futuristic high-tech style to emphasize the innovation and modernity of the company’s offerings.
Company mission
The company’s mission was presented in the form of bullet points expanded across the entire page. This layout promotes cognitive relief for users after sufficiently dense blocks of content. Additionally, emphasizing simple forms facilitates comprehension and enables users to more easily relate the company’s mission to their tasks and goals.
Company feedback
An important component was the block featuring testimonials and client feedback. Serving as the concluding segment of the “Why Work With Us” section, they seamlessly conclude the presentation of Parhelia Bio and guide users to the contact form. This approach underscores the company’s reliability and professionalism, helping to reinforce user trust.
