HopPlotter

HopPlotter is a mobile app that assists users with locating and visiting craft breweries. Users have the ability to discover breweries based on their location, as well as keep track of breweries to visit. 

MY ROLE

Interaction Designer, Project Manager

PLATFORM

iOS Mobile Application Redesign

TIMEFRAME

2 weeks

Team

Pratisha Saharia (User Researcher)
Theresa Osburn (Information Architect)

METHODS

Project Management
User Flow
Interaction Design
Usability Testing

TOOLS

Pen and paper
Post-Its
OmniGraffle
Sketch
InVision


the challenge

The HopPlotter app focuses too much on promoting third-party competitors and lacks personalized customization features, resulting in a vague and inefficient brewery discovery experience.

The goal of this mobile app redesign were:

  1. Enhance customization features to give users a more tailored experience.
  2. Educate users on different craft breweries around their location of choice.
  3. Give users the option to read and write reviews about their experiences.
  4. Keep users on the app instead of sending them to competitors. 

The Solution

By adding features that make the HopPlotter mobile app more informative and easily customizable, users can tailor their brewery visits to what they actually want and experience an improved beer discovery process. 


Project Management

My project plan spreadsheet to keep the team visually informed and on track.

 

 

As the Project Manager, I built a spreadsheet to manage team tasks and created a project plan, as well as conducted daily check-ins to keep various moving pieces of the project on track. 


Research

During the discovery process, I worked closely with my team's user researcher, Pratisha Saharia, to conduct user testing with the original app. Research also included surveys, a competitive and comparative analysis, market research, and the creation of personas. I used the key findings from research, as well as the user persona, to guide my designs.

Our primary persona was Homer Green, a 31-year-old graphic designer who just moved to the Pacific Northwest to pursue his dreams of working for Nintendo. He is always on the lookout for new activities to try, and enjoys brewing his own beer at home.

Information Architecture

My user flow for the HopPlotter app, keeping our persona Homer in mind.


Though Theresa was the Information Architect, I was responsible for creating the user flow. I kept our persona, Homer, in mind when building out the flows for discovering breweries, customization and filtering, adding breweries to visit, and writing reviews.


Interaction Design

After analyzing our researched key findings and reviewing what worked and what didn't work in the usability testing with the original HopPlotter app, I sketched ideas for what the screens would look like with the new features and how they would function and serve Homer. 

Based on the research, there were a few main features I wanted to incorporate into the redesign:

  1. Enhanced customization. The enhanced customization features contain more filter options, such as Dog-Friendly, Food, Events, and Highest Rated. By adding more filter options, Homer can narrow in on what he is looking for in a brewery more efficiently.
  2. More visuals. Adding visuals also elevates Homer's experience because he can more easily decide where he wants to go by getting a feel for the brewery and how the place and beer look.
  3. Remove competitor integrations. Eliminating competitor integrations is essential in order to keep users on the app and not send them elsewhere. By incorporating an in-app beer list, ratings, and reviews, Homer can do everything he wants within HopPlotter without the risk of switching to a different app entirely.  

Design Studio

I led a design studio workshop to think through the Brewery Visit User Flow, and decided upon a couple of iterations that my team and I worked through and incorporated them into my designs.

WIREFRAMES

Upon agreement of the flows, I then turned my sketches into digital form and made wireframes using Sketch.

There were three different use cases that I built out:

  1. Homer customizing his filter preferences, locating breweries in his zip code of choice, and adding a brewery to his Favorites list and then moving it to his Want To Go list. 
  2. Homer adding a brewery to his Visit page and customizing the name, date, and time of his day of brewery hopping.
  3. Homer writing a review of the brewery he visited.

Once I finished the skeletons of the wireframes, I made a mid-fidelity prototype in InVision for usability testing. This phase of the design process was essential so I could identify what worked and what didn't in the redesigned flows. 

USE case #1

Logging in, filtering options, adding a brewery to the Favorites list, and moving the brewery to the To Visit list.

User Flow 1

Use CASE #2

Adding a brewery to a Visit and customizing the date, time, and name of the event.

User Flow 2

Use case #3

Writing a review about a brewery.

User Flow 3

Usability Testing and Iterations

I assisted Pratisha with testing my mid-fidelity prototype with three users, and discovered a few key learnings that I used to improve the wireframes. 

Usability Finding #1

Users found difficulty in getting back to the main Home page. In the first version of my design, the Map button was next to the Menu button in the navigation bar, which was unclear that this was the button to navigate to the main page. In the original HopPlotter app, the Map button was on the far left of the navigation bar, but initial user testing demonstrated that users were unsure that the button would take them to the main home page. Ultimately, the wording only needed to be changed and clarified. 

Iteration #1

I made the far left button the Home - and clearly labeled it as Home instead of Map - so that users knew what to press when they wanted to get back to the main screen. 

Navigation Bar Iteration2.jpg

Usability Finding #2

In addition to being able to access the Write a Review feature from the Brewery Profile, users also wanted to read the reviews.

Iteration #2

I added user reviews into each Brewery Profile to make it a cohesive experience.

Reviews Iteration2.jpg

Usability Finding #3

Users found the various information buttons near the top of the Brewery Profile distracting. 

Iteration #3

I resolved this by making the buttons all the same and stacked, so users could easily scan and find what they are looking for.

Buttons Brewery Profile2.jpg

High Fidelity Prototype

I created a final high fidelity prototype in InVision to see how each of the flows worked together. 

Success Metrics

If I had access to HopPlotter's data, I would document the baseline metrics and identify what constitutes success. I would measure the results from my redesigns and compare them to the results from the original design to see what functions and features worked or needed improvement.

These are the Key Performance Indicators (KPIs) I would measure:

  1. Increase task success rate.
  2. Increase the number of app downloads.
  3. Increase the number of accounts created.
  4. Increase the number of Visits a user creates.
  5. Minimize the number of incomplete Visits (breweries listed in the To Visit list but not scheduled in the Visits feature).
  6. Increase app share via Facebook, Instagram, Twitter, and email.
  7. Increase the number of reviews submitted.

What I Learned

Through this app redesign, I learned:

  1. The importance of communication and keeping the team updated on progress.
  2. Subtle iterations can have a big impact. 
  3. How to better work with teammates on various design phases while working toward the same goals.

further development

If continuing with the project, I would do the following:

  1. Continue building out more user flows. 
  2. Test with more users with existing flows (and future flows).
  3. Collect metrics and measure success metrics.
  4. Explore a collaborative trip planner where friends can add breweries into a shared Visit.
  5. Explore a feature to share trips with others in the app community (custom or sponsored trips).
  6. Explore educating users more (beer terms, how beer is made, how particular brewery beers are made, more information about where they are in a particular city).
  7. Explore more seamless social media sharing.