The Green Moustache

Vancouver, British Columbia, CANADA (August 2017)

Project: Mobile App Design (iOS focus)
Role: User Experience (UX) Design Lead, User Interface (UI) Design Support

The Opportunity

The Green Moustache (TGM) is a locally owned, live food bar (headquartered in Whistler, BC), that serves cold-pressed juices and healthy, fresh organic food. They have two other locations (Squamish & Revelstoke) and are growing at a rapid pace.

TGM wanted a mobile app that allows them to stay engaged with their customers, educate them on healthy eating habits and providing them valuable information on fresh, healthy organic alternatives. They also wanted the ability to give back to their customer base through a loyalty program.

The Solution

Create a mobile app, where The Green Moustache can provide a more efficient service in meeting the needs of their busy customers, has the ability to give back to their customers through a loyalty program and also provide information on educational events and seminars.

To get started with this project, we followed a pattern, which time and time again has shown to be very effective. We started off with:

  • Research where we conducted interviews, surveys, contextual inquiries to learn about the goals from the business side, identify the goals of the users.
  • Valuable information from research helped us plan some designs and see how we can solve this problem.
  • In the design stage, we were able to sketch out our ideas and see how our solution might translate.
  • We then were able to prototype using tools such as MarvelApp and InvisionApp to test with real users to get feedback and iterate the design that will allow a better experience.

Domain Research

My UX Partner conducted domain research, where we learned that most of the apps were popular fast food chains (burgers, pizza & coffee).

From domain research we also learned that the three popular features were:

  1. Online ordering
  2. Menu
  3. Loyalty/rewards (where only half of the apps incorporated this feature)

Competitive & Comparative Analysis

I did a competitive & comparative analysis on The Green Moustache with their direct competitors in the Vancouver area. I categorized them into two groups—the business/market side of things and the technical (web, app) related items.

The results are as follows and clearly shows where The Green Moustache has an edge and where their competition is lagging—so they can make those experiences better for the target customers. We learned that their direct competitor is Juicery Co. which had a lot of features similar to our client, The Green Moustache—especially the healing aspect, that our clients wanted to push more on.

Site Visit

To gain more valuable insight into the operation, our team visited the closest location in Squamish. We met with the founder, who treated us to lunch and shared with us the history, future plans and the delicious food itself.

Contextual Inquiry

From contextual inquiry we learned that there were some inefficiencies with user’s (customer’s) time spent at the counter and that it can be greatly improved.

Interviews

We were able to interview four (4) customers to gather qualitative data. From the interview we learned that consuming organic food was very important to them. For one instance, the distance was not a factor to make sure the food they were consuming was pesticide free, fresh and local.

From the other interviewees we also learned that they like to learn more about the food. One person in particular mentioned that, they get information from their primary care physician—who advises them on the benefits of organic food. They also mentioned that they go online to certain blogs to look up information on how to best use the products in dishes and what new ingredients can be added. We also learned that price was not a factor

“I will drive however far it takes, so I am ensured, the food is safe, fresh, grown pesticide free locally.”

“Health is so important that you can’t put a price on it.”

Survey

To collect quantitative data to support our design decisions, we had our client send out a survey to their email list as well as post on their social media. Some of the key findings:

Based on the research part of our process, we were to able to identify the goals of our users.

Primary Persona

The research allowed us to see that the primary persona fits the scenario of a female professional, who is about 40 years old, lives a healthy lifestyle and is conscious about buying food, that is sourced locally. Her goals also include wanting to make sure her food is fresh, clean and organic. She likes the idea of supporting local growers and her community as well.

Her frustrations include, not being able to know if food is mishandled or unclean and the stores not being convenient. She doesn’t like missing or outdated info, when trying to learn more about a product and she feels it’s good for her body — even though the price can be high.

Agnes’ motivations include extrinsic factor — her primary care physician who advised her that fresh, organic food is beneficial to body. Intrinsic motivators include her want to eat healthy food, to nourish her body as well as to show support for local growers, who are from her community.

Information Architecture

Once we got to learn about the business goals and the user goals, we set out to plan our design. We started off with a user flow to meet our MVP and as well as created a structure of the app to see where all the elements lived.

User Flow

We mapped out a possible user flow for our persona to complete certain tasks to test the functionality and goals of the Minimum Viable Product (MVP). The first version allowed us a great starting point, but from testing we learned that users weren’t happy with not being able to add items to the bag, because they needed to register.

We moved registration to the end, right before the checkout process—after the user had ample time to browse and learn. From testing this altered version, it resulted in a flow that was much smoother and the tester had a better experience.

Site Map

To get a visual representation of the layout of the app, I created a site map. I organized the structure based on key features we identified were important for our target users, based on testing.

User Journey Map

To get a visualization of the process, I put together a series of goals and actions on a timeline and added emotions (positive to negative) on a scale to create a narrative, as they journeyed through the app.

Wireframes (Low-Fi)

Our design started off with sketching wireframes on paper, based on the user flow and the sitemap. My UX partner and I did a design studio (my design studio sketches on left) on some of the initial screens.

We relied on each other’s strengths and, since her strengths lied in sketching and mine were in the Sketch App to digitize, she would complete the first set of low-fi wireframes to get started, so we could move on to conducting user-testing, early on, as a low-fi prototype on MarvelApp.

From my part, I considered a number of design principles when starting on the design phase of this project. For example:

I used Gestalt’s principle of Proximity (“…things close together, belong together”) to assemble items that belonged in a group (below, left).

A second design principle I used was to apply “limited access”, where users “…desire things that are exclusive or belonging to select few.” In this case, users who register get privileges such as buying the product (below, right).

Another design principle I used was Uniform Connectedness (“…the fact that elements that are connected by uniform visual properties are perceived as being more related than elements that are not connected”). In this case above, all the profile images have a blue border, all the headings are pink, the subheads/details are yellow, the prices are in green and the arrow to dig deeper in gray. Even though these items are all in different groups, according to Gestalt’s Principle of Proximity, through visual properties they can be perceived as relating to one another.

Low-Fi Prototype & Testing

The screens below are the set of wireframes designed by my UX Partner. We uploaded these low-fidelity screens, on to the MarvelApp to conduct the first round of user testing.

Hypothesis
I think that users will struggle while having to register for purchase. We need them to register, so business goals can be met.

Fears of my design …
I think users will look around to click on other links. I am not sure if they will register first or go straight to the clear task of adding product from the featured menu. I fear that they might forget the task and choose the item from a different category and not necessarily the one that has appropriate hot spots set up for the prototype.

Task
Select Buddha Bowl from the Featured Menu, add it to the bag and then checkout.

Feedbacks (5 User testing in person)
The image below shows the different states the users were going through while we conducted the test of our first low-fidelity prototype using the MarvelApp.

Current State / AppDev Handoff

The project has been pushed off to the application development team. And at each stage they are going through, we are finding issues while testing and committing iterations.

Hurdles & Lessons

Miscommunication early on led to delayed start for the project. We needed to be on same page, but everyone was trying make their input heard, especially me. It was healthy in one sense that, nothing said was personal, but passionate about wanting to have a great product as the end result.

Next Steps

Applying the final tweaks and exporting assets in a timely manner, so the AppDev (application development) team can take over and convert this from a fully functioning prototype to a fully functioning, useful, app on Apple’s AppStore.

———Thank you!———

Let’s Work Together

Just say hi or let me know how I can help tell your stories.

jothish.john@gmail.com