Overview

My Role: UX & UI Designer, HCI student (class project)

Tools & Methods: Paper & Pen, Sketch 3, Moderated User Testing, A/B Testing, HTML & CSS

Deliverables: Live Mobile Web App

Award: "Most Human-Centered" out of 79 teams. Judges included professionals from Google, Qualcomm, Intuit, and Art Center College of Design.

Story

Grizz is a mobile-first web app for outdoor enthusiasts. It saves money for some users and makes money for others by facilitating the rental of specialized outdoor equipment.

Working with one other designer and a software engineer, our team of 3 designed and built Grizz during an Interaction Design course from UC San Diego's Human-Computer Interaction program. My role included paper prototyping, interface design, user flow design, usability testing, logo design, and assisting with front-end development. Our project received top marks and recognition from industry professionals.


Summary

Solution

Grizz is a web app that allows users to cheaply rent outdoor gear while enabling other users to profit off of belongings that would otherwise be collecting dust. That way, users can spend less money and spend more time experiencing the outdoors!

Problem

Enjoying the outdoors can be expensive. Some people want to try activities like camping or surfing, but don’t want to buy their own set of equipment. Conversely, others have made the investment to own specialized outdoor gear, but they rarely use it.


Interviewing

To discover needs relevant to our target audience, interview participants were limited to people who enjoy the outdoors and either owned gear or had experience renting/purchasing gear.

Main Insight: People who own gear usually use it only 1-2 times per year. Others choose not to buy gear because they know they will only need it once or because of high-costs.

Our interviews hinted at the potential for an app like Grizz, and inspired us to consider new features .

Feature 1: Utilizing Friends for Gear

During interviews, we found that people often look first to their friends to lend them gear. So, we allowed Grizz users to easily find their friends who own the gear they want by using Facebook's API. For example, if they were searching for a tent, the top search results would be tents owned their friends.

Feature 2: Rating System To build trust

Some people who owned gear would be hesitant to rent it to people they didn't know. To build trust, we decided to incorporate a rating system for both parties to review each other, similar to Airbnb's rating system used to hold each other accountable.

Unfortunately, these features were cut in an effort to launch an MVP as soon as possible and meet deadlines.


Paper Prototyping + Heuristic Evaluations

 
 
PaperPrototype1.png

Paper Prototype #1

  • Searches for gear from friends only
  • Offers a sharing (non-monetary) platform 
  • Logistical details are left up to the individuals (like Craigslist)
  • Requires sharing your own gear to have access to others' gear
Benefit2.1.png

Paper Prototype #2

  • Searches for gear from anyone in your area
  • Monetary transaction in the app (Venmo API)
  • Handles logistical details such as rental start/end dates
  • Can rent gear from others or rent out your own gear
 
 

Rapidly prototyping and getting heuristic evaluations in the early stages allowed us to test out several different concepts and solicit valuable feedback. Participants completed a task with both prototypes and then were asked about their experience. Afterwards, participants (students in our Interaction Design class) did heuristic evaluations of both prototypes according to 10 usability heuristics for user interface design by Jakob Nielsen. We received a list of issues to address and learned that most people are comfortable enough renting to strangers, preferred the monetary exchange to the sharing system, and are generally indifferent to having payment handled through the app vs on their own.


Designing User Flows + Wireframes

As we prepared to make a coded prototype, we utilized the feedback we had received with our low-fidelity prototypes in the creation of user flows and wireframes.  

Who says you can't color on the walls? Using notecards, tape, and chalk turned out to be a fast and effective way to design user flows, specify requirements for each page, and discuss everything as a team. (I personally am a huge proponent of having physical environments or artifacts dedicated to specific design projects.)

My wireframes and simple hand-drawn interfaces helped us visualize layouts and content before diving into code.  


Usability Testing with Coded Prototype

After assisting in front-end development (and using Github for the first time) to build our first online prototype, I took the lead on planning and running usability tests. By running a pilot test prior to running any recorded testing sessions, I was able to refine our testing procedure. Participants in the study completed two tasks and answered several follow-up questions.

Discovered Pain Points:

  • user errors on form completion
  • inability to quickly scan options
  • mistaking icons as clickable/unclear icon labels
  • undiscoverable features necessary for task completion
In this testing session, one camera points at the user's face, while a screen capture simultaneously records what the user is looking at. Testing sessions were reviewed with these two views side-by-side, as shown above.

In this testing session, one camera points at the user's face, while a screen capture simultaneously records what the user is looking at. Testing sessions were reviewed with these two views side-by-side, as shown above.


Visual & UI Design

Logo Design

Although logos are not my specialty, the small team size forced me to try my hand at it. With some iterative sketching, I designed a logo made of symbols that embodied of Grizz's outdoorsy brand, including a grizzly bear paw, water, mountains, and fire. Green seemed like a natural logo color choice to deepen our brand's connection to nature, and choosing a vibrant shade of solid green gave it a flat modern feel.

Logo Design Process Image.png
 
 

UI Design

My flat UI designs use the same green from the logo in all of the primary CTAs to provide consistency and to guide users through workflows. 

iPhone-Mockups3.png

A/B Testing Form Design

B Testing Diagram.png

By testing one of the crucial forms in our app, we saved users time and reduced frustration. We collected both quantitative and qualitative metrics during our live test.

Test Metrics:

  • Number of user errors
  • Time to successful completion
  • Written comments from users (survey)
  • Happy/Neutral/Unhappy rating after task (survey)

Final Product - "Most Human-Centered" Award

FinalScreenshotsSpread.jpeg

After pushing our last lines of code, we pitched and presented Grizz at a poster session attended by HCI students, design professors, and professional designers. To select 3 recipients of the coveted design awards, judges came from Google, Qualcomm, Intuit, and Art Center College of Design. My two teammates and I were delighted when we heard that Grizz had been awarded the title of "Most Human-Centered" out of 79 web apps!


Wrap Up

Lessons Learned

  • Copy really affects UX. Non-descriptive CTAs in our first prototypes led users down the wrong path. We had to go through several iterations of copy to find the right words. 
  • Developers aren't mind readers. Without thorough documentation, annotations, and communication, it'd be a miracle if your design comes into contact with code and turns out looking and behaving exactly like you had intended.
  • Smaller teams achieve more (to an extent). Fewer people on a team leads to quicker decision-making. I’ve also observed a greater sense of project ownership that fuels quality work.