Client: MotoTech

Timeline: April 2019, 2 weeks

Deliverable: Iphone App Prototype

Team: Self-directed with feedback from mentor and peers

Roles: UX / UI Designer

Tools: Sketch App, Marvel, Illustrator, and Photoshop

 
 

The Challenge

Unlike a car, a motorcycle requires more upkeep in order to be in full working condition. MotoTech understands this and wants to make motorcycle maintenance easy for even beginners. MotoTech needs help in defining the best way to move forward in that direction by providing them with a prototype of the mobile app.

This is a speculative project, MotoTech is a fictional company

Objective

  • To develop the brand for MotoTech

  • To design the mobile app

 
Mobile Showcase (Straight).jpg
 

My Design Process

 
 


User Research

Goals: Gain insight on the business, customers, and current market

Process: Market Research / Competitive Analysis / User Interviews

Market Research

I first started my research by creating a research plan which you can view here.

After creating a plan, I then researched about the market in order to gain a general understanding of the motorcycle industry and MotoTech’s user demographic.

Motorcycle Industry

  • $4.4 billion dollar industry

  • Currently a majority of bikes in the U.S consist of Sport bikes and cruisers.

  • The motorcycle industry is having trouble obtaining younger riders who will later replace the current generation of motorcyclists.

    • As a result motorcycle prices are reaching an all time low with companies trying to obtain new young riders with “beginner friendly bikes”

User Demographic

  • In 1990 the average age of motorcyclists was 32. Currently that number is now 47

  • Baby Boomers outnumber Millennials as motorcycle owners at a 4-to-1 ratio.

  • 92% of motorcycle owners use at least one form of social media while 81% of owners would be classified as a heavy social media user.

  • In 1988 8% of motorcyclists were women, now that number is 19%

Motorcycle In Use

  • The average motorcycle owner uses their bikes for at least 100 riding days every year, which includes days that involve commuting.

  • The average length of riding season: 10 months.

  • 13% of motorcycle owners say that they ride their motorcycle for 300+ days every year.

  • 1 out of 5 motorcycles being used as a primary mode of transportation was built in or before 1994.

Motorcycle Maintenance

  • More than 49% of women motorcyclists perform their own maintenance.

  • 30% of motorcycle owners perform all of the maintenance, while 60% did as much as they were able to.


Competitive Analysis

Through this analysis I quickly realized how underserved this market was due to the lack of quality apps. My main takeaway was that in order to ensure MotoTech’s success, we would have to deliver a personalized app that breaks through into this underserved market.


User Interview

Attending a public group ride to meet participants willing to be interviewed

Attending a public group ride to meet participants willing to be interviewed

Now that I had a good understanding of the motorcycle industry, I wanted to get to know the users on a more personal level. To achieve this, I conducted 1-on-1 interviews with 5 participants.

Through these interviews I was able to learn more about people’s relationship with their motorcycles and who the target users of MotoTech are.


Define

Goals: Synthesize research and identify user needs, goals, frustrations, and motivation

Process: Empathy Map / Persona / POV Statements & HMW Questions

Empathy Map

After gathering primary research data, I built an empathy map in order to synthesize the data and uncover user insights and define their needs. One major takeaway was that all participants had one thing in common. They were very passionate about being able to ride their motorcycles whenever they want. View Details

Empathy%2BMap.jpg

Needs

  1. Users need to build relationships with mechanic shops

  2. Users need to be able to ride their bikes whenever they want to ride

  3. Users need a more universal way of keeping track of maintenance on their vehicles

Insight

  1. Users only bring their motorcycles to mechanics they trust

  2. Users are passionate about riding motorcycles

  3. Users currently use many different methods of tracking their maintenance


Persona

Referring to all of my research, I created a persona, Dave. By creating a realistic representation of the target users, I can better empathize with them and make sure that all of my design decisions are focused on the core users of MotoTech.


POV Statements & HMW Question

With the target user defined, it was time to translate Dave’s needs into action. I created point-of-view statements based on the user insights and needs. From these statements, I created a series of how-might-we questions in order to encourage the process of ideating solutions to Dave’s problems.

POV Statement.png


Ideate

Goals: To ideate features, information architecture, and flows

Process: Brainstorming / Product Roadmap / Sitemap / Task Flow / User Flow

Brainstorming

Using the how might we questions, I brainstormed a list of possible solutions that might meet Dave’s needs. The key takeaway from this, was to generate as many ideas as possible, I gave myself 5 minutes per question and did two sessions with a large break in between in order to encourage thinking and coming up with more solutions. View Details.

Brainstorm.jpg

Product Roadmap

