HOME
WORK
RESUME
CONTACT
Intro
The Santa Barbara Bicycle Coalition (SBBIKE) is a countywide organization. SBBike promotes bicycling for safe transportation and recreation. They work toward building healthy and accessible communities. Helping bikers connect and learn in addition to supporting local bikers are objectives of SBBike.
Bici Centro Satellite is a part of SBBike that helps people in field, By providing mobile or stationary workplaces for bikers to learn, teach, fix bike, buy, sell, etc.
Challenge
Designing a digital responsive experience
Client
SB bike non-profit corporation
Role
UX/UI Designer, Research, Interaction and visual designer.
Outcome
An all-new responsive website design which makes it easier for customers to find information, connect with SBBike community through different ways, find workstations and learn about cycling.
Market & Industry Research
Independent bicycle shops are typically a low-margin business, making significantly better profits from repairs, accessories, and custom work than the selling of bikes.
To get a more specific sense of what the local competition is like, I reviewed websites and Yelp reviews of other bakeries to identify the strengths and weaknesses of competitors in town, as well as considering indirect competitors.
Site Audit
In addition to looking at competitors, I conducted a quick site audit of The SBBike’s current website to help familiarize myself with its content, visual style, hierarchy and usability. The site's design seem to be functional to register for events or volunteership but, with pages buried within navigation options, and lots of visual inconsistencies.
Provisional Personas
Guided by my secondary research, I based each persona around behavioral patterns I assumed the target audience would have. I created provisional personas to begin thinking about who might make up The SBBike’s customer base. These rough sketch personas helped bring focus to my contextual inquiry questions and allowed me to have a starting point for testing my hypotheses and assumptions regarding the goals, needs and frustrations of users.
Contextual Inquiry
Informed by my  secondary research, I developed an interview guide to structure my contextual inquiry. On a busy a afternoon, I visited a Bici Centro Workstation. After getting more familiar with the space I struck up conversation with people and persuaded them to talk to me for few minutes about their experiences with Bici Centro or other local bike shops in town. During the interviews, I recorded the audio of each and took notes as I asked questions and observed.
Uncovering Insights + Identifying Needs
Following the interviews, I created an empathy map to synthesize the information gathered during my contextual inquiry. I looked for patterns, similarities, and contrasts in order to uncover insights from my observations and move towards identifying implicit user needs.
Insights
SBBike’s in-store and social experiences accounts for a large part of the brand and is central to customers. Price, welcoming staff and atmosphere in addition to the community— a special place to find other bikers, learn, see friends, talk to and interact with others— are at the core of why they valued this particular shop and workstation over others.
Persona
Martin’s needs and characteristics emerged from my research research. He cares the most about local and non-profit places that value people and aim to help them. Places that are about community, knowing people and helping each other.
Defining The Design Problem
With my primary persona established, I moved into translating the insights and needs of Martin into defined Point of View statements, then crafting a set of "How Might We" questions to guide my design.
Comparing Business and User Goals
Moving into the next stage of defining the product, I mapped the overlaps of business goals, user goals, and technical considerations. With field research at SBBike I gathered a good amount of information about business priorities and goals for SBBike. With this information and data from my secondary research I articulated the goals in the diagram.
User Flow
With having site map created I started prototyping. I created a user flow based on some use cases and scenarios intended for Martin. In this diagram, Martin moves through two tasks: Making a donation to SBBike and registering for an upcoming community event. Mapping out the user's journey from start to completion helped me think through each step of the process and experience to make sure the Site architecture, user flows and task flows are created in a logical way and eventually user experience is perfect.
UI Elements
With having site map created I started prototyping. I created a user flow based on some use cases and scenarios intended for Martin. In this diagram, Martin moves through two tasks: Making a donation to SBBike and registering for an upcoming community event. Mapping out the user's journey from start to completion helped me think through each step of the process and experience to make sure the Site architecture, user flows and task flows are created in a logical way and eventually user experience is perfect.
Wireframing
I created a set of low-fidelity sketches of key frames corresponding to the user flows I'd mapped out. I referenced the UI requirements and site map to make sure I included priority elements for each page.
Mid-Fidelity Wireframes
Working from my lo-fi wireframes, I began working in Sketch to create a set of mid-fidelity responsive screens. This set of wireframes shows the site pages that a user would encounter as they progress from the home page towards accomplishing their tasks. These frames were developed with the goal of quickly translating them into a prototype to begin testing my design early in the process. I also annotated each of the wireframes to include details about the intended content and interactivity for the site, including the responsive viewports.
Mid-Fidelity Prototyping
With the key frames of the user flow designed, I brought my wireframe screens into InVision and created a mid-fidelity prototype to share with users. I was very interested to see the result of the credit card form I used in my payment process.
Plan
I developed a usability testing plan to outline my test objectives, goals and procedures. Due to time constraints, testing was kept to 5 people. I asked participants to use the prototype in order to complete two tasks according to the scenarios I provided, and I observed and took notes, voice and camera recording as they navigated the site.  
Visual Direction
Working with The SBBike’s existing branding, I looked for ways to expand upon it. I first created a list of attributes to help me articulate the brand, then a mood board inspired by those attributes and finally a style tile for the visual guidance of the website design.
High fidelity Wireframes
With my recommended revisions list from the affinity map in hand, I moved forward with developing a revised set of high-fidelity responsive wireframes. These show how the visual design will be applied to the site and reflect changes made to site navigation, payment process and minor fixes.
High fidelity Prototypes
I brought these wireframes into InVision once again, to create a prototype that offers another opportunity for user testing before going further with the site design and implementation.
Next Steps
With more time, I'd like to work a bit more on the visual design for the site. I'd also love to explore more by conducting more tests and iterate more.  I'd also like to follow up with a second round of research targeted towards the group of users that I might have missed in the first set of research.
And most of all I would like to expand the user flow and and functionality of the website by adding more features.
Conduct
Two tasks for testers to accomplish were: Navigating the site as they consider making a donation to SBBike.
And: Navigating the site to find a community event and book it.

