UX/UI Case Study : Creating a Responsive Website for an Independent Translator
For our second design project at Ironhack, in collaboration with Filipe Branco and Flor Lembo, we were assigned the task of developing a responsive website for a local independent business. The primary goal of this project was to provide an online presence for the chosen business, ensuring that the website effectively organized information to cater to both customers and stakeholders.
We partnered with Harmonie Blondel Henderson, a freelance English-Spanish to French translator and project manager. Our mission was to revamp her online presence, highlighting her expertise in translation and product management, and showcasing her unique multi-skills to stand out in a competitive industry.
Given the stringent 4-week timeline, we’ve structured our approach into three primary phases :
Research Phase (Week 1):
On our first week, we immersed ourselves in market analysis and Harmonie’s specific needs. This comprehensive approach involved conducting stakeholder and user interviews, as well as competitive analysis, resulting in a clearly defined project plan.
During our one-hour stakeholder interview with Harmonie, we learned that her website, built in 2019, no longer attracts customers. Her main clients now come from recommendations, colleagues, former clients, and her LinkedIn and blog publications. To stand out, Harmonie emphasised on highlighting her project management skills alongside her translation abilities, making it her unique selling point, especially as machine translation continues to improve.
In our follow-up user interviews, the same concerns arose regarding Harmonie’s website. Users described it as unprofessional and outdated, with poor architecture that cast doubts on her expertise. A few users mentioned that the section describing the types of documents she has worked on, although clear in content, lacked proper emphasis and structure in its presentation.
In addition to our interviews, our competitive analysis revealed that in order to distinguish Harmonie from other independent translators, a shift from an amateur to a professional design, both in content and visuals, is essential.
Ideation Phase (Week 2–3):
During weeks two and three, we concentrated on understanding Harmonie’s potential clients. We crafted user personas, mapped their journeys, organized the website’s structure, and streamlined user navigation for a seamless experience.
At this stage of the project, tools like the affinity diagram and Empathy map highlighted the key information that is crucial for our potential users throughout the conception phase :
- User Needs: They are looking for a reliable and skilled translator who can meet deadlines.
- Thoughts and Feelings: Users seek confidence in receiving high-quality project outcomes.
- Pain Points: Their primary concerns are avoiding missed deadlines and subpar translations.
The user’s general description, her goals, and the insights we gained enabled us to formulate our problem statement : “Scaling companies that need effective translation of their products into French while managing the product development process in order to reach the French market!”
We also applied the MoSCoW method to prioritize the features for the Minimum Viable Product (MVP). We focused on refining the information architecture and creating the “Happy Path” for our user. Subsequently, we developed low-fidelity and mid-fidelity screens to support the MVP.
We also conducted user testing and integrated essential adjustments based on their feedback from the mid-fi prototype.
The feedback received from usability testing was predominantly positive, with users offering the following suggestions:
1-Enhance the prominence of the portfolio on the homepage by swapping it with the services section.
2-Modify some phrasings to improve comprehensibility.
3-Adjust font sizes, especially for titles.
4-Include an estimation button for user convenience.
5-Ensure the contact button structure remains functional on every page.
UI Conception and Finalization (Week 4):
In the final week, our efforts shifted to UI design, ensuring it aligned with Harmonie’s brand and resonated with her clients. We created high-fidelity wireframes and prototypes, aiming to produce a responsive design that would set Harmonie apart in her industry.
By crafting a moodboard and defining the brand personality, we established the final style tile for the design, with a strong emphasis on attributes such as trust, professionalism, femininity, resilience, and contemporary appeal.
We selected primary and secondary colors, opting for blue and pink. We incorporated rounded elements in buttons, information cards, and sections to convey the website’s feminine, light, and modern qualities, reflective of Harmonie’s brand.
In our typography choices, we opted for Petrona Bold for titles, blending tradition with personality to convey credibility and emphasize marketing claims, while Lato was chosen for body text, providing a warm and stable feel that complements the design. Our design aligns with the Bauhaus style, characterized by minimalist, grid-based layouts and 2D shape patterns. The use of an 8pt grid system ensures consistent, clear, and balanced screen layouts across different devices, effectively showcasing our independent business owner.
The Final Design
Due to time constraints and a teammate’s illness, we had to make a tough decision to streamline our final project presentation. We simplified the happy path to just three desktop screens: the homepage, the expertise page from the work section, and the contact page. These three screens effectively showcased the components also present in other pages, allowing us to focus our efforts on creating two responsive screens (for tablet and phone), with the homepage being our main priority.
What Did We Learn?
This project provided us with valuable lessons in organization and agility. Despite losing a team member towards the end and balancing full-time jobs during the day, we honed our ability to stay on track, trust one another, adapt our final designs and evenly distribute tasks to keep progressing. Communication played a pivotal role, not only in the project’s success but also in understanding our working dynamics and giving and receiving feedback effectively.
Collaborating with a web developer like Filipe, enhanced my knowledge of component creation and spacing in design. By strategically utilizing white space between elements, we achieved visual clarity and improved content organization. This careful spacing helped guide user attention, making the website more readable and aesthetically pleasing.
In the end, the project served as proof that our dedication and hard work enabled us to deliver a top-class project, leaving us exceptionally satisfied with the outcome.
