•Heuristic Evaluation
•C&C Analysis
•User Interview
•Usability Testing
•Affinity Map

understanding the vision

We sat down with Cleared Renter’s stakeholder to understand the business goals. Our team learned that her largest priority was focusing on the renter’s flow through the website, including registering an account and applying for their RenterScore®, all while keeping the compassionate element of the company in the design.

sizing up the competition

To begin our research, we conducted a Heuristic Evaluation on the current website to pinpoint usability issues and note the severity.

We also performed a Competitive and Comparative Analysis observing 7 competitor websites on common themes and features found in other tenant screening websites.

Main insights we pulled from our research thus far was that:

•The copy on the current website heavily focused on the humanitarian efforts of the owner instead of explaining the company

•The “About” page was dedicated entirely to a mascot that didn’t appear anywhere else on the website

•After the account point in the flow, functionality of the website stops

Reaching out to our users

We wanted to hear other renters’ experiences with the rental application process, and what services are useful for them. Nine user interviews were conducted, along with usability tests where we asked them to go through the old website and vocalize their journey through the site.

Our main take away was that users did not respond well to the mascot or the humanitarian efforts because they didn’t see a correlation to the business itself. Our users overall were confused about what services the business offered; they voiced that the website did not elicit trust due to its lack of visual professionality and they would not feel safe uploading sensitive information to.

•Persona
•Journey Map
•Feature Prioritization

Scenario
Morgan just got a new position in Culver City. While she's packing her bags, making sure everything is good to go, Morgan is also multi-tasking and researching the renting market in Los Angeles.

Problem Statement
Morgan is moving and she already applied to 3 apartments but hasn't heard back from any of the landlords. Morgan has spent $200 on rental applications and is tired of seeing her money go down the drain.

How might we provide Morgan an intuitive and stress-free way to fill out one application to use for multiple rental listings?

prioritizing our findings

All of our research and synthesis led us to determine our key features for the redesign. In order to do this my team and I created a feature prioritization chart. We placed our features on a matrix, and rated them from essentials to non-essentials in order to prioritize build out the features and information that users require most. The essential features we focused on are:
•About
•Help
•FAQ
•RenterScore® forms

•Sketching
•Design Studio
•Wireframes
•Usability Testing
•Low to Medium Fidelity Prototype

Adjusting the flow

We then digitized our new user flow based on our feedback from the usability tests. The original user flow illustrates that the site stops functioning once you enter the account. A priority for our team was building out the functionality of the website, not only with working account features, but also implementing the the RenterScore® application form process within the account feature.

Sketching & low fidelity Wireframing

My team and I started on our design journey with a Design Studio, where we invited our stakeholder to join us for time-boxed sketching of each page of the new site based on our findings. We deliberated on the appropriate layouts, keeping in mind that clarity of the business and the process was a high priority.

We moved from whiteboarding to low fidelity sketches, to medium fidelity wireframes.

MEDium FIdelity prototype

At this point, we conducted 4 usability tests on our grayscale clickable prototype in order to receive feedback on the flow and basic layout without users getting influenced or distracted by color and images.

A crucial part of the flow was how users navigated through numerous pages of forms. We decided to place them on a single page as collapsable sections.

This was easier for users to go back and change/adjust information if necessary. My team and I found it necessary to have a review/confirmation page displaying all information before submitting, so the user can be sure all information is correct.
We documented and made appropriate changes based on our usability test feedback while moving our designs into higher-fidelity wireframes.

During our design studio we settled on having a long scrolling homepage that was also navigable by the top nav, so information was reachable from numerous paths.

High Fidelity Wireframes

Our usability test results continued to confirm that we were on the right track with our overall design. We made changes to our CTA’s, and some of the verbiage used in order to ensure clarity for the users. We also added a map feature for our last form, all based on our usability test feedback.

This resulted in the design of our high-fidelity prototype that eliminated confusion and points of friction and allowed users to complete the application process.

Based on our C&C Analysis

• Ability to search for rental units directly on the site

• Adding a Chat feature

• Additional benefits to the Free Account subscription

Based off of user feedback

• Update “About” copy [so it is more relevant to the business and services rendered]

• Build out and implement landlord and property review feature

• Reevaluate how to integrate the mascot into the website

•Heuristic Evaluation
•C&C Analysis
•User Interview
•Usability Testing
•Task Analysis

Establishing a Hypothesis

Given our past experiences with the DMV, experience on their website, and observing the current app’s limited functionality, we assumed that scheduling an appointment would be our main focus. We began our research of the entire app, attempting to validate or invalidate this assumption.

Gaining insights

We began our research by conducting a Heuristic Evaluation of the current DMV app in order to pinpoint issues. The app has limited features and functions, but there were two glaring issues that violated a number of heuristics:

• When attempting to make an appointment, choosing an office location before the desired service(s) would often lead to the app displaying locations that wouldn’t perform the service necessary, causing wasted time and frustration.

• The app will display unavailable dates and times as available, which the user won’t realize until they have clicked through multiple pages to check availability. This causes the user to click the back button multiple times and re-do this flow every time to check for availability.

My team and I performed a Competitive and Comparative Analysis of other states’ apps to see how California’s app performs in comparison to other states’ and what features are common and useful. Here we observed that adding the ability to create an account and add a GPS location finder would be useful additions to fixing the appointment flow.

Interviewing users

