I first looked into Redemptive Cycles and its business direction. I found that, yes they are a bike shop, but ultimately they are an outreach to the city. They provide multiple opportunities for the community to get involved not only with the bike shop, but around the city. With market research, I was able to get a better understanding of the cycling industry. This includes demographics, trends and challenges.

With the cycling industry being such a large market, it is critical to understand both direct and indirect competitors. This will help Redemptive Cycles set themselves apart from their competition. Strangely enough, there were not any direct competitors for Redemptive Cycles within the local market. This allows them to set themselves apart and provide a service that no one else can.

After talking with Redemptive Cycles' customers, I constructed an empathy map by organizing the data points from each interview participant into groups. This allowed me to clearly see user needs and common patterns within that data.

Once I organized the data using an empathy map, I was able to create a persona based on these findings. This persona reflects the target user for Redemptive Cycles. With "Jason", we can better empathize with the target user throughout the design process.

After defining the target user, I created point-of-view (POV) statements to frame the insights and user needs. From these statements, I took it a step further and created how-might-we (HMW) questions to help encourage solutions for Jason's needs.

To start, I organized both business and user goals into one document by taking goals from the Persona and business goals from the brief. I then identified shared goals and added some technical considerations as well.

Next, I referenced the how-might-we questions, brainstormed as many solutions as I could and chose several features to prioritize within the website. From here, I began organizing these features into the product roadmap. This allowed me to focus on the features that would be the most beneficial to both the user and business goals previously defined. Each of these goals were also given a priority level.

Next, I created a sitemap in order to visualize how the information can be structured, allowing a user to navigate the site with ease.

To better understand how users will navigate through the site performing specific tasks, I produced a task flow diagram. This allowed me to think through the user's process and make sure all possible pages are developed to help the user gain the information they need.

I also created some user flow diagrams. These helped me think through different scenarios while a user explores the site and gets the information they are searching for.

To begin generating ideas for layout of the website, I sketched out several low-fidelity wireframes of pages we identified based on the sitemap. I added annotation so that sections were clearly defined allowing me to gather quick feedback from testers and peers.

I took my low-fidelity sketches and reproduced the chosen layout in Sketch to create a mid-fidelity wireframe. I also created both tablet and mobile views for several of the pages to understand the responsive layout. Going through this process helps me think about overall hierarchy and visual layout of the website.

To make sure the design I put together functioned the way it should, allowing users to gain the information they were looking for, I created a mid-fidelity prototype using InVision. I used this prototype to conduct usability testing as you will see in the following step.

I conducted 5 in-person interviews and had each participant perform certain tasks. I was able to collect valuable usability feedback from each participant.

Test Objectives
• Test if users can accomplish tasks successfully
• Identify areas of difficulty with the website design that can be improved
• Determine the overall usability of the website
‍
Tasks
• Find information about group rides
• Choose a group ride to attend
• Find out information on volunteering
• Get in touch with Redemptive about volunteering

After conducting the usability testing, I was able to identify key insights and generate the top recommendations from test users through an affinity map. Taking these recommendations, I now had areas of the site I could improve upon, making for a better user experience.

Before moving into the high-fidelity wireframes, I created branding guidelines to bring more cohesion to the Redemptive Cycles' brand. To help with this process, I created a mood board using Pinterest and chose some adjectives to help define the Redemptive brand. A few of those being reliable, creative and friendly. I chose to keep Redemptive Cycles' original logo and introduce new colors and typography.

Finally, I applied the branding and styling to the wireframes in Sketch and made an updated prototype using InVision. The new prototype shows the updated look and feel.

Once I began prototyping, I maintained a UI kit throughout the process. This document keeps all of the UI elements and patterns in one place for easy reference.