Swoop Airlines
flyswoop.com
Swoop vs Nielson
Usability is the name of the game, and my team and I considered Jakob Nielson’s 10 general principles for interaction design as we critically analyzed the task of booking a flight through Swoop Airline’s mobile application.
Timeline
2 Weeks - Oct 2020
Role
UX/UI Designer
Team
3 UX Designers
Client
BrainStation
Tools
Figma, Adobe Photoshop
How it started.
Our team was tasked to do a heuristic evaluation of an existing mobile application. We aimed to find an established company with a below average review score for their application on the app store. Enter, Swoop.
The plan.
Research
Investigate an array of different mobile apps to find a candidate for heuristic analysis.
Analysis
Critically asses each app candidate and determine which would benefit the most from a heuristic analysis.
Evaluation
Execute a heuristic evaluation of the primary taskflow within the app.
Redesign
Recreate and redesign any and all screens that contained heuristic violations.
Test
Put the redesigns to the test through user testing to identify any areas for design improvements.
Heuristics, explain yourself.
A heuristic evaluation is a method for finding usability problems in a user interface design. They involve having a small set of evaluators examine the interface and judge its compliance with recognized usability principles (the “heuristics”).
We utilized the 10 Usability Heuristics for User Interface Design introduced by Jakob Nielsen from the Nielsen Norman Group. These heuristics are rated on a scale of 0, not a usability issue to a 5, a usability barrier.
The Heuristics Scale
0 - Not a usability problem
1 - Cosmetic problem
2 - Minor usability problem
3 - Major usability problem
4 - Usability barrier
1. Visibility of system status.
The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.
2. Match between system and real world.
The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.
3. User control and freedom.
Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted action without having to go through an extended process.
4. Consistency and standards.
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.
5. Error prevention.
Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action.
6. Recognition rather than recall.
Minimize the user's memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.
7. Flexibility and efficiency of use.
Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
8. Aesthetic and minimalistic design.
Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.
9. Help users recognize, diagnose and recover from errors.
Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.
10. Help and documentation.
It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.
Research & Analysis
Playing the field.
Making the play.
We decided on Swoop Airlines due to its poor app store rating, relative size of the company and it’s clear heuristic violations on our first look.
Evaluation & Redesign
One screen at a time.
Original
Heuristic Violation
Help and Documentation
Insufficient support information within the app.
Need Help section links out to an external browser.
Redesign
Add all web resources to the native app.
Include a search function for better access.
Redesign
Heuristic Violation
Consistency and Standards
Information is delivered in a variety of ways, from full screens, to external websites and even the use of a card system.
Redesign
Use a consistent interface throughout the application to reduce user’s mental load.
Original
Redesign
Original
Heuristic Violation
Consistency and Standards
Inconsistent retreat CTA can cause user confusion and increased mental load.
Redesign.
Use chevron CTA consistently throughout the app. Familiarity due to cross application use will ease user mental load.
Redesign
Original
Heuristic Violation
Recognition Rather than Recall
Flexibility & Efficiency of Use
Logged in users are prompted to re-login during checkout of a flight purchase. This increases user mental & labour load
Redesign
Provide “use current login” option or eliminate the second login.
Redesign
Heuristic Violation
Help Users Recognize,
Diagnose and Recover from Errors
Absent explicit explanation of error fields in form. User must scan for small error symbols to proceed. This creates a significant mental load for the users.
Redesign.
Provide a list of errors at the top of the page and highlight the required fields that contained errors.
Original
Redesign
Next Steps & Objectives
Future thinking.
Our immediate next steps is to put these redesigns to the test, by implementing user testing to validate assumptions we made about the improved usability of the mobile application.
We have also considered the WCAG 2.1 in our redesigns, and would suggest implementing these guidelines to be applied throughout the application to abide by the January 2021 deadline.
Looking back at the past few months, i’ve learned an incredible amount. Here are a few of the concepts that stood out to me the most during this project.
Business objectives.
Evaluate business budget.
The cost for a heuristic evaluation and redesign is a fraction of the cost of an overall app redesign.Optimize timeline.
A heuristic evaluation is time efficient and can create lasting usability improvements.Tracking KPIs.
We can compare our bounce rates and cart abandonment from our original designs against the redesigns, at our key usability friction points.Track ratings and reviews.
We will monitor these additional KPIs from the app store to find qualitative and quantitative data on how effective the redesigns are in the wild.
A proposal.
As this heuristic evaluation has been made as a proposal, this is where it stands as of now. With the potential approval from Swoop, we would continue to evaluate all taskflows within the application to consider any other usability improvements. For now, this will be a freebie!
Any questions or comments please don’t hesitate to contact me.