Creative Brief
Client: King Kog Bicycle
Role and Responsibilities:
User Research, UX Design, UX Strategy, Interaction Design
Background
King Kog Bicycles, a woman-owned small business, established in Brooklyn in 2005 and opened a second store in Oakland 2014. King Kong is looking for opening their third location in Houston, Texas, and need to redesign their website and services tailoring for the local customers. The empathy research is introduced to understand the local customers to deliver a successful service and at the same time achieve optimal customer experience.
The Challenge
The two King Kog stores are located in the North East region catering a broad range of cycling aficionados including retail sales of vintage, new and custom built bicycles as well as many services and products. With the successful business model in the northeast, King Kog is looking for a new kind of services tailoring for the South region - Houston customers.
Empathize
Research Plan
Goals: To understand the needs of local customers and what they are looking for to have a better cycling experience.
Methods: Desk research, observation, interview
Participants: All kinds of bikers who bike at least once a week and can support their bike financially. Recruited participants by posting notes on Facebook, an online social media channel.
Define
Empathy Map
I used the data collected during the contextual inquiry in the empathize phase to created empathy map of what the user does, say, think, feel, need, and insight.
Persona
I created Jane Davidson based on the empathy map findings. She is a realistic representation of the most relevant user groups of the product.
Strategy Blueprint
I put together the strategy blueprint and use this as a guide for further development of UX and UI.
Product Roadmap
Product roadmap helps the company to understand the short and longer-term product opportunities. The decision is made based on the findings, UX perspective, customer perspective, and as well as the client perspective. As a UXer, I have to be able to justify and be flexible with all the decisions.
Ideate
Site Map + Wireframe + User Flow
I combined site map, wireframe, and user flow together for an informative design showing how the product should be organized and how the users navigate to different pages.
Prototyping
Mood Board
The first step to UI design is to create a mood board and gather assets for the look & feel of the King Kog website. The keywords I am looking for are: approachable, healthy, young, fun, and clean. I analysis each keyword and look for the inspirations that describe the keywords I have.
Keyword: Approachable
Q: What makes it approachable?
A: Big images of product
Keyword: Healthy
Q: What makes it healthy?
A: Mountain images, natural images
Keyword: Young
Q: What makes it Young
A: Photos of young people, energetic color
Keyword: Fun
Q: What makes it fun?
A: None-regular shapes, objects outside of box, illustration
Keyword: Clean
Q: What makes it clean?
A: Grid system, subtle tone
Logo
The original King Kog logo has a strong visual element. I keep the original look & feel and at the same time, upgrade the logo by cleaning up the graphic and adding color/pattern in it.
Development of the new King Kog logo
Style Tile + UI Kit
Before I started the website interface design, I created the King Kog style tile as a visual reference for the look & feel, fonts, color, interactive elements, and photography style. After I finalized the interface design, I created an UI kit as a comprehensive design collection to hand off to the web developer team.
Final Design - Responsive Website
The new King Kog website is responsive which means the layout is flexible depending on different screen size. I build the the landing page design/ content on the two most common screen sizes: 960px (web) and 320px (mobile).
Additional screens - Booking
Conclusion
King Kog is an exciting project to work on. Because of different cities and distinct users, we can't simply take what has been successful in Brooklyn and Oakland, and apply to a different city - Houston. I had opportunities to interview bicycle riders and empathize with them to find out great solutions for the new website. The next steps for this project would be creating more key frames and conducting more user testing as needed.