Zipcar Redesign
Winter 2022, UI/UX Design, User research
My role
I had the role of product designer and UX researcher throughout the implementation of the project. I was in charge of redesign of the "Drive" feature of the Zipcar app. I practiced principles of cognitive ergonomics and conducted tasks such as hierarchical task analysis, heuristic evaluation, user testing, in-depth user observation, and useability testing. I grew as a Figma designer, and gained a better understanding of the mobility industry.
Overview
My team and I redesigned the Zipcar app following the principles of cognitive ergonomics. We conducted multiple rounds of user testing to understand user behavior and improve their experience in completing two tasks -- search for a car, and drive the car using the app. Through hierarchical task analysis, heuristic evaluation, building flowcharts, rapid prototyping, and useability testing, our team was able to improve the user experience of the app.
Video demonstration of improved "Drive" feature
Problem Finding: Hierarchical Task Analysis
We conducted hierarchical task analysis evaluating how user interacts with the two chosen tasks of "Search" and "Drive". We then annotated the HTA graphs based on user testing on two users. I worked on such analysis of the "Drive" feature.
HTA of current "Drive" feature
.png)
"Drive" feature: annotation of user 1
.png)
"Drive" feature: annotation of user 2
Ideation
Our team came up with strategies of improvement that improve the chosen tasks of "Search" and "Drive". These strategies were used as starting points of brainstorming and informed us of how we want to proceed with the redesign.
The 9 strategies I came up with
We then came up with a parking lot list containing small features that need improvements.
Snap shot of "Parking lot list"
Flowcharts
For each of the two chosen tasks "Search" and "Drive", we came up with two ideas/concepts of improvements. We created flowcharts to understand the user flows of the two possible versions.
.png)
.png)
Search: Concept B
Search: Concept A
.png)
Drive: Concept A
.png)
Drive: Concept B
Paper Prototypes
We created paper prototypes for quick iteration and for A/B testing to test how users interact with the two concepts. I was in charge of creating the paper prototypes of Concept B for both tasks.
Search: Concept A
_edited.jpg)
Search: Concept B
Drive: Concept A
_edited.jpg)
Drive: Concept B
A/B Testing & Heuristic Evaluations
We observed users interacting with our A/B prototypes and recorded videos for later analysis. We then conducted a heuristic evaluation to quantify problems we encountered during user testing.
User interacting with paper prototype
We decided to proceed with Concept B since users responded better to it during A/B testing. It is both user-friendly, and included more needed information for the function of the app. Based on testing and heuristic evaluation, we came up a list of design changes.
-
High priority: Make an interactive map/list search
-
We found out through user testing that both map and list are essential in users’ search for zipcars
-
User thought it was too much trouble to find where the car is when there was only a list
-
To save screen space, we could adapt a drag-up design for the list
-
-
Low priority: give users a glimpse of car options on the front page
-
First-time users found it useful to have a preview of available cars to know what cars they might be getting
-
-
Mid priority: move “Booked Time” and “Return Location” to the top of the Drive screen
-
This information is mostly useful in returning the car. Users thought it could be nice to have different locations on the screen that correspond to the two different functions – drive (like lock and unlock) and return (like return location and extend)
-
-
Med priority: Attach car info to the location icon
-
Users don’t use the information like car model and car name often during their drive, so these information could be moved to a “more info” page instead of taking space on the main screen
-
Wireframes
We created wireframes based on Concept B and the proposed design changes.
Useability Testing
We asked users to complete specific tasks, and asked for their opinions. We also asked higher level questions post-test to gain a better understanding of the user experience.
Example task:
Example post-test questions:
Quantitative Metrics:
-
Counting how many times users made an error and wanted to go back. User 1 and User 2 each had 1, and User 2 had 2. User 2's error was clicking search before looking at the recommended options (she expressed that she clicked impulsively and wanted to go back), something that we will change in the redesign. User 1 and User 3 also expressed that they wanted to go back after clicking search, not because they clicked impassively, but because it felt weird to not have that option.
-
The number of tasks completed without the user having to receive outside assistance. This would help us determine if our app was intuitive enough to navigate. All three users were able to complete the task without help, though sometimes users asked clarifying questions to the prompt. Since users would most likely remember what their itinerary is/what their needs were when using the app for themselves, we did not consider these questions as “requiring assistance”
Qualitative Measures:
-
The welcome screen was by far the most confusing for users due to the recommended feature. First, some users were confused by the placement (it is important to note that some changes were made in between the user testing sessions due to scheduling issues so some users had the recommended cars section above the search while for others it was below). Regardless, users either found it distracting if it was at the top and not visible enough if it was below.
-
The next screen was the list view, which people generally liked. User 2 told us her main suggestion was that the filter and sort buttons were too small and they were not noticeable enough.
-
Finally, most users liked the second task screen, especially the lock/unlock buttons. User 3 suggested adding something to signal that the car was locked/unlocked successfully.
Design Changes:
We proposed a list of design changes based on useability testing results.
Moodboard
I created the moodboard of our Zipcar redesign based on ideas and visions of youth, nature, convenience, friendship, and motion.
Final Prototype
