Web Design
Product Design
Moviinn
The Product
Moviinn, a relocation service facilitating moves to Portugal, sought to overhaul its website to accommodate scalability for adding more countries while enhancing user experience and visual appeal. The project aimed to make information more discoverable, improve usability, and update the website's aesthetic.
Responsibilities
Researches
Documentation
UX/UI Design
Usability Testing with users
Interaction Design
Design System Management
Design Process
Our agency embarked on a comprehensive design process, beginning with an analysis of usability tests from the initial website iteration. New tests were conducted to pinpoint usability issues and understand user impressions. We developed and analyzed personas to tailor information for diverse user groups. Utilizing website analytics, heatmaps, and user session recordings, we identified user behavior patterns and crafted effective user flows.
Creative Solutions
Prioritized clarity and immediacy of information presentation.
Restructured page sections to highlight primary content and extend user sessions.
Consolidated expat narratives into a dedicated section to deepen user engagement.
Elevated the Compare feature to the Explore City page for enhanced user engagement.
Implemented a Middle Version of the Explore Country page for smoother UI implementation.
Adapted the "Our database on Portugal" section for better readability and accessibility.
Presented three options for the Hero Section, aligning with Moviinn's website vibe.
Proposed enhancements for the Footer section to improve navigation and information architecture.
Results and Impact
The redesigned website resulted in improved user experience and scalability. Key outcomes include:
Increased user engagement and session durations.
Enhanced discoverability of valuable information.
Positive user feedback and satisfaction with the solutions implemented.
Continued collaboration with Moviinn to expand their business and add new countries to their services portfolio.
UX Audit
The UX audit of the moviinn.com website was a comprehensive and structured process aimed at understanding the user experience and identifying areas of potential improvement. We started by gathering and analyzing data about the website's performance and user behavior patterns. This involved using analytics tools to track user actions, session durations, and navigation patterns.
Next, we conducted a heuristic evaluation to assess the website's usability, accessibility, and design consistency. We also performed a thorough analysis of the website's information architecture to ensure it was intuitive and easy to navigate.
The UX audit of the moviinn.com website was a comprehensive and structured process aimed at understanding the user experience and identifying areas of potential improvement. We started by gathering and analyzing data about the website's performance and user behavior patterns. This involved using analytics tools to track user actions, session durations, and navigation patterns.
Next, we conducted a heuristic evaluation to assess the website's usability, accessibility, and design consistency. We also performed a thorough analysis of the website's information architecture to ensure it was intuitive and easy to navigate.
Usability Tests
For the usability tests of the Explore and City pages on moviinn.com, we recruited a sample group that matched the site's target demographic. Each participant was asked to complete a series of tasks designed to test the functionality and usability of these pages.
During the tests, we observed the participants' interactions with the website and asked them to think aloud, giving us a better understanding of their thought processes. This allowed us to identify any points of confusion, frustration, or satisfaction.
After the tasks were completed, we conducted follow-up interviews to delve deeper into the users' experiences. We asked them about their overall impressions of the site, what they liked and disliked, and any difficulties they encountered.
This data was then analyzed to identify patterns and trends, which informed our recommendations for improving the Explore and City pages.
User Personas
For the usability tests of the Explore and City pages on moviinn.com, we recruited a sample group that matched the site's target demographic. Each participant was asked to complete a series of tasks designed to test the functionality and usability of these pages.
During the tests, we observed the participants' interactions with the website and asked them to think aloud, giving us a better understanding of their thought processes. This allowed us to identify any points of confusion, frustration, or satisfaction.
Customer Journey Map
For the creation of Customer Journey Maps (CJMs) for Moviinn.com, we relied heavily on our usability tests findings and the personas we had developed. CJMs were used to visualize the process that a user goes through to achieve a goal on the website, from the initial stage of awareness all the way through to the final interaction.
Starting from the personas, we developed hypothetical scenarios in which each persona would interact with the website. Each scenario was then broken down into individual steps which outlined the user's actions, thoughts, and feelings at each stage.
These steps were cross-referenced with the data we had obtained from usability tests to ensure they were representative of real user experiences. This helped us to identify pain points, moments of delight, and opportunities for improvement across the user journey.
The CJMs were then compiled into a visual format, mapping out each persona's journey across various touchpoints on the website. This provided us with a comprehensive overview of the user experience, allowing us to better understand where we needed to focus our efforts to improve the overall usability of Moviinn.com.
Information Architecture
The Information Architecture for Moviinn.com was crafted with input from Customer Journey Maps, user pain points, and usability tests. By reviewing these, we identified key interaction points and placed crucial information accordingly. Pain points directed us to areas needing improvement. We drafted a schematic view of the site, ensuring an intuitive design and minimized confusion. Card sorting exercises helped categorize information logically. After validation through usability tests and user feedback, the final structure enhanced Moviinn.com's usability, making information accessible and navigation smoother.
In most cases, we addressed the UX issues of the website's navigation. Users found it difficult to locate all the inner pages, so we sought solutions to improve this.
Wireframes
Our work with wireframes began by defining the overall structure and layout of the Explore and City pages. We sketched low-fidelity wireframes that outlined the basic structure of the pages and the placement of elements, focusing on functionality and usability rather than aesthetics. We considered the user journey and aimed to ensure that the most important information was easily accessible and discoverable.
Once we were satisfied with the initial sketches, we translated them into digital wireframes using design software. This allowed us to start refining the layout, making adjustments based on the insights we had gathered from user testing and our UX audit.
We then conducted usability tests on these wireframes, observing how users interacted with the layout and whether they could easily accomplish their tasks. Based on the feedback and observations from these tests, we iteratively adjusted and refined the wireframes.
By the end of this process, we had a clear and user-friendly structure for the Explore and City pages, ready to be developed into high-fidelity designs.
Wireframe for Explore Portugal
Wireframe for Explore Lisbon
Impact and Results
1 Improved Navigation
Based on the usability test results, it's clear that users struggled with navigation. They had difficulty locating specific cities quickly. Likewise, toggling between countries was challenging. For example, a user who wanted to quickly switch from Portugal to Italy had to navigate back to the main page, locate the countries section in the middle of the page, and this process was time-consuming. We've identified this issue as a pain point in user experience that can be improved.
✅ After
2 Fully redesigned Hero section
We observed that the hero section lacked engaging information to grab the user's attention. To improve this, we utilized Customer Journey Maps (CJM) and our Personas. Our research indicated that users desire quick access to essential information. In most cases, users were seeking a guide for initial steps to moving to Portugal, advice on choosing a city to live in, and a deep dive into the Portuguese vibe. To fulfil these needs, we incorporated relevant images and colors that truly reflect the country's vibe - sunshine, the ocean, warmth, and fun. These associated concepts were communicated through colors across the entire website.
3 Portugal statistics
Most users found the diagrams and graphics difficult to understand due to complex numerical data. They were not familiar with the relevance of these statistics.
To address this, we focused on improving the user experience and the color scheme. The client requested to retain the same information, but we had the freedom to modify the user interface. We highlighted only the essential information, avoiding confusion with complex topics such as “Taxes”, “Housing” numbers is statistic, and others.
4 Reduced cognitive overload for City section
We noticed from video sessions of users from different countries that they struggled to identify, for example: Lisbon or Porto on the City Card. This difficulty arose because the text beneath the picture was hard to read, making it challenging to notice the city's name. Additionally, the description contained extra information that users didn't need at first glance.
5 Quiz started to get more attention
We placed the Quiz link in the hero section based on valuable insights from User Interviews and Usability tests. The most frequent question after landing on the Country page was "Which city in this country is best suited for me?". Instead of using an image as the section background, we added colors to attract more user attention. After testing this new option, the conversion rate increased by 50%.
6 Made more obvious User Experience for FAQ section.
The previous option had unclear naming in the title and interactive behavior. We simplified it to be more familiar to the users.
7 Reorganized and improved navigation in the Footer
During usability tests, users hesitated at the footer, unsure of what was clickable. They tried to avoid clicking anything in the footer due to the overwhelming amount of information, making it difficult to quickly find a specific city or country. The main request was to keep the same information in the footer but make it cleaner.
The previous version had unclear titles and interaction behaviors. We simplified it to make it more user-friendly.
8 Most of users started to use Comparison section
Many users are unsure about which city suits them best. They typically research several cities simultaneously, switching between browser tabs for comparison. Unbeknownst to them, there is a Comparison feature at the end of the page. This feature was often overlooked despite its importance. As a result, we relocated the Comparison feature to the middle of the page and opted to display the results on the same page without any redirects. Following recent usability tests, 70% of users have started to utilize this feature.
9 Increased interest of users for City Overview section
The current section provides essential information about the city, including Quality of Life, Safety Rating, and Lifestyle. Previously, the website lacked relevant information, which proved unhelpful for users. Users expressed interest in seeing numbers and statistics. We streamlined the copywriting to better align with our UI approach from previous pages.
Final Design
We established a design system for the Explore Country and Explore City pages, including color, typography, and UI components. This system, informed by Moviinn's brand and user preferences, was applied to our wireframes. We prioritized readability, accessibility, and visual appeal. User feedback guided adjustments, resulting in intuitive, user-friendly designs.
