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
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
To develop the brand for MotoTech
To design the mobile app
My Design Process
Goals: Gain insight on the business, customers, and current market
Process: Market Research / Competitive Analysis / User Interviews
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.
$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”
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.
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.
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.
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.
Goals: Synthesize research and identify user needs, goals, frustrations, and motivation
Process: Empathy Map / Persona / POV Statements & HMW Questions
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
Users need to build relationships with mechanic shops
Users need to be able to ride their bikes whenever they want to ride
Users need a more universal way of keeping track of maintenance on their vehicles
Users only bring their motorcycles to mechanics they trust
Users are passionate about riding motorcycles
Users currently use many different methods of tracking their maintenance
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.
Goals: To ideate features, information architecture, and flows
Process: Brainstorming / Product Roadmap / Sitemap / Task Flow / User Flow
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.
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.
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
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
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
Goals: To bring my ideas to life through sketches and wireframes
Process: Sketches / Mid-Fidelity Wireframes
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.
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.
Goal: To create a functional prototype and gain usability feedback
Process: Mid-Fidelity Prototype / Usability Testing
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
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.
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
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.
Goal: To iterate upon the design using usability data
Process: Affinity Map / Branding / High-Fidelity Wireframes + Prototype / UI Kit
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
Add an update odometer option on the home screen
Enlarge the navigation bar along with the icons and text
Add a scan feature to allow greater usability of the app
Users were wanted an easy way to update odometer
Users have trouble reading the navigation bar
Users were worried about entering their VIN number
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.
Lastly, I maintained a UI Kit during my design process to document UI elements and patterns for future reference.
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.
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