Xchange Responsive Website
Project Overview
The Product:
Xchange is the go-to platform for seamless currency transactions and real-time exchange rates. With a sleek design and user-friendly features, Xchange empowers global travelers to effortlessly find currency exchange rates, ensuring a stress-free and personalized experience. Say goodbye to the complexities of using calculators for currency conversions and welcome the simplicity of Xchange.
The Problem:
Global travelers using Xchange face a common challenge – the struggle to access real-time and accurate currency exchange information effortlessly. The need for quick and reliable exchange rates creates uncertainty and potential financial inefficiencies during their trips, highlighting the pressing issue of accessibility and convenience in currency exchange.
The Goal:
Design a user-centric and responsive web platform. This platform aims to empower global travelers by providing instant access to accurate exchange rates and facilitating efficient currency exchange. The objective was to enhance the user experience, ensuring travelers can quickly and easily obtain the information they need, thereby streamlining the process of exchanging currencies during their journeys.
Project Duration:
3 months (Oct 2023 – Dec 2023)
My Role:
UX Designer / UX Researcher
Responsibilities:
User Research, Build Wireframes, Prototyping, and Mockups.
Design Process:
Understanding the User
User Research Summary:
In conducting user research for the Xchange website, I aimed to understand the needs and preferences of our target audience, primarily global travelers seeking real-time exchange rates and convenient currency conversion calculations. Through interviews and surveys with the potential user base of 5 participants, I found the following key findings:
- All 5 users emphasized on the importance of fast access to real-time currency exchange rates for efficient travel planning.
- 4 out of 5 participants suggested a user-friendly platform that simplified the access to currency exchange information, as well as currency conversions, could ease the tension of planning travels.
- 3 out of 5 participants expressed a desire for seamless integration of information on the website to facilitate quick decision-making.
On the basis of these findings, I would prioritize a user-friendly and efficient design that provides quick access to real-time exchange rates through the home page as well. This will simplify the process to get all the information required for the currency exchange process and thus allow the users to make informed decisions quickly.
Pain Points:
Problem Statement:
Sydney, a frequent traveler, encounters difficulty in obtaining real-time exchange rates and desires a user friendly platform for convenient and transparent currency exchange during her journeys.
User Persona:
Sitemap:
The sitemap was structured to ensure intuitive navigation, providing users with quick access to exchange rates and easy steps for currency transactions. I also wanted to present information logically to facilitate smooth user flows.
User Journey Map:
Starting The Design
Paper Wireframes:
I utilized paper wireframing to conceptualize the layout of key pages such as the Home, Live Rates, and Conversion Calculator pages. These pages were identified as crucial, considering their high user interaction. By creating simple sketches, I visualized the arrangement and hierarchy of content, enabling quick ideation and a thoughtful representation of the main product functionalities. Moreover, the paper wireframing process provided an opportunity to experiment with different layouts, particularly focusing on optimizing the responsive design for mobile users of the website. This phase played a foundational role, in establishing a clear roadmap for subsequent design iterations and ensuring a user-friendly and accessible experience across devices.
Digital Wireframes:
After finalizing the layout of the website on paper, the next task was to create paper drawings into functional wireframes. As there are hundreds of currencies so, I also had to make sure that the users did not have to scroll endlessly to find the required information. Therefore, I envisioned a sleek and minimalist layout, strategically placing key elements such as currency exchange rates and conversion tools for seamless user interaction. This also made sure that the website does not bomb users with long lines of information but also at the same time provides them with crucial information.
Low-Fidelity Prototype:
The transition from wireframes to a low-fidelity prototype was a strategic step in the website development process. The main aim was to solidify and finalize functionality before delving into the creation of aesthetically pleasing mockups. Every interaction within the prototype was meticulously crafted to represent the intuitive actions that are commonly undertaken by travelers seeking currency exchange information during trip planning.
Usability Study - Findings Round 1:
For round 1 of usability studies that were conducted on the low-fidelity prototype, I engaged with 7 users of different age groups. Out of the 7 users, 3 were aged 30 to 50, 2 were aged between 18 to 30 and 2 were aged above 50. The primary objective of this study was to assess their opinions about the minimalist layout approach and assess the prototype’s functionality, navigational flow and overall user experience. During the testing sessions, the users were tasked to navigate through the prototype and perform certain actions while verbalizing their thoughts about the experience and prototype. A lot of insights from this study informed crucial refinements to both the layout and functionality of some buttons.
The primary findings in round 1 of the usability study are:
- Text size is too big and should be reduced as it creates the illusion of a crowded webpage.
- There is too little padding on the sides and an expanded area of information frustrates the user as he/she has to continuously move their eyes from one side to another.
- The top menu bar looks crowded and should be increased in height so that the buttons for other pages are easily visible.
Refining The Design
Usability Study - Findings Round 2:
In the second round of the usability study, again the 7 participants who volunteered for round 1, explored a refined high-fidelity prototype for evaluation. However, this time the spotlight shifted towards the aesthetics, design elements, and overall visual appeal of the website. Participants were invited to explore the refined user interface, which now boasted vibrant colors, enhanced text readability, and overall polished visuals. The objective of this study was to gather insights from the participants and then use them to curate a product that is visually appealing and provides an exceptional user experience.
The primary findings in the round 2 of the usability study are:
- The plain grey color of the boxes looks very dull and is not visually appealing.
- The boxes or buttons that are clickable should use more effects so that they can gather attention.
- The clickable text should have different colors than regular text as having the same colors makes it very confusing for the user as to which text is interactive and which is not.
- There is a functionality problem with the home page as there is no button to return to the home page from other pages.
Style Guide - Laptop:
In the style guide for the Xchange website, I followed the 60-30-10 rule to maintain a balanced and cohesive visual design. The primary color palette features blue which is used as an accent color to draw attention and comprise 10% of the interface. For the background, I have chosen white as the dominant color to create a minimalist effect. Finally, I have chosen black as the secondary color for the text as it contrasts well with the white background. Additionally, I have used multiple icons in the style guide to enhance usability and convey information to a universal audience.
Mockups - Laptop:
In the mockups for the laptop version of the website, I focused on refining the visual elements by adding a shadow effect to clickable buttons so that they attract the user’s attention to click them and explore other pages. Moreover, I also used blue color along with underline for clickable text which allows the user to easily distinguish it from regular text. Moreover, I also used white space especially on the sides to improve readability and user experience by enabling users to focus in the middle of the website. Finally, as most of the users visit currency exchange websites to get currency conversion calculations from one currency to another so, I added a ‘Start Converting’ button on the banner on the home page so that users can get a click service for their desired feature as soon as they visit the website.
Style Guide - Mobile:
Also, for the mockups of the mobile version, I used the 60-30-10 rule while selecting colors with blue being the accent color, white as the background color, and black color for the text so that it contrasts with the white background. I also used some icons for back, dropdown, and hamburger menu buttons along with the icons used in the laptop version as a symbol of universal language to help a diverse array of users. Similar to the laptop version the 7 different sizes of the Arial font have been used and as it is for a mobile screen so the font size is considerably smaller than the one used in the laptop version.
Mockups - Mobile:
Similar to the mockups for the laptop version, I used a shadow effect on clickable buttons and also changed the color of clickable text to blue along with an underline. As a mobile screen is not very wide so I was not able to provide much whitespace on the sides like the laptop version but I made sure that all the information was not just cramped into the screen. Moreover, I used a scrollable carousel for the articles section unlike the laptop version which had all the article buttons one below the other. Finally, I included a hamburger menu on the left side of the top bar to house all the buttons for different services as on the small screen of a mobile it was not possible to include all of them. All these responsive design principles were used to ensure that there is consistency across different screen sizes.
High-Fidelity Prototype:
Creating a high-fidelity prototype from the mockups was the last step in the design process as it closely resembles the final product. This prototype includes all the improvements and suggestions from the wireframes, mockups, and usability studies. Moreover, the prototype also has an interactive component for menu buttons which allows users to visit all pages without the need to return to the home page. Finally, the high-fidelity prototype with all the comprehensive features, seamless navigation, and visually appealing responsive design, the high-fidelity prototype serves as a powerful tool to showcase the potential of the product to stakeholders.
Accessibility Considerations:
Takeaways
Impact:
Xchange has the potential to transform currency exchange through its user-centered design. The use of a simple, clean, and minimalist layout has a very little risk of confusing the user while using the website. Moreover, the availability of the most popular service at just a click away will make Xchange the most sought-after website.
What I Learned:
Several key insights emerged from the design process of the Xchange website. Firstly, through the usability testing, I learned to prioritize user needs more than what I prefer as a designer as this ultimately results in a more engaging app interface. Moreover, as this was a responsive website design project so, I also learned how to change the scale and type of elements based on screen size. Overall, this project provided important lessons in UX Design methodology and responsive UI design, which I will carry forward in future endeavors.
Next Steps:
Thanks:
Thank you for taking the time to explore my UX case study. Your engagement is greatly appreciated. If you have any feedback or questions, feel free to reach out.