.png)
Role
UX/UI designer intern
Project overview
Duration
4 weeks
.png)
Tools
Figma
Photoshop
Tellow is SaaS company which has an automated bookkeeping program specially designed for micro-businesses and self-employed people. It enables its users to have control over their own records at all times, by making their accounts understandable. As a B2B and B2C business, we opted to completely redesign our present Support Page because users rely heavily on it to quickly find the resources they require.
The scope of this redesign includes:
-
Update the photos with our current employees to bring the trust
-
Keep the layout and the style consistent with other webpages
-
Start from scratch to brainstorm the appropriate content for each sections
Design Process
Here is the design process to follow for this project:
01
Problem Statement
02
Research
03
Mid-wireframing
04
Final design
Problem statement
I assessed the present surface of the Support Page and found a few issues that may be fixed:
Outdated branding and images
Unclear information is offered to users who are looking for support.
Lack of contact details for users to use to request support
Inconsistent layout
Research
Due to the time constraints, I chose to start by conducting a competitive analysis to learn more about what the competitors are doing and conducting the stakeholder interviews to understand their point of view, and come up with an agreement on requirements.
Competitive analysis
I conducted a competitive analysis to better understand the other 9 bookkeeping and banking organizations in the market before starting the design process.
Main takeway
-
Provide the contact methods for users to reach out.
-
Add the images of the current employees on website to foster feelings of friendliness and increased trust.
Stakeholder interviews
Before making a design decision, it's crucial to involve the stakeholders in this stage as well to gather their point of views. In this project, the stakeholders are including: CEO, Marketing manager, Customer Success Manager and Web developer. In this meeting for stakeholder interviews, I shared the findings from competitive study and gathered the feedback from their perspectives.
Main takeway
-
Except for the contact methods, it is preferable to include the location of the office in case the users want to visit us.
-
It's better to have more than 5 images of the current employees to bring the trust.
Mid-wireframes
I applied the key findings from the research to the design. I began by sketching and created the mid-wireframes by using Figma.I started with the Desktop version because Tellow’s design strategy is more focused on it. And after that, I also took into account the mobile version because more and more people are getting used to using mobile devices to browse the content.
Desktop version
Mobile version
%201.png)
%202.png)
Visual Design
Style guide
In order to keep consistent with other webpages, I adhered to Tellow's existing design system, which currently uses the primary branding color and font type as shown below.
1. Color palette
-
Primary colors
#5538EE
#5970F0
#5950EC
-
Secondary colors
#000000
#9DA7B3
#EEEEFD
#FFFFFF
2. Typography
Aa
Plus Jakarta Sans
Header 1 - Nummer 1 klantenservice van Nederland
Plus Jakarta Sans - bold - 48pt - hero title
Header 2 - Hoe kun je ons bereiken?
Plus Jakarta Sans - bold - 24pt - Subpage titles
Aa
Inter
Body text - Wegwijs worden in Tellow
Inter - regular - 16pt, 14pt, 12pt - paragraph text
Inter - semi bold - 16pt - buttons
Final Design
Desktop version
Before
After
Add the images of the current employees to bring more trust
Provided the contact information for the users
Aligned with Tellow’s website layout
Mobile version
Before
After
%201.png)
%202.png)
%203.png)
Outcome
Google analytics
Before and after the design, the Google Analytics data was appropriately evaluated. Data from January 27 to February 21 is shown here.
Average session duration
the average length of sessions on a website
25,6%
increase
Numbers of “Sessions”
A session is the period time a user is actively engaged with your website, app, etc.
8,18%
increase
Average “Bounce rate”
The percentage of single-page sessions in which there was no interaction with the page.
100%
decrease
Retrospective
What I've learned
-
It's crucial to identify the stakeholders and involve them early on in the project. This will help us reach an agreement on the project's scope and outcomes upfront.
-
It is critical to understand the type of content that users expect from this page before starting the design, as our goal is to meet their needs.
-
Always take the responsive website into account, even though the task is focused on desktop version.
-
It is imperative to learn how to prioritize which feedback to use, because there are too much feedback from different teams, including Marketing, Customer Support team, etc.
Challenge 1
Context
The requirement of the design on the hero image originally only presented five individuals, but our stakeholder wants to increase the number of current employees to bring more trust. As a result, a new design is required to satisfy this requirement.
Resolution
I began with looking for examples online, then, met with the Marketing Manager to discuss ideas, and came up with this solution.
Initial design
Resolution
.png)
Challenge 2
Context
The design and content were completely out-of-date in our previous Support Page, therefore I had to start from scratch when coming up with the right information for each section.
Resolution
I started with the online searching to find more inspiration for the Support Page's material. After that, I presented the content to the Marketing Manager to obtain her feedback and came up these solutions.