Introduction:
Rumpke Mountain Boys | Get your Merch Here! Dedicated Mobile App
Photoshop mockup of Home, Cart, Detail, Splash and profile screens
The Problem:
Ashleigh and Brandon need an easy way to purchase merchandise at concerts and online when the Rumpke Mountain Boys merchandise person is away or if the website may need updating.
The goal:
Create an app that will serve fans like Ashleigh, and Brandon at the merch table and online; while keeping track of available merchandise to make ordering easier for everyone.
My Role:
UX Designer: led the app design from conception to delivery.
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
Understanding the user
I want to understand the processes and emotions people experience when buying Rumpke Mountain Boys merchandise. To identify common user behaviors and experiences to understand their needs and frustrations as they buy Rumpke Mountain Boys merchandise online or in person.
With these goals in mind, I came up with three top research questions. My first research question is: “What do you like about purchasing RMB Merchandise? How does it make you feel?” My second research question is: “How was the buying experience?” The third research question is: “Did you experience any challenges in the buying process? Can you think of a way to resolve these challenges?”
To answer these research questions, I needed to gather attitudinal data to understand the users' needs and frustrations. I chose to do informational interviews with Rumpke Mountain Boys fans.
User research: Pain points
Larger shirts:
“Make shirts for fat guys; as a former fat guy, it's something that’s always lacking." ~Jesse Barnes
Ladies styles:
“Women’s sizes, I can’t understand why those aren’t more available because half of the world is women.” ~Kristen Schenkel
No one at the table:
“When they finally returned to the booth, I shuffled through unorganized shirts to find the size I needed.” ~Ashley Barnes
More variety:
“I would love to see some Rumpke patches; the patch scene is coming back in style.” ~Gary Caskey
Persona: Ashleigh
Problem statement:
Ashleigh is a busy Medical transcriber and a die-hard Rumpke fan; she needs to quickly find her size, get her merchandise, and get back before she loses her spot on the rail.
Ashleigh Rose Persona with image of Ashleigh at a concert
Persona: Brandon
Problem statement:
Brandon is a javascript developer and longtime Rumpke fan; he needs a seamless online experience because, as a web developer, he is easily frustrated when websites fail to perform as they should.
Brandon Marx Persona with image of Brandon at a concert
Ashleigh's User Journey Map to find a new trucker hat at the merchandise booth
User journey map: Brandon
Goal:
Brandon wants to find new Rumpke Mountain Boys hoodies in an XXL for himself and an XS for his wife to wear to Snuggleween.
Brandon User Journey To find Rumpke Mountain Boys hoodies in an XXL
Starting the Design
User Task:
To purchase merchandise in the app
User task map
Paper Wireframes:
When sketching and brainstorming for the paper wireframes, I discovered I needed to add “Your Order is Complete" and "Create a Login" pages.
Home and Log-in screens paper wireframe
Merchandise, Details and Cart screens paper wireframes
Payment, Tracking and Account paper wireframes
Digital Wireframes:
I tried adding a scroll from side to side-feature on the Merchandise page, but I found that the right scrolling on the Merchandise page was confusing for users.
Splash, Create Account, Log-in, Home, Merchandise, Details, Cart, Payment, PayPal, Confirmation, Tracking, Profile and Menu screens digital wireframes
Low-fidelity Prototype:
Link to prototype:
https://www.figma.com/file/vPDcLfmCX0YYqsOHLLfH1L/RMB-Wireframes?node-id=37%3A1229
User flow: Placing an order
Gif of user flow purchasing an item Low-fi prototype
Usability study: findings:
Round 1 findings:
1. Side-to-side scrolling could lead to confusion among users.
2. If we type out the categories rather than having just lines, it would be less confusing for users.
3. Users want to add input data to the prototype.
2. If we type out the categories rather than having just lines, it would be less confusing for users.
3. Users want to add input data to the prototype.
Round 2 findings:
1. Users were confused by adding an item to the cart and a different item showing up in the cart.
2. Users took extra time to get to the Merchandise Screen from the Home Screen.
3. Users were confused by the keyboard that moved on and off the screen too fast.
2. Users took extra time to get to the Merchandise Screen from the Home Screen.
3. Users were confused by the keyboard that moved on and off the screen too fast.
Refining the design
Mockups:
To avoid confusion, I changed the Merchandise Screen name to the Shop Screen and changed the format of all of the screens to iPhone 13 Pro. I increased the background saturation, increased the corner radius on the items, and adjusted the spacing to make the merchandise clear.
Digital mockup of Merchandise screen before usability study
Digital mockup of Merchandise screen after usability study
Mockups:
I adjusted the timing of the keyboard entering and leaving the screen to avoid jerky movements and added "Details" screens for each item. I chose a darker background color, created outlined buttons, and made the "Add to Cart" button a priority.
Digital mockups of Details screen before and after usability study
Mockups:
Mockup of Details screen
Mockup of Home screen
Mockup of Tracking screen
Mockup of Profile screen
High-fidelity prototype:
https://www.figma.com/proto/vPDcLfmCX0YYqsOHLLfH1L/RMB-Wireframes?node-id=261%3A352&scaling=scale-down&page-id=203%3A61&starting-point-node-id=305%3A516
Hi-fidelity prototype of user flow of purchasing an item in the app
Accessibility considerations:
1. Low vision the type is 13 points or larger.
2. Color Blindness, the app uses contrasting colors.
3. Changed the Keyboard timing on the screen to avoid jerky movements and prevent seizures.
4. Included icons with the names typed below them to make them more legible.
3. Changed the Keyboard timing on the screen to avoid jerky movements and prevent seizures.
4. Included icons with the names typed below them to make them more legible.
Takeaways:
Impact:
I discovered from usability testing that users were able to quickly move through the task of purchasing an item with ease.
“Extremely simple, very easy, self-explanatory, it's very nice, it's super simple.” ~Jeffrey Spradlin
What I learned:
I learned how to use Figma, do a usability study, analyze, synthesize the results, and iterate on my designs.
Next Steps:
1. Add a way to integrate merchandise tracking to ease the burden of the person working at the table and improve the ordering process.
2. Send to the Rumpke Mountain Boys for approval.
3. Send to engineering team for implementation.
2. Send to the Rumpke Mountain Boys for approval.
3. Send to engineering team for implementation.
Let's Connect!
Thank You! For viewing my Rumpke Mountain Boys Get your Merch Here! Dedicated Mobile App