My role
I was on a team of four. My roles included: conducting research, interviews, paper and digital wire-framing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
I played a key role in choosing the design scheme of this project, including the color scheme and overall tone. In addition, I was the primary interaction designer, connecting most of the pages to each other culminating in prototypes. I owned the 'book appointment' flow, making design choices and integrating it into the other pages.
Case Study:
State & Main
Through my Devmountain UX Bootcamp, my group made a web app for bike servicing. This app prompt was given to us to practice creating a web app. For a downloadable presentation version, please view the PDF.
Project Overview: "As part of a community effort to reduce carbon emissions and encourage alternate means of transportation, the city has announced bike servicing areas that will be made available to the public. At these facilities, bicyclists will be able to find stations and tools to repair and maintain their bikes, and experts who can help them by appointment.
Not every station will have the same resources, so it is important that users can find what services are offered at each station and make an appointment if needed."
Business Goal: Providing maintenance, mechanic maintenance, scheduling service requests, assistance in selecting the right parts for a customers bike.
Project Direction: While the tool will be hosted online, it will need to be optimized for mobile devices as well as desktop computers.
Product Status: This is part of an existing product
Project overview
Novice bikers are hoping to make the switch to a greener lifestyle by biking more, but do not have the knowledge or resources to feel supported in making that lifestyle change.
Our site was going to offer a lot of information to our target audience - the question became 'how do we organize it all so it's not confusing or overwhelming?'
Surveying
We conducted a survey to gauge potential users’ bike habits. We received over eighty responses. We asked questions about whether or not they have and use a bike, and their interest level for using a bike repair service. Because of the environmental impact focus of our project we also gauged our potential users’ feelings and motivations behind their bike habits and if that relates to their environmental goals. We wanted to know what it would take for people to consider using their bikes more regularly.
Survey results
Research findings
Our survey gave us insights into our potential user. We found out:
-
67% of our users lived in a suburban location.
-
Although over 50% of our users owned bikes, only a third of respondents reported having done bike maintenance despite listing bike repair as a major deterrent to riding their bikes more regularly. This gave us an angle to approach our product from. We knew we had to break down the maintenance process to make it more accessible if order to convince our users to use their bikes.
-
1/3rd of users have used bike maintenance services before. This meant that the majority of our users were completely new to the bike servicing experience.
Initial Mapping
An empathy map revealed our users' thoughts and concerns about riding their bikes either recreationally or for commuting. What we identified were concerns about safety, bike parking and storage, and concerns about maintenance and convenience.
The upsides identified include living a greener and healthier lifestyle in addition to avoiding the hassle of city commuting.
In addition to what a user may say, do, think/feel, and hear, we also mapped out the users' pains and gains which narrowed down potential big pain points and potential convincing factors.
We found an opportunity to help users develop bike maintenance and commuting routines by making the process of finding support easier and less risk-prone. Users were trying to develop a greener lifestyle and get some exercise in at the same time. The issues users struggled with include safety concerns, lack of knowledge, and feeling unsupported if issues arose. We used those 'wants' and 'struggles' as opportunities. We explored those further in our user story map.
User story mapping
We created a user story map to identify our users' main goals - we broke the goals down into:
-
Organize Commute
-
Self-maintain bike/bike service parts
-
Getting support
These were the main goals our user has when using our product. We broke those goals down, elaborating on the process the user takes when finding a bike route, finding a service station, booking an appointment at a particular site, and viewing resources.
Starting the design
We each had a different vision for the pages of our bike repair service. We discussed the different features we thought made sense. Below are my initial designs for the book appointment, bike servicing location, and map pages.
Getting inspired
We took our research to the next level and visited local bike servicing stations to get a better idea what tools and features are available. As a biker myself, I also drew on my personal experiences with bike maintenance.
Wireframes and low fidelity prototypes
We took our paper wireframes and turned them into lo-fi digital wireframes to try and explore the three main functions of our product:
-
A map
-
An appointment booking feature
-
A resources page
We created a prototype to help users get a feel for the product's flow. We then conducted usability studies to gather feedback.
Usability testing
We conducted three rounds of usability testing overall to better understand our users' thoughts about our bike servicing station, appointment booking, and map pages. During the first round of testing, we asked users to navigate through our lo-fi prototype. We wanted to know more about the specific bike station and what information users needed to confidently connect with relevant bike servicing resources, both self-service and through a professional bike servicer. We identified the below findings:
Usability testing notes
Transition to hi-fi work
Our usability testing led to a number of changes on our main functions, including our map, appointment booking, and resources pages. Some main areas of improvement were the spacing of each element. We didn't fully take advantage of the large amount of digital real-estate - through testing, we realized our map could be increased in size. Users were asking for a clearer map feature, including larger pinpoints and bike-specific icons. Additionally, users wanted to learn more about their bike and common bike issues, not just what the solutions are. This told us users genuinely wanted to learn.
Improving hi-fi designs
Through usability testing, we discovered the appointment booking page needed improvements - users were confused by the "in-person" and "virtual" appointment options. We adjusted the design by creating a toggle versus two separate buttons. We also added a light gray background and an updated hierarchy to highlight the most important features such as the calendar, site location, and dates available.
Design research
We explored a variety of color schemes and landed on the bottom theme.
-
The orange symbolizes energy and safety.
-
The green accent reinforces the green initiative.
-
We included black and white for high contrast.
What we learned
Tool Time
-
The bike service stands have a lot
of tools - but which ones do I need? After some usability testing, we added some helpful tips to guide users to the information they need, just in time.
Where Am I?
-
It was easy to lose your location on the map. We added more visibility to the users current location relative to the closest bike stand.
Navigation and Flow
-
When researching menus, we learned that left-hand menus are the norm for 80% of websites. Even though we preferred right-hand menus aesthetically, we made the change to a top-left - bottom-right flow based on the research.
