Overview

Fire Hose Straps is a company that takes retired fire hoses and turns them into guitar straps as well as selling other branding-specific products. The company uses a hosting platform for their online commerce but were toying with the idea of building their own app to sell their products and foster an online community. They asked me to make the preliminary designs for that app. Using an agile design sprint method I focused on one problem to solve for this company and created a MVP clickable prototype that addressed that problem.

Fire Hose App Mock Up Frame on iPhone 11

Click for Prototype

Sprint Focus (Problem):

Unique but intuitive browsing. That was the problem I decided to focus on for this sprint. The entire reason Fire Hose Straps was looking to branch out from other cut-and-paste hosting sites was because they wanted a marketplace that was as unique as the products they were selling. With that in mind, I wanted to create a familiar, but unique browsing and checkout process that was simple for the user to interact with as well.

Solution:

The solution was to make the landing page of the entire app the product browsing page. This minimal page would have a scrolling feature where you swipe left or right to browse the products and click on them to view more. It was simple to browse, unique to the brand based on competitive analysis, and intuitive to use.

Users and Audience:

Fire Hose Straps was kind enough to provide us with basic demographic information about their customers and I was able to use that to infer who the users would likely be for this app. I coined the title “Millennial Music Enthusiast” and gave them the gender neutral name of Alex for the persona I focused on throughout the process.

Roles and Responsibilities:

I was a one man team for this project. I took on the role of UX designer and focused on functionality of the features within the defined scope of the project as opposed to focusing on the interface and branding. I was responsible for drawing conclusions from consumer data, defining a problem, sketching solutions to the proposed problem, building a rapid clickable prototype, using that prototype to conduct usability tests, and discerning next steps based on that preliminary usability data.

Process

Discovery and Research
Information Architecture
Mid-Fidelity Prototyping and Usability Testing

Discovery and Research

Client Interviews

Through interviewing the client via zoom, I was able to ask about and receive information about their customer base. We discussed who their customers typically are and any feedback they have gotten about their current E-commerce platform.

Competitive Analysis

For further market research I looked at Reverb's mobile app, as well as Asos. Both are E-Commerce apps. I wanted to see what I was up against and make some observations about what I liked and didn't like about those apps.

User Stories

With the clients input, the competitive analysis, and the initial problem statement in mind, I was able to formulate some user stories. These gave me a more clear idea of what these potential users were looking to achieve by using Fire Hose App. The stories are below.

Persona

Based on the data given by the client, I was able to extrapolate that these users have a DIY personalty, are tech savvy, are Interested in supporting small business, and being unique. From there, I built the full persona you see below.

Millenial Music Enthusiast (Alex)

Age: 33

Gender: N/A

Occupation: Mid Level Professional

Location: Urban Centers

Behaviors:

- Often goes to concerts

- Has a DIY attitude

-Self Sufficent

- Tech Savvy

Bio:

Alex is a mid level working professional living in the city. They are a music enthusiast and in their spare time are musicians themselves. They take care about small business and products being made in America. They appreciate doing things themselves and being creative. They want to be unique and stand out from the crowd.

Motivations:

Alex wants to support local business as well as buy a unique piece of gear they saw at a show in tow

Goals:

- Easily Browse/Purchase

- Learn more about company

- Share what they find

Frustrations:

- Getting hassled

- Un-intuitive navigation

Empathy Map

After building the persona, I moved on to putting myself deeper in the users shoes by building an empathy map. In this empathy map I worked to understand how navigating the app would feel for them. This was to better understand their desires and possible pain points.

User Journey

In a final push to understand our users and their desires for this app, I created a user journey that walked me through their possible experience through the app. I wanted to look for design opportunities by walking through the process as if I were the persona in question.

Information Architecture

Site Map

Before I started designing, I wanted to be able to visualize the way in which the information Fire Hose Straps was giving their customers could be organized. This gave me a jumping off point before any sketching happened.

Sketching

After some quick, rough sketches to get the first ideas out into the open, I used a 4-up method of sketching to really try and push my creative boundaries in finding a simple, yet unique, browsing experience. This all led to choosing one of the sketches, and formulating a solution sketch that expands upon the initial sketch and addresses the problem directly.

Wireframing

Using the solution sketch as a guide, I moved onto making the first round of digital wireframes. This is where the design really started coming to life.

Prototyping and Usability Testing

Clickable Prototype

After iterating upon the initial wireframes with the helpful advice from a mentor, I was able to present a final version of my minimum viable product for users to test. This mid-fidelity prototype only had the essential UI elements to help testers understand the context of the tasks they were asked to complete. The focus of this sprint was the functionality rather than the aesthetics. If you click the image below, you can click through the prototype yourself.

Click for Clickable Prototype

Usability Testing

The first round of usability testing involved some basic E-Commerce tasks. I interviewed participants through zoom and watched them navigate with prototype and took notes as well as recorded times.

Findings and Final Thoughts

While the scope of this sprint was fairly small, the findings were not. I was able to prove that this non-conventional browsing method was not a hinderance to the user when looking for and purchasing products from Fire Hose Straps. With that information in mind, I think this proved itself to be a viable design that both fit what the business was looking for and was usable. Fire Hose Straps wanted a unique experience while not making the process so arduous that potential customers abandoned ship. With average task completion times ranging from 30 seconds to 1.16 minutes, I would say I was successful in my design.

Lessons Learned

This process really made me grow as a designer because it forced me to be creative with something that could very easily be considered "been-there-done-that". After all, E-commerce has been around for a long time now. It would have been simple to copy a competitor and change the branding but that's not what being a UX designer is about. Innovating, even in small ways, can benefit the user in the end. Even if it's just by making something like a back button more reachable.

Recommendations Moving Forward

Fill out the UI and bring full branding/color/typography into play and lean into the uniqueness that is in the underlying design and really flesh the app out.
Find a more elegant way to inform users of how to navigate the newer features. The solution of having an instruction card worked for now, but moving forward I would like to expand upon that idea and see what I could come up with.
Complete the designs for the other features of the app. There are some good ideas that were outside of the scope of this sprint that I would enjoy following up on.

PlugIn

You also might be interested in these other case studies.

SimpleStop

Page updated

Google Sites

Report abuse