Website, Saúde e Fitness
L’Harmonie des Mots
Redesign do website da Harmonie para obter uma vantagem competitiva no mercado de tradutores freelancer.
(Case Study ainda não traduzido)
Role
Duração
July 2023
Equipa
Deliverables
Aplicações
Problem 😓
Goal 🏆
Goal 🏆
How might we design a website that uniquely showcases Harmonies expertise in both translation and product management, emphasising her multi-skills as a unique selling point, and effectively differentiating her from other professionals in the industry?
User Research 🔎
To have a better understanding of what users need to find while searching for translators online and if the shortcomings identified in the stakeholder interview, regarding the website, would be relevant to them, three regular users of translating services were interview, and in one of the questions, were tasked to go Harmonies current website and assess if they would be confident enough to choose to work with her based on what they were seeing.
User Interview Insights
All users answered that they probably wouldn’t use her services, highlighting navigation issues, missing evidence of the quality of work she would be able to produce and the unprofessional and outdated look of the website. Since they weren’t able to establish trust, they would all move on to search other professionals and not reach out to Harmonie.
How does it stack up against competitors?
Feature and brand analysis was made against five competitors, two being other freelancers who offer similar services, two small to medium-sized French translation agencies and a machine translating service.
Compared to other freelancers, there wasn’t much difference between them, and they all share similar features, with Harmonie failing to showcase past clients. Branding is very basic and somewhat random in all of them, giving the impression that there wasn’t much thought beyond its creation and that it was amateur made.
When faced against the agencies, there is a clear differentiation, especially regarding the branding and care for visual consistency. Although the chosen were not particularly interesting, they still managed to have a ‘corporate’ look. Feature wise, they did not have any standout feature other than being more content heavy and didn’t even feature a portfolio, maybe because of NDA’s or other unknown reasons.
Machine translating did not really compare to anything other than offering a multi-language website, but Harmonie and all competitors had this option.
Building empathy
For tailoring the website to the needs of Harmonies potential clients, insights from the affinity diagram and empathy map led to the creation of the primary user persona, Emily (Marketing expert, 40).
- User Journey
Emily’s company is expanding to France. She seeks a professional translator to ensure seamless communication of the brand’s messaging, and researches online to find professional translators and project managers who possess the necessary skills and expertise. She finds a candidate, Harmonie, who meets the capabilities she was looking for, and reviews her website, recommendations, previous work, and LinkedIn profile. Harmonie fulfils all the criteria that Emily requires and contacts her in order to potentially start a work collaboration for localizing the business in the French market.
Scaling companies that need effective translation of their products into French while managing the product development process in order to reach the French market.
Defining the MVP of the product
With all findings sorted out through the affinity diagram, primary user persona defined and problem statement already in hand, prioritization was made using the MoSCoW method, highlighting the features that would make it onto the MVP and ideation and iteration of the low-fidelity screens that would support it.
MVP Statement 👌
The goal of Harmony’s website is to showcase her expertise in translation from English and Spanish to French, along with her strong product management skills. By prominently featuring her client portfolio and extensive experience, the website aims to increase visitor engagement and attract new clients. The primary objective is to differentiate Harmony from other translators and facilitate seamless initial interactions with potential clients, setting her apart as a standout professional in the industry.
MVP Statement 👌
The goal of the WiseBites app, at the bare minimum, is to help health-conscious individuals to focus on how to cook healthy quick recipes and have clear and practical nutritional details that support their dietary goals. By knowing what is available, the app further aims to encourage users to lead a healthier lifestyle by being able to connect to a qualified nutritionist for more personalised goals.
From idea to prototype 💡
To get early feedback, we created the sitemap and user flow, and ideated a couple of screens to showcase possible design options and layouts to be discussed between the team. With the choices made, a mid-fidelity wireframe prototype of the website was built, so usability user testing could be done.
Low fidelity sketches
Mid Fidelity Prototype
All testers gave positive feedback on the simple navigation and the way it was structured, and the presence of contextual CTA’s available in each page. Negative remarks and suggestions were mostly related to content.
- Have the portfolio standout on the homepage by exchanging it with the services section.
- Modify some texts to make the meaning more clear
- Titles look too big
Overall feedback on the entire prototype was positive so, with relevant changes made, work started on the visual design, with the definition of brand attributes and the creation of a mood board that would guide us through the design of the high-fidelity prototype.
Sometimes things don’t go according to plan
Having just started working on colours and typography, one of our team members fell ill and couldn’t continue working on the project for the remainder of its duration. With just a little over a week until the project’s due date and final presentation, a tough decision was made to cut short on the number of high-fidelity screens to prototype and just design the ones more representative of the overall website look and simpler happy path, so all mandatory deliverables could be finished by the weeks end.
Visual Design 🍪
Primary brand attributes were defined as Trustworthy, Professional, Confident, Passionate and Feminine, and because trust and professionalism were one of the main reasons Harmonies website failed to convince users during research, a slight dark shade of blue was chosen as primary colour, because it’s often seen as a colour that conveys trustworthiness, reliability, and dependability. For the accent colour, a vibrant pink. This colour is complementary to the blue and is typically associated with femininity.
The why’s behind design choices
The same principles guided the choice of typography, and the decision fell on having two different typefaces.
For titles, Petrona Bold was selected. It’s a seriffed font that has an overall roundness and small little personality details that set it apart from other more classical looking typefaces — This choice aimed to convey not only a sense of tradition, lending an air of credibility and reliability to the content, but also by using it with bigger font sizes and colour contrast to prominently display marketing claims and page titles, tap into the confident, passionate and feminine attributes of the brand.
Lato was chosen for body text, because it has semi-rounded details in the letters, making it a good pairing with Petrona, but also because it conveys “a feeling of warmth, while the strong structure provides stability and seriousness”.
The overall look took inspiration from the Bauhaus design style, drawing inspiration from its minimalist and grid based layouts and the use of 2d shape patterns. Keeping in mind that this is the work page for a single person, a freelancer and not an agency, the website needed to still look professional, but also maintain a bit of playfulness, friendliness and a feminine personality, so most of the designed website components have soft round corners and abstract geometric shapes were added to break the rectangular sections and pinpoint some areas of interest for the user.
By combining all these elements and working on a clearly defined 8pt grid system, with consistent usage of colours, font sizes, spacings, shapes, etc. everything looks functional, clean, organized, balanced and appealing.
Creating the high-fidelity prototype
With only a few days left on the project and still making up for the loss of a team member, to complete the project it was mandatory to deliver all screens for the ‘happy path’ and choose one of those screens to do responsive web design layouts for tablet and mobile.
The original user flow would require to design at least eight screens, for which it was known that there was no available time, but wanting to not fail on delivering the responsive screens, a hard choice was made to create a very simple happy path that would require only three screens for the desktop version — the homepage, the expertise page from the work section, and the contact page — because together they managed to showcase most of the components that would also be available in other pages, thus creating enough time to work on the two responsive screens, for which the homepage was chosen.
Responsive Design
Mandatory deliverables required the design of one of the screens adapted for tablet and mobile. Work was done on the homepage screen, with most of the noticeable changes coming to mobile.
Given the boxed content layout of the desktop and ample usage of white space, tablet resolution required minimal adjustments, mostly narrowing down some sections
High Fidelity Prototype
You can interact with the prototype clicking in the image below or use this link to open in a new tab.
- User Journey 'Happy Path'
Emily lands on Harmonies website while researching for an English to French translator. She browses the homepage and finds that she provides the service she needs. There is social proof of her work, past clients and work portfolio that assures Emily she might be a good fit. Emily goes into the work page to learn more about Harmonie and sees she has expertise in translating for the cosmetics industries. At this point, Emily decides to contact Harmonie through her contact form to get information on availability and price estimate for the services she requires.
Learnings & Shout-outs 👏
I enjoyed doing this project because this allowed me to practice more on the UX research methods, expanding on the last workshop, and use my previous web design skills inside Figma to help our team create a website design that would meet stakeholder and users needs and expectations.
Unfortunately we did not have time to do desirability testing, but post presentation critique by our peers and teacher staff was 100% positive on the overall look and feel of the website, which managed to tick all the required boxes.
After a long period of work and having to put extra time to compensate for the loss of a team member on the final and most demanding part of the project, we felt very proud for managing to keep functioning as a team and not to lose track of the end goal while still being able to produce top of the class work.
Although this was a workshop project, I would really enjoy seeing the stakeholder pick it up and move it forward and use it to improve her website. There is still a big amount of work to be done, but I believe our team was able to produce a very good starting point on redesigning a standout from the competition, website.
Outros Case Studies
Carrega nas imagens para leres o case study completo de cada projeto.