Finally, we conducted user research to understand our audience and advise our design. We spoke to California drivers who had been to the DMV recently or frequently and learned most people use the DMV website for scheduling appointments.
In conjunction with our user interviews, we performed a task analysis with our users in an attempt to validate our assessment of the aforementioned issues with the appointment scheduling flow. Our task was as follows:

You live near Hollywood and need to schedule an appointment with the DMV for a (1) driver’s license renewal and (2) vehicle registration.

Illustrating current flow

We designed a user flow of the current app so the points of frustration are visually apparent. We noted where users experience friction with the current system (the location-service loop users would get stuck in, shown in red), leading to wasted time and some users even abandoning the app altogether.

•Affinity Map
•Persona
•Journey Map
•Feature Prioritization

We then documented our persona’s emotional journey through the appointment flow with a  journey map. This is based on our user’s journey’s during the task analysis, and averaging the points of frustration they experienced.

Scenario
Carson will be buying a used car from a friend and will need to transfer the title and register it with the DMV. Because of the new law requiring California residents to get a REAL ID by October 2020, he decides he’s going to handle the title transfer, registration, and ID at the same time. However, Carson is a busy accountant and won’t visit a DMV office without an appointment.

Problem Statement
Carson is trying to schedule an appointment but feels confused about selecting the right office location and finding an available date and time, causing him to grow frustrated and impatient.

How might we provide Carson with an intuitive and efficient way to schedule an appointment?

prioritizing our findings

With a better understanding of our users, my team and I prioritized the features of the new app. Because of the limited duration of our project, we had to hone in on specific features for a Minimum Viable Product (MVP). The blue dots on the graph below indicate those specified features:

•New User Flow
•Sketching
•Design Studio
•Wireframes
•Usability Testing
•Low to Medium Fidelity Prototype

redesigning the flow

After deliberation, we decided that the most crucial point of frustration to tackle first was reworking the location-service loop that users got trapped in during their appointment scheduling flow. To resolve this, we designed for the user to select their service first, which would update the possible locations displayed, therefore only showing accurate results.

Sketching & wireframes

We began ideating our designs with a collaborative design studio (click images to enlarge).

We moved onto medium and high-fidelity wireframes rather quickly, focusing our design on our determined feature prioritization. Main redesign points we focused on were:

• Calendar to only show available dates and times.

• Visual map and a list view of locations (to assist users and ensure that they can find the closest office to them based on their service needed)

Testing our prototype

We conducted seven usability tests to observe how users reacted to our current prototype. During this process we made huge discoveries that led us to have to redesign a large feature of the app.

Important discoveries

•Heuristic Evaluation
•C&C Analysis
•User Interview
•Task Analysis
•Affinity Map

Analyzing & Comparing

I began the research with a heuristic evaluation on the current website noting 21 violations and their severity. The critical ones being in areas of error management, learnability, and efficiency.

I then performed a competitive & comparative analysis, comparing features of competitor websites with Going Underground Records in order to display specifically where it was lacking. Here is a breakdown of the competitors:

The biggest points of concern that I learned from the C&C was that Going Underground Records would not allow the user to filter by multiple categories at the same time, nor did it display carousels of popular categories.

User perspective and pain points

In order to gain perspective on who the targeted user was, I conducted 3 user interviews with avid record collectors, who buy both online and in-store. All concluded that the biggest points of interest when buying records are:

• New vs. used

• Condition of the record itself

• Condition of the art

• Year of release

• Label that released it

• Track listing

• “Recommended listening based on your search”

After user interviews I conducted a task analysis on 3 users, asking them to “Go through the website and shop in both list and grid mode, for 3 different albums, purchasing multiples of each one.” The following are direct user quotes:

• Users were confused whether they were buying new or used records [the front page of the website defines that the store sells used records, but nowhere mentions if each item is new or used)

• Users want multiple photos of the front and back of the album art and photos of the record itself

• Users prefer for the website to list album information: track listing, label, and year of release, otherwise, they will look it up elsewhere and may purchase from a different website

• The navigation in “list” mode was completely jumbled and unusable, mixing artists, labels, years, and merchandise in one long list

•Persona
•Journey Map
•Feature Prioritization
•New Competitive & Comparative Analysis
•Card Sorts
•Site Map
•User Flow

Discovering Insights

In addition to the emotional journey map through the site, I created a user flow of the checkout process steps. By doing this I was able to uncover that the major frustrations felt by users was not due to the flow of the checkout process. The frustrating features for users was the navigation and browsing.

•Sketching
•Paper Prototype
•Medium-Fidelity Wireframes
•Mood board

Information Architecture

Now that I had broken down how to reorganized the information architecture based off of user research, I designed a site map based on my findings (as well as the old site map for comparison). The goal was to remove pages that didn’t hold information (location, newsletter, and contact) and incorporate that information either on the homepage or the footer.

Sketches

Now that I designed the updated site map, I began the redesign process by sketching out a paper prototype to visualize how the new site map would affect the user flow. I tested this paper prototype to ensure that a user could intuitively find all of the information needed, as well as easily filter and find their desired record.

MEDium FIdelity prototype

I moved from sketches to a medium-fidelity prototype, the biggest change being moving merchandise out of the faceted navigation with the vinyl, and instead in its own section which can be located through a drop-down menu on the homepage.

Testing the prototype

As I continued designing a high fidelity prototype, I also organized usability testing. I asked 3 users to go through the website and buy a punk + LP record that was $10 or under. Based on user feedback I made small design adjustments to the interface.

This resulted in the design of a medium to high-fidelity prototype that eliminated confusion and points of friction and allowed users to complete the application process.