viaEurasia
A UI redesign for an existing mobile travel app.
About this project
Responsibilities
-
UI Design
Background
Goal:
Improve on 6 existing screens for a mobile travel app
​
Context:
I consulted notes from the creative direction along with a brief list of known concerns and pain points based on user feedback. In my own review of each screen, I focused on five domains that that impact usability and user satisfaction:
-
Usability heuristics
-
Principles of design
-
Gestalt laws of grouping
-
UI patterns
-
Accessibility
Review & Redesign
Defining The Problem Space
My first step in the process was to review the creative director's notes and the user feedback. From these data, I tasked myself with addressing the navigation within the app, updating the branding and color palette, optimizing the layout of the home screen and about screen, improving the visual hierarchy of the text, and improving accessibility.
Usability Heuristics and UI Patterns
After reviewing the current strengths, weaknesses, and potential areas of improvement I chose to start by addressing usability heuristics along with UI patterns to improve users’ experience of the app:
Principles of Design and Gestalt Laws of Grouping
Color Palette and Accessibility
A significant consideration for any native mobile application is platform-specific requirements. To maximize the number of users this app is available to, I designed for both Material Guidelines (Android) and Human Interface Guidelines (iOS).
Material Guidelines
General characteristics to consider:
-
Square corners
-
Left justified text
-
Raised components with shadows
-
Top bar for navigation
-
Material specific bottom bar with permanent back button
-
Minimum touch target of 48x48dp with at least 8dp between targets
Human Interface Guidelines
General characteristics to consider:
-
Rounded corners
-
Centered text
-
Flat components
-
Bottom tab bar for navigation
-
Minimum touch target of 44x44px
Designing and Testing
Low-Fidelity Wireframes
I designed low-fidelity digital wireframes to meet both Material and Human Interface Guidelines. My goal was to address the weaknesses and opportunities presented by competitor apps while fulfilling user needs.
Home
Build A Name
Name Details
Basic Filters
Favorites Modal
All Names
Create A Pet
Favorites
Advanced Filters
View Modal
Style Sheet Overview
I selected each element in my stylesheet to address two gaps I found in the competitors: a lack of animal theming and generic color schemes.
I wanted Name My Pet! to feel fun, happy, and playful and selected colors to evoke these feelings in the user.
Animal themes are present throughout the app, from the splash screen to the background, the load screens, and the error screens. Illustrations are in a sketched, flat, line-art style with blocky colors.
Mid-Fidelity Wireframes
After an initial review of my designs, I returned to strengths I uncovered during my competitive analysis. I also looked back at the platform-specific requirements to make any necessary adjustments. Based on my review, I made the following changes:
-
Added a splash screen, home screen swipe card states, favorites error screen, and search error screens
-
Changed icon style and function on homepage
-
Adjusted icons across screens for improved consistency and clarity
-
Updated list style on iOS Favorites Modal
Home
Build A Name
Name Details
Basic Filters
Favorites Modal
Favorites Error
Splash Screen
All Names
Create A Pet
Favorites
Advanced Filters
View Modal
Search Error
Swipe Cards States
Prototype Testing
User Test Analysis
Pain points were identified based on feedback from 4 Apple device users and 2 Android devices users.
Feedback fell broadly into 5 categories:
Font
“I noticed the use of some custom font in the Filter section that is not being used anywhere else apart from splash screen else, so it looks a bit inconsistent.” (iOS prototype review)
Color
“The background is very saturated and my brain was confusing the icons with the background.” (Android prototype review)
Buttons
“Consider changing the outline (stroke) on the secondary buttons. This would help distinguish it better from your primary buttons.” (iOS prototype review)
Screens
“I was a little confused on The home page, is the name showing an automated name made for the user and after clicking on the buttons i am not sure why the notifications come up as a duplicate of the name it would be good if they show the action being completed I.e ‘this
name is discarded from your search’ or ‘this name is saved to your likes’ etc.” (Android prototype review)
Concept
“It took me a second to understand that the app functioned basically as tinder for pet names, I think some onboarding would help! I also don't understand how the favourite page functions? What are the names that are under the dog but above the favourites? Are they suggestions? Overall I think a lot of my feedback comes down to the fact that because it's such a novel idea the function of some of the pages/buttons needs to be a bit clearer.”
(iOS prototype review)
A/B Testing
User Feedback
Following the initial round of feedback,
I conducted preference testing for the background color.
In total, I received 8 responses which were evenly split between the two options.
Given that there was not a trend in either direction, I decided to choose the lighter background based on the prototype feedback above.
Finalizing
High-Fidelity Wireframes
I put together the results of my research, style sheet, and user testing from my mid-fidelity prototype to create my high-fidelity wireframes. I also added a loading screen to ease transitions for users while screen data loads in the background.
Home
Build A Name
Name Details
Basic Filters
Favorites Modal
Favorites Error
Splash Screen
All Names
Create A Pet
Favorites
Advanced Filters
View Modal
Search Error
Load Screen
Swipe Cards States
High-Fidelity Prototype
After creating high-fidelity wireframes, I created a final prototype.
Mockups
A view of select screens for both Android and iOS high-fidelity wireframes in digital renderings of their respective devices.
Android
iOS
Where to go from here
Next steps for the app
-
Provide a series of optional onboarding screens.
-
Allow each onboarding screen to be accessed on the relevant page via an info icon.
-
Support offline access for account holders.
​
​
In preparation for the next iteration of the app, I sketched out possible solutions for onboarding screens.
