Onwards
The Project
Onwards is a case study for a mobile travel application. This case study features steps from inception to low-fidelity wireframes through research, ideation, and UX design principles.
Duration: 4 weeks
Methods: Interviews, Affinity mapping, Wireframes, User testing, Prototyping
Tools: Adobe XD, Figma, Miro
Context
As the stringent COVID-19 travel rules and regulations are being lifted, it is becoming increasingly important to understand the changes that occurred in the needs of travellers due to the pandemic.
The Process
1
2
3
4
5
RESEARCH
DEFINE
IDEATE
PROTOTYPE
ITERATE
1
Research
Competitor Analysis
To get a better understanding of the competitor landscape, I conducted analyses on four popular travel apps in the IOS app store currently. I found that while all apps provided a wealth of infromation regarding must-see activities to do, none provided in-depth reviews for the three most sought after booking types aside from airfare (i.e., restaurants, hotels, and activities)
Interviews
With the goal of understanding what individuals enjoy about travelling, the issues they were currently facing with travelling, and what new factors people consider when travelling at a time where COVID-19 restrictions were easing up, I interviewed 6 individuals.
Key Findings & Insights
I planned to conduct six user research interviews with the goal of gaining greater insights into how we can create an app that makes skincare more accessible, educational and transparent for individuals wanting to better their skin.
Recommended Activities
All users expressed concern that an attraction would not be open when they went. As such, I knew it would be important for my app to provide reliable recommendations for activities to do.
In-depth Reviews
Throughout the interviews, users expressed the desire to know more about accomodations they were booking so that no surprised occurred on their trip.
Transparent COVID-19 Rules
Users wanted to know ahead of times specific COVID-19 details such as documentation needed, any restrictions that were in place, and what places were doing to minimize the spread of COVID-19
2
Define
Problem Statement
During the qualitative user interviews, I discovered that travellers need a resource that provides the essential information about what is needed to travel to any destination.
Therefore, we discovered that providing a straightforward and comprehensive platform offering all of the essential destination-specific travel information will let Sofie have a time-efficient, stress free, and smooth travel booking experience, instead of having to sort through multiple sources of information. Doing this will allow Onwards to be a one-stop shop for providing her with all her travel-related needs in a post-pandemic world.
User Personas
To remind myself of the needs and frustrations of my users, and to maintain a user-centric focus for the duration of the project, I created a user persona to embody the typical user who would be using Onwards to assist them with travelling.
.png)
User Journey Map & Storyboard
Using all of the research collected, I created a user journey map based on my user persona in order to understand how the user might interact with the app and create a more intuitive user experience.
.jpg)
Core Features
With a better idea of my user and their needs, I identified three core features that I wanted to focus on for the product.
Suggested Activities To Do
An "explore" feature that would allow users to browse restaurants, hotels, and various activities based on their travel destination and preferences
3
Ideate
Leave/Create Video Reviews
A video review feature that would let users leave feedback in a more in-depth way to help users make more informed decisions about accommodations, activities, and dining experiences.
User Flows & Task Analyses
Finally, I created a task analysis and user flow for my user persona. This gave me a clear picture of the steps that the user would need to take to get to their final goal, and how to deliver this goal in the most effective manner possible.
Low Fidelity Wireframes
Since providing suggested things to do and having in-depth information for users was at the forefront of Onward's goals, I wanted to focus on highlighting the core features. I started with making low-fidelity wireframes on Figma and created multiple versions of each screen until I found a combination of features and elements that I thought matched the users' needs and that would be intuitive for a wide range of individuals.
Next, I created mid-fidelity versions of these wireframes in Figma, and created a clickable prototype for user testing.
%20(1).png)
4
Test
Usability Test
By conducting usability tests I was able to refine what users find useful, change what they didn't react well to, and add some parts they thought may be useful to other users. Each user was asked to complete a few scenario-based tasks that would test the main of the app and were asked how they felt about the app in general. The results of the usability test were analyzed and can be found below.
Key Findings
I made notes of the positive and negative feedback so that I knew what areas to keep expanding upon and what areas need to be reworked.
Step one: Place user comments on stickies and separate them by task
.png)
Step two: Group feedback into themes
Step three: Place main comments in a priority matrix for iterations to wireframe
5
Iterate
Design Changes
I made changes based on the user's feedback and made it a priority to change parts of the wireframe based on the most common issues that were raised through the usability tests. I created an updated mid-fidelity version of the app that featured more consistent button styles, bottom nav bar, larger icons, and clearer text.
.png)
Bottom Nav Bar
The main issue that came out of the usability tests was that users did not know where they were on the app or if they wanted to go back to the homepage they could not. To solve this issue I added a bottom navigation bar to easily point users to where they were within the app as well as have a quick way of getting to the most important screens within the app.
User Profile
A feature that was initially not included in my low-fidelity wireframe was not included but was brought up by all users was the addition of creating a profile to create videos. All users felt it was important to create their own user profile to make a video review so they knew the name that would show up for other users watching the videos.
.png)
Larger "Call to Action" Buttons
In the usability tests, individuals either did not see where to create/watch video reviews or thought the call to action was too small. To solve this issue, I added a bigger call-to-action buttons for both watching and creating a video review.
Final Product
After many iterations, my final product for this case study aligned with all of the objectives I had set in place- it includes the two core features necessary for users to find and create/watch reviews of different activities/accommodations in the area they are travelling to, while appearing visually appealing and simple to use.
Retrospective
Key takeaways
This was my first time experiencing the entire design process of creating an app with a specific group of people in mind. My biggest challenge was the data visualization of the app and making sure my user's needs were met. Through many iterations and tests, I was able to create a flow that worked for different individuals using the app while keeping it as simple and visually appealing as possible.
What can be improved?
At the time, Figma and Adobe XD were very new to me, there are some features that could be improved and could have sped up (call to action sizes, equal whitespace). While I was still able to complete my design within Figma, it is useful to continue to grow my skills with Figma to create faster and better designs for my next project.
What's next?
As this project only includes mid-fidelity wireframes, it will be important to implement UI patterns into this app to create more high-fidelity wireframes within Figma.
