NextStep

Ongoing Project

Prepping Students for Life After High School

Team
The founder, Product Manager, Full Stack Engineer, and Product Designer

My Role
Lead Product Designer

Tools
Adobe XD, Illustrator, Photoshop, Whimsical, and Webflow,  

Timeline
October 2019, currently ongoing

Deliverable
Marketing website and Product Launch

Challenge

NextStep is a up and coming startup that needs help designing a platform with the goal of helping "Wanderers" gain additional insight into the current / future job market in order to be better prepared for their future careers.

Design Brief

A study performed by Jeffery Selingo classified high school students into two categories, Sprinters and Wanderers. Sprinter meaning to graduate high school with a clear, informed career path. Vs Wanderers, who graduate high school with an unclear career direction.

A young adult's category not only impacted their time to professional well-being but also their education trajectory, and financial future.

Show Design Process
Hide Design Process

Phase 1: Research

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.
  • 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 under served 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 under served market.

User Interviews

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

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.

Insight

Needs

  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
  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

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.

Ideate

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.

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.

Design

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.

Prototype

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

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.

Objective

Task

  • 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
  • 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.

Iterate

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.

Insight

Recommendation

  1. Users have trouble reading the navigation bar
  2. Users had some trouble locating certain icons
  3. Users were worried about entering their VIN number
  1. Enlarge the navigation bar along with the icons and text
  2. Ensure there is enough contrast between both the background and icons
  3. Add a scan feature to allow greater usability of the app.

Branding

In order to establish an overall direction when coming up with MotoTech's branding I first defined MotoTech's brand attributes. I then created a mood board which you can view here.

I then took to my sketchbook and sketched a multitude of ideas that could potentially be MotoTech’s logo. Once I felt like I had a good amount of sketches, I then turned to Adobe 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 Wireframe Revision

Using my style tile and the insights I gathered through usability testing, I was able to iterate upon my existing mid-wireframes. Below, are some of the major changes I made in order to address issues that were brought up during testing

Stay Tuned for a Detail Case Study

Currently my team and I are in the middle of testing and getting ready for our launch date in March. In the meantime please feel free to browse some of the screenshots of our product below as well as the marketing website I designed and built, which can be found at www.mynextstep.me

Final Prototype

Using the platform Invision, I was able to create a final prototype in order to prepare for developer handoff. Feel free to interact with the final results down below.

UI Kit

During the process of developing the high fidelity wireframe and prototype, I maintained a UI Kit during my design process to document UI elements and patterns for future reference. If I was to collaborate with other designers this UI kit would help ensure that all the UI elements stay consistent.

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

Reflection

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.