After brainstorming, it was now time to narrow down the list. I selected features based on how many people the feature would impact, and how much of an impact the feature would have on each person. The roadmap made it easier to focus on several key features for each of Dave’s needs.


Sitemap

I then created a sitemap in order to establish the information architecture for the MotoTech app. I studied design patterns in a few motorcycle apps as well as reference Dave’s persona which helped me visualize the best way to structure the app for Dave’s needs. View Details

Sitemap.png

Task Flow

I created this task flow in order to help me understand how a user would accomplish their goal and what decisions they would face. View Details

Task Flow.png

User Flow

To analyze the flow throughout the app, I mapped out five different user flows that were based on common scenarios I found from my research phase. This process was helpful in determining the necessary screens and UI elements needed for an intuitive app experience. View Details


Design

Goals: To bring my ideas to life through sketches and wireframes

Process: Sketches / Mid-Fidelity Wireframes

Sketches

I started with first coming up with a series of sketches of the key screens established in my user flow. Sketching helps me think of ideas more freely and I am able to quickly iterate multiple versions and select the one that would be best for both MotoTech and their users.


Mid-Fidelity Wireframes

After receiving feedback from my mentor and peers, I then took my sketches and reconstructed them into a series of mid-fidelity wireframes in the program Sketch. The purpose was to illustrate the overall layout of the interface and identify / address the gaps in the design before worrying about aesthetics and details.


Prototype

Goal: To create a functional prototype and gain usability feedback

Process: Mid-Fidelity Prototype / Usability Testing

Mid-Fidelity Prototype

With the mid-fidelity wireframes in hand, I created a mobile prototype in Marvel in order to have a tangible product that I can use for testing. You can interact with my first prototype through the button below


Usability Testing

Task

  • Using the Email sign up, create an account

  • Add your Harley Davidson Road King through it’s VIN number

  • Select your motorcycle and log your oil change

  • Create a new service of inspecting your spark plugs every 10,000 miles.

  • Navigate to the shops portion of the app and choose the most visited shop.

Objective

  • Observe how users complete a set of task

  • Identify areas where the features can be improved

  • Identify what in the design works well for the user

Results

I went to a famous motorcycle restaurant in Malibu called “Neptune’s Net“ and recruited 5 participants (1 female, 4 male) who had a similar background to our persona Dave. From these testing I was able to collect valuable usability feedback from target users.


Iterate

Goal: To iterate upon the design using usability data

Process: Affinity Map / Branding / High-Fidelity Wireframes + Prototype / UI Kit

Affinity Map

In order to synthesize my usability test findings I created this Affinity Map. I was then able to identify critical insights and prioritize revisions in order for my next design iteration. View Details

Affinity Map.jpg

Recommendation

  1. Add an update odometer option on the home screen

  2. Enlarge the navigation bar along with the icons and text

  3. Add a scan feature to allow greater usability of the app

Insights

  1. Users were wanted an easy way to update odometer

  2. Users have trouble reading the navigation bar

  3. Users were worried about entering their VIN number


Branding

Before creating high-fidelity wireframes, I first defined MotoTech’s brand attributes

Modern, Clean, Professional, Open, Balanced, Supportive

After the brand attributes were established I created a mood board which you can view here.

In order to create MotoTech’s logo I started with sketching down many different ideas. Once I felt like I had a good amount of sketches I then turned to illustrator in order to digitize the ones with potential. When I was finished I had a logo that I felt strongly embodied MotoTech’s brand attributes. I then created a style tile to serve as a consistent visual reference for the brand before creating the high-fidelity wireframes.


High-Fidelity Wireframes (Revisions) + Prototype

At this point, using my mid-fidelity wireframes, the insight I gathered through usability testing, and my style tile I created a high-fidelity wireframe. Please feel free to interact with the final results down below.

 
 

UI Kit

Lastly, I maintained a UI Kit during my design process to document UI elements and patterns for future reference.

UI Kit.jpg

Finals Thoughts

Initially in the beginning of this project I thought this would be a relatively “simple and straightforward app.“ But as the project continued I realized I was very much wrong, and even very “simple apps“ have a lot of things that must be addressed in order to produce an app suitable for it’s target audience.

One major lesson I took away from this project was the ability to break down a problem and address each issue one at a time. This simplified the problem into manageable pieces to which I was able to subsequently solve.

Next Steps

Conduct research with other target groups, such as younger riders and female riders.

  • Design wireframes for other features

  • Gather additional usability testing data from target users

  • Continue organizing design deliverables for handoff

 
 

More Case Studies

Buena Lanes

(Responsive Web Design)

Spotify

(Adding Social Features)