UX and UI Design Consultant and Illustrator
casestudy.png

Design Case Study

AFAR iOS Travel App

 

Pretty pixels are great, but they don't tell the whole story. The following is an abbreviated description of my design process to give you an idea of all the work that comes before the final pixels.

AFAR iOS Travel App: As a designer at AFAR, I had the opportunity to design their travel app from the ground up. In collaboration with the iOS developer, we tackled product planning, design, and user testing. 

My design process changes depending on the project, but I usually borrow from some tried and true methods, as was true for the AFAR app. Here are some of the key tenets to my process:

process@2x.png

Empathizing and Defining the Opportunity

A note about personas: I’m not convinced that creating a persona based solely on assumptions is a good idea. I think personas are a useful starting point if they’re based on real data and real conversations because it allows you to immediately put a human face on your users. For the AFAR app, we were able to create personas based on interviews with known users of our web site and readers of our travel magazine.

We created several personas, but decided to zero in on the one we saw most frequently and was the most relevant. Below is a summary.

Tosha, 35, affluent traveler for business and leisure:
• Because she travels frequently for work, she often doesn’t have any time to plan meals at restaurants or sightseeing

• Because she is short on time when traveling for business, she wants to know what is nearby and open now

• When she travels for leisure, she wants the ability to save her plans and access them online and offline

• She wants an easy way to access the essential information about a place she is visiting (transportation, customs, etc)

After establishing these higher level needs, we drilled down to try to identify and prioritize more specific features. To do this, we used a tool called Job Stories, which I first read about on the Intercom blog. 

A job story is framed like this:
When _____ , I want to _____ , so I can _____ .

For example, for the AFAR app:
• When I travel, I want to have my plans always available, so I can access them even without wifi. 

• When I open the app, I want to see what’s nearby, so I can save time.

• When I view a restaurant, I want to see similar restaurants, so I can make an informed decision.

By using this model, we were able to expand on our persona and get more specific about the who, what, when, why.

 

Business and Tech Requirements/Constraints

Sponsored content: how do we incorporate it gracefully so it doesn’t feel like an ad that is interrupting the experience, while still being transparent that it is sponsored?

Apple iOS platform: how do we use the framework apple has provided most efficiently, while at the same time creating a branded, unique experience for the users?

Lo-Fi Sketches

Architecture and Flows
In the first sketches, the goal was to create the map of the site. How many screens were there? How did one screen connect to another? 

Lo Fi Wireframes
We created lo fi wireframes to get feedback on the higher level flows and iterated accordingly. Once we got the sign off for the next batch of wireframes, I began creating more detailed prototypes.

Establishing the basic architecture of the app

Establishing the basic architecture of the app

Creating lo fi wireframes

Creating lo fi wireframes

Tappable Prototypes, Hi-Fi Mocks and UI Components

We used Flinto for quick tappable prototypes and Test Flight for higher fidelity prototypes that we shared with our team and potential users. 

When the patterns were established for macro-interactions, I drilled down and focused on micro-interactions and polishing the UI. As I work through the screens, my process is to keep a list of all of the UI elements that are needed and in what context they’re needed. This way, I can design a system that accommodates for all the use cases. For web apps and mobile apps, I follow an atomic design model to keep the system consistent. The five stages of atomic design are:

Atoms

Molecules

Organisms

Templates

Pages

Each element combines to create the element larger than itself, for examples, atoms make up molecules, molecules make up organisms, etc. From Brad Frost: “In the context of a pattern library, atoms demonstrate all your base styles at a glance, which can be a helpful reference to keep coming back to as you develop and maintain your design system. But like atoms in the natural world, interface atoms don’t exist in a vacuum and only really come to life with application.”

We were lucky enough to work with Apple along the way. They audited our UX and UI and gave us feedback, which ultimately made us feel more confident with the design.

I worked closely with our iOS developer to ensure implementation of the visuals and interactions was spot on.

Group@2x.png
Group 2@2x.png

“Final product” (not final at all)

Once we arrived at a product we were comfortable releasing, and we’d received a good number of downloads, we tracked the app through App Annie. This allowed us to measure session length, time on the app over time, and retention. Particularly useful was the Screen Flow recording capability, which gave us insight into how users made their way through the app. Based on these recordings, we got rid of an upper left "hamburger" menu and went with on screen nav icons that were more easily discoverable. In the end, this seemed to increase both session length and time on the app. 

We continued to make incremental changes to the app based on metrics.

App Store Features

We were excited to be featured in multiple categories in the iOS App Store: Best Travel Apps, Best New Apps, Best iOS 8 Apps.