The Green Moustache

Organic Food Bar as featured on Dragon’s Den

Whistler, British Columbia, CANADA (August 2017)

Project: Mobile App Design (native iOS platform)
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.

Design v1.0 (Low-fidelity, Paper Wireframes)

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.

Changes applied from User-Testing

Just four of the changes applied during the iteration process that was most valuable to users.

One important item we learned was to tell the user or allow them to pick the time they could pick the order up, instead of ambiguously saying it will be ready in 15 minutes (circled in pink).

Since 69.2% of our survey participants wanted to be educated, we provided a small sentence on the benefits of a certain ingredient at the same time of order confirmation, that we are calling “Green Tips”. There is learn more button right below that, so if the user wanted to learn more, they would be directed to that particular page to learn more about it, how that ingredient is beneficial and how The Green Moustache uses it in the menu (circled in yellow).

We also learned that not a single one of testers knew what the “farm” icon was, where we wanted them to go in and learn more the ingredients, events and more about the local growers that TGM is sourcing the products from. Simply changing it to a “book” icon and also applying a label of “Learn” below the icon (considered by following the the iOS Human Interface Guidelines) allowed users to find information with ease (circled in pink below).

From testing we learned that not all users liked the approach of registering in order to just look around and learn about products. Our solution was to create an “Explore as Guest” state so users didn’t have to login (circled in pink, below).

From testing the mid-fi prototype, we learned that, on-boarding screens to provide a simple walk-through for our first time users of the app, would be great—which we implemented here in the high-fi state, as seen below.

Below is a gif of the progress so far (for the product detail page) from the low-fi state, to mid-fi to where the design currently is now, the high-fidelity state.

Prototype Walkthrough

User going through the app, choosing Buddha Bowl from the featured menu, adding it to the favorites, learning more about it, adding it to the cart, finishing the transaction and getting a confirmaiton.

Prototype for “Events”

Target users were more concerned with learning more about the nutritious value of the food and it’s health benefits.

They wanted to attend seminars and events, so an appropriate section was added.

Since they wanted to support the small businesses in the community, a section was provided about the local growers, so users can learn more them, how and what part of the community they grow them in and what other produce they supply their favorite live food bar.

Current State / AppDev Handoff

The project has been pushed off to the application development team and we are overseeing to ensure quality, functionality, strict adherence to style guide and user experience.

View the interactive native iOS prototype

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.

0
Field Trip
0
Delicious Meals
0
Weeks
0
Low-fi Screens
0
Mid-fi Screens
0
High-fi Screens

———Thank you!———

Let’s Work Together

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

jothish.john@gmail.com
error: Content is protected !!