Views

iOS Mobile App
Views provides a layer of trust for where to go and what to experience in each city. Users can store places in guides and make recommendations to friends in one place, but the responsive web app was difficult to use on the go.
My Role
Research, User Flows, Information Architecture, Sketching, Wireframing, UI, Prototyping
Client
Myviews.io
Timeline
5 weeks

The Challenge

Although most features work in the mobile web app, the experience would be fuller as an native mobile app. The challenge would be to create an end-to-end mobile experience that embodies and enhances the current experience.

High-level Goals

  • Design an iOS app that allows users to easily share, receive, and store recommendations
  • Discover and implement new features
  • Maintain the current logo but explore UI elements

My Process

1. Discovery

User research

I wanted to learn about how people plan for trips: how they discover new places, what methods they use to save travel recommendations, and how they access them later. I conducted phone and in-person interviews, and also created a survey that was completed by 25 participants.

The survey was great for quickly gathering information from a sample of my target audience, while the interviews allowed me to gain a deeper understanding of the participant's behaviors. The main takeaways from the two methods were:

People discover new things to do through the internet and friends
People keep track of travel ideas and itineraries in a word document tool
People categorize things by location and type when planning

One participant showed me her travel planning notes from before and during her trip.

Meet Dan

I used the findings to construct a provisional persona, Dan, to help me understand how I can help him/our users achieve their goal using certain features in the app.

Meet Dan Freeman, a 30-year old lover of adventure who keeps a bucket-list of places and activities to visit in his free time.

2. Define

Brainstorming Features

To brainstorm features for the product roadmap, I created How Might We and Point of View Statements using insight from my research and Dan’s empathy map.

How might we help Dan get recommendations from his friends who have traveled to Tokyo?

  • Showing existing user lists after searching for destination
  • Mark a list as "Looking for Recommendations"

How might we help Dan create an itinerary using the places he saved?

  • Option to create itinerary by selecting existing places in list
  • Organize itinerary by daily activities
  • Adding notes to itinerary

How might we help Dan categorize the places that he saved?

  • Allow for multiple tags
  • Filter by tag

Information Architecture

After identifying a solid set of major features, I mapped out the information architecture to show the hierarchy of major and minor features. It will give me an idea of how to organize content and how many interactions or screens it'll take to complete a task,

User Flow

I developed a flow that allows for seamless and cohesive user experience with out dead ends. Given that user may be looking for something particular or be inspired while browsing, the users have the flexibility to add places and create new lists from multiple points in the mobile app. They are also able to create and edit an itinerary within a list. This flow caters to two types of users:

New users who can create a list after the onboarding flow and signing up.
Current users who are checking an existing list, itinerary, or have received a notification.

I created the following flow because I wanted to know the app from start to finish. The flow contains all possible user flows from multiple starting points.

3. Ideation

By now I have already gathered enough information to get started with the wireframes. I created this set of mid-fidelity wireframes of all of the key screens needed to complete the main user tasks that I will be testing for: adding a place to a new guide, turning on looking for recommendations, and creating an itinerary.

A. Adding a place to a new guide

b. looking for recommendations

C. Creating an itinerary

4. Prototype

Check out the mid-fidelity InVision prototype here.

5. Validate

User Testing

I conducted user testing on my mid-fidelity prototype on a mobile phone to see how users would complete certain tasks once they were given some context. I was curious if they new to scroll or tap in certain screens. The goal was to identify pain points that could be improved in future iterations. Tasks I tested for:

  • Adding a place to a guide that hasn't been created
  • Adding a recommendation to a friend's list
  • Letting others know user is looking for recommendations
  • Creating an itinerary

Affinity Mapping

I had great feedback that made me think about the shareability and accessibility of some features, especially to people who do not use app yet. I organized my findings in an affinity map to identify the pain points and potential solutions that would be incorporated into future iterations.

Changes: CTA placement

Before

Add a Recommendation CTA would disappear when user scrolls down


Ratings (made by Adam) would appear only when user taps into a place

After

CTA is now fixed so that Adding a Recommendation is easier to spot.

Ratings appear in list view.

Itinerary Organization

Changes: Export options

Before

When looking at a place, the only action that could be taken was adding to user's own list

After

The added export sign in the top-right corner allows users to recommend the place to a friend and share with friends who don't use Views.

This will create opportunities for new users to join via shared links.

Changes: Itinerary Organization

Before

Paricipants felt flustered because there was too much going on in one screen.

Users also forgot which day they were adding to.

After

The day that is currently being edited is displayed at the top. Instead of having the user manually sort, the places are automatically organized in the tabs.

6. UI

Style Guide

After working the changes into the wireframes, it was time to proceed with the visual design. The black in the web app was a bit difficult to work with because it overpowered other elements of the design. I wanted to maintain Views’ clean design and contrasting colors, but went for a deep purple instead of the black. When paired with hints of bright mint, the end result was an interesting and friendly aesthetic.

High-fidelity Prototype

View Prototype

7. Measuring Success

Because the first version of the app is completely free, I cannot measure how profitable it is. Instead, I would gauge how successful the design is through the following weekly/monthly activities:

  • Accounts created
  • Guides created
  • Recommendations made across friends
  • Use of itinerary feature


There are plans to include paid placement opportunities in the future, allowing companies to pay a certain fee to include their business in the newsfeed or search. It will be interesting to measure how many users add these places to their guides.

8. Recap

Creating an end-to-end mobile app for a web app was certainly a big and tricky project. I needed to embody the existing experience, but improve at the same time. Through surveys and interviews, I was able to validate Views’ current features and also discover that most people want to be able to organize the places they saved, especially when they were planning for that trip. It was challenging to keep track of all of the existing minor details at first, but conducting a full audit of the web app helped me stay organized and focused on the big picture.

Matching the existing aesthetic while having freedom with visual elements was also challenging because I was free to run with ideas, but not deviate too much from the original aesthetic. I’m please with the end result which still has hints of the web app, but with new twists appropriate for modern travel guide app for guides.

Next steps

Although this project concluded with a solid prototype, I would still like to continue testing and improving the design. The next step would be to hand-off red lines and the final prototype screens to developers.