AboutDesign PortfolioExperienceResume

City Cycles

Website redesign

Date

November 2023

Project Type

Website redesign for a bike rental shop

Contribution

UX Research, UX Design, UI Design

Overview

City Cycles is a favorite bike rental shop for locals and tourists in the city of Riverside. The company asked me to join the team to design a more user-friendly online rental process.

The process

Define Goals and Requirement
Begin by understanding City Cycles' objectives, target audience, and specific website requirements. Identify their brand identity, values, and desired functionalities. This information will shape the direction of the website design.
‍
Create Wireframes
Using the gathered information, develop wireframes that outline the website's layout and structure. Focus on organizing content, determining the placement of key elements such as navigation menus, call-to-action buttons, and images. Wireframes act as a blueprint for the website's design.

Visual Design
Once the wireframes are approved, move on to the visual design stage. Create a visually appealing interface that aligns with City Cycles' brand identity. Pay attention to color schemes, typography, and imagery to create a cohesive and engaging design. Aim for a design that reflects the excitement and freedom associated with cycling.

User Testing
For the City Cycles UX project, I conducted both in-person and virtual user testing to gain valuable insights and feedback. In my in-person testing sessions, participants were invited to a dedicated usability lab, allowing me to observe their interactions and gather real-time feedback. I watched as they went through the reservation process unprompted. All users were able to finish their process. Feedback from users had me move some contact icons and change colors in the payment to make it easier to read. All were re-tested and successful.

Maintenance and Updates
Once the website is live, continue to provide ongoing maintenance and support. Keep the website secure and up-to-date by applying necessary updates and patches. Regularly monitor website performance and user feedback to make improvements and enhancements as needed.

‍


‍

‍

Qualitative data
User interviews
Site Map
My goal in creating the sitemap is to create a better user experience making sure the information the users were looking for was easy to find.These changes solved the main pain point users expressed during the user research about being sent to multiple pages just to rent a bike.
User Flow

The users were very clear that it is frustrating and annoying to be taken to so many pages to just end up having to send an email to rent a bike.

Goals of the user flow:

- Create seamless user experience
- Limit the number of pages to rent bikes
- Make a page to rent bikes instead of only email

In order to ensure I address the user's concerns and frustrations, I compared my user flow to the user journey map I created earlier in the research.

Card Sorting
Typography

The primary font I decided to use Montserrat.
This casual yet clean sans serif typeface creates an inviting feel to the user and also increases the label’s/information’s legibility.

Adding detail to the design

Low-Fidelity Wireframe

Finalizing details to the design

High-Fidelity Prototype

They already had a design system that they wanted to keep with the new design. So I made sure all the images, colors, and fonts stayed within their current design system.

I created the prototype linking the pages and elements together in order to go through the user journey and test the user flow.T

The goal of the prototype was to have it function just like the final product will to get better feedback during the user testing.

The Results

Old vs new design

Throughout the usability testing process after the iterations, all the users went through the process with ease and did not get stuck at any point. This showed me that no further testing was needed to meet the client's needs and it addressed all of the user pain points that were discovered during the user research.

Final Thoughts

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.