mobile app Experience
Bike Nav
Navigate and keep track of other cyclist on the same route of a group bike ride
Challenge
The challenge was to design a mobile application for cyclists who need a way to navigate and keep track of other cyclist on the same route of a group ride because they don’t want to lose track of people, worry about an injury, bike malfunction, if someone is lost, or other problems.
Project Brief Overview
Based on cyclists needing to navigate and keep track of each other on a group ride, I designed a mobile experience to aid cyclists and feel rest assured of each other's exact location.
Project Synopsis
Duration + Tools
2 Weeks
- Sketch app
- Invision
- Post its
- White board
- Hand sketches
Method
- 8 user interviews
- Participation in the AIDS Lifecycle
- Training bike rides (AIDS Lifecycle group, personal bike team, group/friend rides)
- Cycling culture research
- Contextual inquiry
- Insights / synthesis
- Interactive prototype
- Rapid design ideation hand sketches
- Wireframes / mockup
- Final invision prototype
Problem Definition
Cyclists need a way to navigate and keep track of other cyclist on the same route of a group ride because they don’t want to lose track of people, worry about an injury, bike malfunction, if someone is lost, or other problems.
Problem Statement
Problem + Goals + Needs
Brand Problem
The goals of the brand is to translate the voice of the physical store, window displays, store merchandising, to reach and engage the community.
User Problem
The goals of the user for a shopping experience is to visually stimulated by products that express their personality, rather than searching and getting lost in information. They want unique products that are reliable of top quality brands, novelty, sense of community, and things that put a smile on their face.
I designed a solution around the problem of Cliff’s Variety needing an e-commerce online experience since customers are currently only able to make purchases physically in the store. Through my research and design process I discovered that the brand is striving to set a tone through their window displays, store merchandising, and to reach and engage with their community. My solution is to offer a interactive visual shopping experience that speaks to the voice of the brand, inspiration of window displays, and merchandising that translates into a shopping experience that is visually stimulated by products that express their personality. As well as meet the goals of users to find products that are unique, reliable top quality brands, novelty, and have a sense of community.
Solution Overview
Organization
Visual
Lifestyle
Summary of Site Investigation
Through the process of user research, usability testing, and card sorting of over 100 products of organization patterns it was determined that users shop visually and by lifestyle.
Hypothesis #1
I suspect users are feeling very worried, frustrated, or anxious when they are off course and lost. They have a goal to stick together and not be too spread out from one another. It is their motivation to have everyone have a understanding to know if someone is too far ahead or behind. Also To keep up a good pace with each other, make good timing, endurance, keep safe, be aware of others team members imitations, and avoid bike issues. The cyclist’s goal is to have a understanding of where their teammates are so they don't need to worry about them and can continue on with a ride with ease of mind.
Hypothesis #2
We believe that designing a simple intuitive navigation system, for cyclist, we will achieve the ease of mind of people riding in a large group.
We will know this to be true when we see that everyone is aware of each other's location with a large reduction of worrying about each other's riding performance, location, and safety.
Solution Statement
For the target audience of Cliff’s Variety who need to make purchases online, the new product website is a solution that will enable customers to discover full inventory of unique products and make purchases online.
Unlike alternative like Home Depot or Lowes, our solution has a visual and interactive online shopping experience by lifestyle and specific products.
Cycling Culture Research
To better design a mobile experience for cyclist I participated in various methods of cycling activities, research methods, and immersed my self in the cycling culture to innovate a useful solution of cyclist's pain points and needs of keeping track of each other while cycling.
Cliff’s Variety is located in the heart of the Castro in San Francisco. Walking through the neighborhood I discovered how surrounding stores had window display presence of selling product merchandise. Also I noticed how people laugh, admire, and enjoy the novelty of these window displays.
Site Analysis
Visiting the site has given me insight on the brand’s identity as well as what the business is striving for. Cliff’s Variety takes unique and high quality products and merchandise those products in groupings, patterns, color, and in visual ways that tell a story. Also windows that tell stories to the community and political messaging of what is current.
Site Investigation Summary
Cliff’s Variety currently does not offer online sales.
Competitive Analysis
- Not much of unique product selection
- Recommended searches, featured items, and coupons on main page
- Search top results with images
- Sort by (top selling, new arrival, top rated, and price)
- Organized product overview
- Simple website written copy material
- Instant suggestions in search bar
- Shop by department, room, or product
- Full product overview on one page
- Great check out process
- Clean and organized
- Easy to search for product
- Search top results with images
- Image based shop by department / room
- Enlarge product with hover
Process
I began the design process by starting with a site visit to Cliff’s Variety. I analyzed the store from the surrounding neighborhood, outside the store, and inside. I spent hours in observation, contextual inquiry, and analyzed the store by their organization, and analyzing all their products they carry. I went around the entire store taking 1000 photos of images of their products in each category of their inventory. I then synthesized over 100 product images, printed them out, and cut them up into cards for testing for users to clearly understand organizational patterns. I then did competitive analysis of competitors such as Home Depot, Lowes, ACE as well as research on how current websites use interaction in shopping. I sketched out a interactive paper prototype to test out a design.
I then interviewed 5 users to test hand drawn sketches of wireframe prototypes of a website for Cliff’s Variety. The users were individually asked to search the website for a clock, select that clock, and add it to a cart for a check check out and purchase. From those insights I finalized a high fidelity prototype.
Design Process Overview
User Research
It is my goal to research in order to solve this common issue around cycling. I would like to understand the pain points that cyclist face while they ride in large groups, how they navigate when they loose a team member or friend, what means of technology or self logic they use in such events, learn what products they may use on the current market, and what I can design that can be useful and unique to them.
“It can be challenging to keep everyone together, but it is so much more fun and I am better able to push myself on group rides.”
User Research Synthesis
User Goals + Motivations
- Gauge location of riding partners in relation to each other
- To have a ease of mind on a ride by not having to worry about getting lost, straying too far ahead or behind, and emergencies
- Remain on the correct navigation track during a ride
Insights
- It can be challenging to keep everyone together in big groups. The larger the group the harder it is to coordinate and keep track of each other
- In groups riding paces do not always match
- When riders are lost anxiety arises of mechanical issues, emergencies, lost navigation, and other scenarios
I interviewed 5 users to test hand drawn sketches of wireframe prototypes of a website for Cliff’s Variety. The users were individually asked to search the website for a clock, select that clock, and add it to a cart for a check check out and purchase.
It was my goal to discover if the user flow was a success, to have a simple navigation to find a product all the way to check out. I took their feedback into account how the make the search easy for them to navigate a product and discover their pain points.
Paper Prototype Usability Testing
Method
5 users were provided hand sketches / clickable prototype of website screens. The task was to search for a clock, get product information, and add it to cart for checkout and purchase
The goal was to understand the tasks flow, simple navigation, and pain points.
Goal
- Test the feature of navigation and finding categories easily
- Test the feature of the homepage hero shot if the user will hover and discover the clickable images of the products in the hero lifestyle image
- Then click the clock / product and get the product information and click check out
- Test the scrolling on the homepage to see if user understands the lifestyle image hero shot and the products broken down under them
- Test the product page to see if the user understands the lifestyle image and product breakdown
Insights
- Overwhelmed navigation categories
- Love to shop by lifestyle
- Desired visual lifestyle image to be interactive to understand the products in the image
- No more than 3 product suggestions
Young to mid-age professionals who enjoy online shopping. Users who love new brand products and searching for unique/eclectic products.
Target Audience
I developed the persona of Robert through insights gained from user research. The target audience are young to mid-age professionals who enjoy online shopping, who love new brand products, and searching for unique/eclectic products. I based Robert through the design process of shopping for a retro clock through a storyboard that was carried out into my prototypes for user testing and final wireframe design flow.
Persona
"When something strikes me visually in an impactful way, It's not whether I can afford it, It's whether I can afford not to have it."
Age: 32
Occupation: Creative Director + Technology Developer
Status: Single
Income: $100,000
Location: Castro, San Francisco
Robert
About
Robert loves to decorate his apartment with unique items that are reliable top quality brands. Since he works really hard at his creative job, he enjoys to surround him self with things that can put a smile on his face. In his downtime he enjoys to do home improvements, cook, and art projects by getting dirty by working with his hands. Living in San Francisco has touched his heart to learn about history and to give back to the neighborhood community by making an impact.
Needs From Online Stores
Pain Points
- Too many clicks
- Information overload
- Unable to find items
- Unique brands that express their personality
- Strong store branding
- Visual shopping by lifestyle
Story Board
Robert is overwhelmed by stores and online stores and online shopping websites. Where should he even begin?
Robert loves this retro clock, He saw it at a friends house but isn't sure where to get it. It would look perfect in his apartment and he must have it.
Wow! He found it on Cliff's Variety website. That was so easy, it was a great experience to find it visually and with interaction. Cliff's Variety has so many great choices that fit Robert's style and personality.
Robert loves his new retro clock. It suits his room so well.
High Fidelity Prototype
User Flow
Design Focus MVP
- Navigation by lifestyle
- Hover over hero images to view product details and shop for it
- Easy check out process
Next Steps Of Future Features Based On User Research.
Moving forward I would like to explore high end photography for staging of product merchandising that fits Cliff’s Variety brand personality. This is an opportunity of community engagement, messaging, and to shop by lifestyle in a visually compelling way. I am drawing inspiration from various window merchandising, product organization, and visual eclectic themes that is very inline with the business and brands voice gathered from their seasonal window displays.
Results + Reflections
- Refine design from user testing and research
- Creative direction of high quality photography of lifestyle images
- Creative ways to show products and selection of different patterns / colors
- About Page of history