Right away, some issues with the site revealed themselves. Testers all struggled with parts of the site's architecture and navigation. Testers were confused by payment form, made some not excepted assumptions. After finishing the sessions I wrote down all the information I gathered in order to synthesize.
Affinity mapping
Drawing from the usability test results, I noted my observations and data on sticky notes, then organized them according to patterns and trends. I then created an affinity map as a way of interpreting and prioritizing my findings.

Revising the site's navigation and payment process was at the top of the list of recommendations that emerged from my insights.
Giving more emphasis to the brand values and “community”, content of the site came next.
Product Roadmap
With the project goals in focus, I created a product roadmap, with features presented in order of priority in terms of development, investment, and importance to business and user goals. Martin’s needs and priorities were used to focus the exercise.  The roadmap includes metrics for measurement so that the impact and effectiveness of the features can be analyzed.
Sitemap
Informed by the features and priorities outlined in my product roadmap, I created a site map showing the information architecture of the new SBBike website and an over view of the possible flows.
Brainstorming
By having my HMW questions in mind, I generated as many ideas as possible. I grouped them by theme and relationship and then moved into sketching, creating quick, rough sketches to expand on some of the ideas further in order to generate lots of ideas quickly. The reason is to create as many options as possible to then refine, review and sort out.
Research
MARKET TREND ANALYSIS, COMPETITIVE ANALYSIS, SITE AUDIT, PROVISIONAL PERSONAS, CONTEXTUAL INQUIRY.
Define
EMPATHY MAPPING, PRIMARY PERSONA, POV + HMW STATEMENTS, BRAINSTORMING
Strategy
PROJECT GOALS MAPPING, PRODUCT ROADMAP, SITE MAPPING
IXD
PROJECT GOALS MAPPING, PRODUCT ROADMAP
USABILITY
TESTING PLAN AND SCRIPT, USABILITY TESTING, AFFINITY MAP  
UID
MOODBOARD, STYLETILE, HIGH-FIDELITY WIREFRAMES + INVISION PROTOTYPE, UI KIT
IA
SITE MAPPING, SKETCHES
Find Me
HOME
SBBIKE
BHUKU
SPOTIFY
a Los Angeles Based
UX Designer