REDEMPTIVECYCLES is a non-profit bike shop located in downtown Birmingham, Alabama. They believe that getting more people on bikes makes Birmingham a more well-connected, vibrant and livable city. They have approached us to update their website and make it responsive. This will allow them to reach more people and provide more opportunities for those interested in biking and becoming more involved in the bike community within Birmingham.
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.
I conducted several user interviews in order to collect information about their overall experience with Redemptive Cycles - both in their shop and online. Of the interviewees, 4 were male and 2 were female. All the interviewees fall between the ages of 30 - 49. Through these interviews I was able to learn more about who Redemptive Cycles' customers are and how the business interacts with them.
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. 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.
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.
