PROJECT DETAILS

BRIEF: King Kog Bicycles is a local, woman-owned small business established in Brooklyn, NY in 2005 and in 2014 they opened their west coast retail store in Oakland, CA. Originally founded as an accessories shop for messengers, the two retail locations now cater to a wide range of cycling aficionados. They wanted to include an online appointment booking tool and find out if there was any consumer interest in adding their full listing of services offered along with a shopping cart with a simple checkout process on their website.

CHALLENGE: Design a modern and fun ecommerce website that will showcase all of the services and products the company offers, provide a simple checkout process and allow customers to book appointments online at any time.

CLIENT: King Kog

ROLE: UX Researcher & UX/UI Designer 

CONTRIBUTION: User Research (Survey), Persona Development, Site Map, Wireframes, User Flow, Low Fidelity & Mid-Fidelity Prototypes, Mood Board, Style Tiles and High Fidelity Mockups 

TOOLS USED: Pen, Pencil & Paper, Illustrator, Photoshop, Google Docs, InvisionApp, iPhone 6+, MacBook Pro 

MY PROCESS

USER RESEARCH & STRATEGY

UX RESEARCH PLAN

I began this process by thinking about what questions I would like answered. I wrote out the summary and thought about which research methods would best help me reach my goals. 

COMPETITOR'S ANALYSIS

I began by researching the most popular bike shops in the Oakland, CA and San Francisco, CA areas; Mike's Bikes, Hank and Frank Bicycles, and Public Bikes were three shops that made the cut. I thought about the features that I would like to implement and compared this to what the competitors had to offer.

UX STRATEGY BLUEPRINT

I began this assignment by considering what problems I needed to solve. I thought about ways to go about solving these problems, what my focus should be and how I would gauge success.

PERSONAS

I began this process by thinking about who Cristina, Nasir and Alicia are as people and what they may like to do in their spare time. I conducted research on Pro cyclers and from there I was able to create their bios and then point out their goals and frustrations. In total, I spent close to 2 hours starting from the point of research to the time of completion for each persona.

PRODUCT ROADMAP

I began this deliverable by going over my survey results, analyzing the findings and then, by thinking about what my recommendations should be. From there, I created the roadmap and outlined the features that I felt needed to be redesigned or designed and the reasoning behind it. After consulting with my mentor, we felt based on the research results a LIVE  Chat option could be added to the site to assist customers with any questions they may have.

INTERACTION DESIGN

UI REQUIREMENTS

I began by thinking about the user tasks, the requirements, the pages that I would need to design, how the design could achieve these requirements and the features, actions and content that each page will contain.

SITE MAP

My goal was to make sure that the site map had the appropriate pages and was easy to follow and understand. 

USER FLOW 

I approached this user flow chart by thinking about what path the user would take in order to book an online service appointment. I then sketched out the flow, tweaking it here and there. Before finalizing the flow chart, I closed my eyes and "walked" through the flow "seeing" the path the user would take in order to complete the task.

MOBILE WIREFRAMES

I based my wireframes from the sketches I originally created but made some changes to improve the users' experience interacting with the design. Some of my general feature improvements to enhance a better user experience are: 

1. Creating the online appointment booking feature, where there was not one. 

2. Making the feature as simple and intuitive as possible. Each step is clearly marked and the user knows when they have successfully booked their service appointment because they receive confirmation. 

LOW-FIDELITY PROTOTYPE

I quite enjoy creating prototypes; I find them to be both challenging and fun! Seeing the work finally come together into a functioning prototype is so exciting. 

USER INTERFACE DESIGN

MOOD BOARD

I find creating mood boards cathartic. I love looking at other people's work for inspiration; be it colors, layout or a particular design, it's always fun and educational. Here, I created a "quick and dirty" mood board to use as inspiration for the site. 

STYLE TILES

Here, I let the research findings guide me; with the findings in mind, I thought about what I felt the redesign should feel like and what it should express. Therefore, I selected colors, fonts and imagery that would express the adjectives selected.

LOGO & ICON ASSETS

I love creating icons and I really enjoy putting together UI Kits, it's a great opportunity to really let my imagination and creativity take over.  I find the more I create them the better I become at creating them. 

KEY TEMPLATES

I knew what my research told me, so I knew exactly what needed to go into the website, but my challenge was making it speak to King Kog's clientele. Examining my sketches I knew I wasn't really happy with the design. I was satisfied with the layout of the home page but the other pages didn't really convey the message I wanted it to convey; therefore, I created some templates and then I iterated. I'm currently, in the process of iterating the remaining pages.

FINAL HANDOFF

This assignment should have really been fun, but I allowed my overthinking to turn it into "work". In the end, I think the final design does what it’s supposed to do, but does not give me the fun, funky, fresh look I was hoping for. I am in the process of reiterating this design; I really think that I can come up with something that's clean and easy to navigate.  Even after revamping this I was not happy with the final handoff, like I mentioned previously this is a work in progress so I'll continue to work on it until I have a final product that I like.