Supplenza in Chiaro
When I was starting work with supplenza in chiaro as the only designer in the team I had to learn how to collaborate effectively with stakeholders and developer. Through my first research on social media, I discovered different user opinions about Supplenza in Chiaro.
The research showed that about 70% of the users confuse the two products on the website: one is a free service and the other is paid service. These services are completely different but give very similar results which creates confusion.
These negative comments on social media, could influence others to look for alternatives and move away from Supplenza.
RESPONSABILITY
Research
Design system
Prototyping
Vector illustration
Deep dive into the problem
The old version of the product has been in use for a year. The main goals now are to optimise usability and eliminate the free service. To achieve this, I analysed the old version of the user flow to identify the problems and define the solution.
Step 1
The people found it difficult to understand “seleziona il tuo profilo” meant to choosing the category they belong to.
The word "profilo" it's too generic (in english, "profile") especially considering that the target user is 45+ ages, so it’s crucial to be clear at this first stage.
Step 2
In the second step, the user has to choose their work type:
“Personale ATA”
“Docente”
For a year now, the development team had made the A. service button disabled. I found it unnecessary for now, and decided to eliminate this step since it is inactive.
Step 3
Users confuse the two type of services, which have the same flow:
Free service: navigate to the input field page;
Premium service: navigate to the input field page;
Even at this stage, after a brainstormin; session with the team, we decided to eliminate the free service and to focus on the pay one, in order to provide users more attention and increase the Supplenza's earns.
Information architecture
Thanks to my previous user search, I decided to take inspiration from other platforms that our users also use like Amazon and even Subito.it to create a information architecture .
What I liked most about them:
Amazon: The payment method is divide into separate section
Subito.it: A clear homepage with a free access to all the users that want to try the service; Subito have a section for guides and tips to become an expert user.
At the top level, there is the landing page which includes a navbar to facilitate user navigation across the website. Below, I added a hero section designed to attract the user's attention, which includes a call to action button encouraging teachers to start using our service.
As users scroll down the page, they will see additional sections:
“Diventa un insegnante esperto”, which provides articles to help teachers improve their knowledge;
A call to action to encourage teachers to use our service;
A video that demonstrates how the website works;
And finally, the footer, which contains additional information such as social media links and navigation to the main section.
The navbar includes the following sections:
Insegnante (teacher): A section about the paid service for teachers;
Universitario (university): A future section reserved for the future targeting users.
Articoli (article): A future that will provide content for teachers who want to stay informed;
Contatti: A page with a contact form, making it easy for users to get in touch with us.
Domande: a support page, similar to Google help, that also includes a call to action linking to the contact form, giving users easy ways to ask questions.
Design system
This system established the branding elements (colors, logo, icon set, typography), reusable components such as buttons, form interfaces, and notifications, along with a comprehensive typographic guide.
You can se below the icon that I had created for this website.
Usability testing
The attention heatmap I used to test the new interface detected some issues in mobile, showing me some hierarchy problems. The red color appeared on all element, making it difficult for the user to know what to focus on first.
In the third and fourth screens, I analyse the issues and made a change to color hierarchy. You can see the before and the after of the change below.
Outcomes
Through the optimization of the design system, I reduced overall design time by 40%.
I also helped reduce developer handoff time by about 30% by giving the team clear, well-organized assets and easy to understand annotations in the design system.