Online Bike
Rental Website
City Cycles is an online website that allows users to rent out various bikes within New York.
Elevate the brand by improving the browsing capabilities, reservation process, and overall online experience.
Users expressed confusion and frustration on the site's non-functional reservation process, navigation and "chaotic" user interface.
Since this is was a bootcamp project, I was provided with user research gathered from Google analytics and user interviews.
I evaluated the usability and accessibility of the website. The information I gathered from this design audit validated the data gathered from the previous step.
This evaluation provided me with valuable insight on how I can form a hypothesis, mvps, and various design decisions in the iteration process.
"How might we create a cohesive and streamlined reservation user flow that easily guides users in finding necessary information needed to increase likelihood of conversation rates?"
The current user flows were very chaotic. Various elements and call to actions led users to to stray away from their main objective on renting a bike. In addition, the interface lacked visual hierarchy and principles which made it difficult for users to access/process information. This all will lead users to be confused, frustrated, and increase likelihood of drop offs.
In order to progress, I conducted a 5ws and 1h diagram to help me understand the user's needs by identifying their tasks, tools, use of technology, and the environment in which they will be using the product.
It helps me understand the user's needs/behaviors and how to produce appropriate features/functions for the product.
This user persona emulates various archetypes that are more likely to use the product.
The personas would include residents living within the area, visitors, and individuals who want to rent bikes for exercise.
This allows me to foster a more user-centric mentality by empathizing on how users are interact with the website.
It encourages me to focus on how users may think and feel, as well as what goals or obstacles they may face along the way.
I reviewed and categorized all features and functions into their respective webpages. This allows users to gather and understand information in a predictable way.
This straightforward user flow illustrates on how users can accomplish their goals quickly.
This user flow is an example of how new and returning users can either rent a bike from the homepage or quickly navigate through the site, ultimately satisfying their needs.
Iterations of these wireframes were created by performing crazy 8's and using e-commerce sites as guides to make familiar/predictable interfaces.
I created my design system to help me build my look and feel in a more efficient way.
I decided my primary color to be a cyan blue azure (#4886CD) to exude feelings of tranquility, reliability, and stability. While my secondary would be a guyabano-“light shade of gray”( #FCCAF7) that helps gives my primary a sense of neutrality and balance. I then added certain colors to its appropriate functions such as action, borders, icons, and features.
The primary font I decided to use for the app is called Krona One while the secondary font being Montserrat.
This casual yet clean sans serif typeface creates an inviting feel to the user and also increases the label’s/information’s legibility.
I created a new fresh look that includes MVP features and functions that would satisfy the project's goals.
I utilized Figma's powerful prototyping tool to bring this website application to life.
I conducted secondary research search such as Youtube, Google, and Behance to inspire the interactions/animations between the features. My main focus was trying to streamline the reservation process in a more simplified yet intuitive way.
Designing this project in the end-to-end process has provided me with valuable insight on how to improve my skills as UX designer.
Below are the challenges and learnings that I uncovered when working on this project.
- When conducting another set of usability testing, I could improve on reframing scenarios to help users understand the task better and decrease confusion.
- Provide appropriate amount of variants in project to give users more options to pick from.
- Find a grid system to help with alignment issues and increase design efficiency.
- I gained a better understanding on how to utilize Figma's interaction functions while practicing basic skills such as components/variants to design faster.
