Designing a website that takes into account two very different sides of the company.
Summary
Company
WonderGene is a B2B company that provides both goods and services related to DNA analysis. In 2022, the company was expanded, and a business unit oriented to scientific communication and training was born: ScienceUP.
Me
This project has been done as part of the course of visual design during my studies in Human-Computer Interaction.
The group was given only a brief from the company and a very limited amount of time to perform research, conceptualization and prototyping. The scope of the project was proposing a prototype of a redesign of the company’s website, using two user flows, that could better represent their brand and aims.
First, we analyzed the company, interviewed an expert and went through the phase of benchmarking to gain a better understanding of the problem space and existing solutions. Then, through the design phases we reorganized the whole information structure and created a design system in order to better represent content and create a more interactive and user-centric experience for both WonderGene and ScienceUP.
Noticing that the company is quite active on Instagram, after structuring and writing the report, we then offered recommendations on social media post style by providing potential templates.
WonderGene
We maintained the brand identity intact even though we made it more clean, establishing proper design system and information architecture.
We increased the ease of use adding a walkthrough configuration of the product and service.
ScienceUP
We did a complete rebranding, creating a dedicated design system and reorganized content and look and feel of the web pages, making it easier to understand for users and creating a stronger presence and identity of this previously hidden branch of the company.
WonderGene’s website offers a single page website containing almost no information about services and almost none about the product. This causes the impossibility for the user to get to know how services are provided and their prices. Moreover the ScienceUP part is inaccessible from the website and to access it the user needs to know the right sub-domain to insert in the browser’s URL bar.
Research
Definition
Ideation
Wireframing
Validation
Prototyping
Testing
User research importance
The limits imposed by the context of the project didn't allow us to have any kind of contact with the company and/or real users. We necessarily had to make assumptions and to come up with contents, interpretations of how things worked and specific objectives from scratch.
Going through design phases without a consistent prior user research and communication with stakeholders has confirmed to be very challenging and an unoptimized approach to design work.
Design system
Creating a structured design system and exploiting components is fundamental to have consistency and scalability in a project.
Case Study
We started analyzing the company’s brief and the company itself in order to get a better understanding of the context and requests.
Moreover, to deepen the knowledge of the context we interviewed an expert in the genetic field and went through a phase of benchmarking.
Taking the previously gathered information, we analyzed the current website outlining pain points and goals.
Using the initially identified and drafted target, we determined two personas, one for each macro area of the website (WonderGene and ScienceUP).
In order to have the whole team aligned on the same visual concepts, we created a Moodboard representing key visual concepts and mood that we wanted to exploit
To get a general idea on how to further proceed with the information architecture of the website we established a customer journey for both our personas.
We laid out each content that we wanted to be present on the website and reorganized it based on macro categories using the method of card sorting.
The next step after the card sorting was the creation of the site map.
In this phase, we started drafting the design of the pages that were directly connected to our user journeys. Here we began to figure it out how ans where to place the content previously sorted on our interface.
After the definition of grids and tarting from our personas, moodboard and ideas collected during the design process so far, we outlined a design system, consistent with the brand and the company requirements.
Starting from colors, typography and shapes we were then able to create the components that has been used across the website.
To assess our website design, we performed a user test according to the customer journeys established for our personas. This lead to the finding of useful insights that in further iterations of design process would have lead to an increase of the overall product’s quality.