Home Detail Services

An informative website to easily access ladder related home detailing service, and request a free contactless quote on the same day

Duration

March 28 - June 13, 2022

(3 months)

Roles

User Research

Wireframe

Low & High Fidelity

Tools

Adobe XD

Google Form

Project Background

Student Services at Roseville provides home maintenance services, mainly ladder jobs for those who cannot physically or timely perform those tasks. The main goal for this project was to redesign the website in order to welcome visitors and leave the impression that Home Detail Services is a reliable company to ask to do house maintenance tasks.

Image from Home Detail Service (previously 'Student Services at Roseville') Google Review

You deserve to spend more time enjoying your home than working on it

— Home Detail Services

The Problem

Main issues of the existing website were:

1. Unclear Call To Action

2. Insignificant Hero Section

hero image is not informative

3. Long landing page

Header

Hero Image

5 Star Reviews

Main CTA

Understanding the Users – Persona

To better understand the users' I organized their goals and their pain points.

Goals:

Complete her ladder related dangerous chores
Keep her house well-maintained

Pain Points:

Incapability to physically climb up the ladder
Lack of tools and information to complete tasks

The Solution

Utilizing basic theory of design and considering users' cognitive load, these were the solutions I presented:

Emphasize the main Call To Action

It is more likely to grasp users' attention with different colors, size, and location

Shorten page content

Decreasing users' cognitive load allows them to focus more on what they want to achieve through the website

Clarify information hierarchy

Users visit websites with purpose, and it is important to keep them engaged with the website within the first few seconds

Ideate, Sketch, Iterate

Affinity Mapping

We sorted our survey results by hunters and moderators' experience, what they liked about using Discord, and what they wanted more from Davis Triceratops.

Moderators wanted to . . .

drop a pin of the dino's location, and show radius around the pin on an active map

Hunters wanted to . . .

view multiple dino's locations all in one screen, and edit their drop/hint notification settings

Comparative Analysis

In order to figure out how we can resolve users' current issues, we studied existing scavenger hunt applications and analyzed their features.

Geocache (tablet view)

Goosechase (mobile view)

Live map view & list view of all active games
Differentiated sections of "active" and "completed" games

Information Architecture

Overall flow for both moderators and hunters are similar: the main difference between the two flows is the "Add New Drop" page, which is the page that moderators use to upload new drops.

Moderator Flow

Hunter Flow

The main features that the users will interact are adding a new drop, editing an existing drop, and editing their notification settings. These features are all accessible on the landing page, which is the Drops Page.

Wireframe

We began our iteration process from wireframes to visualize what idea we had in our mind.

We initially designed three possible flows, which were 'first time user', 'hunter', and 'moderator'.

After discussing with the developers, we decided to utilize google authorized log in system for the first time users. So, we extracted onboarding screens from the 'first time' flow and added them to both 'hunter' and 'moderator' flows.

Low Fidelity Prototype

Based on our finalized wireframes, we created more informative screens for the developers.

We made sure that we focused on users' accessibility by keeping the flow simple, and wording out any confusing features.

Moderator's Flow

Hunter's Flow

Branding & Colors

Main goal of our application is to keep users engaged with the scavenger hunt activity, and allow them to feel free from their stress. So, we experimented with different color palettes that would bring out users' excitement.

Soil/nature inspired:

too boring & feels like coffee app

Tree/nature inspired:

too dull & feels serious

UC Davis inspired:

bright, but feels too scholar

Dinosaur character inspired: playful & bright

This is is our final branding, as well as our main assets:

Usability Testing

After our mid fidelities, we conducted usability test with 6 hunters and 3 moderators.

We found that:

Moderator

Liked the interface and said it was fun
Wanted to add multiple drops in one location
Some features are unclear (confusing icons)

Hunter

Liked seeing the map in the app
Liked how it was easy to navigate
'Report' feature and 'Timer' feature were confusing

Fix this, and fix that

Main changes we made were on the moderators screen, as it required more attention to details and maintenance after the handoff.

Before

After

needed to add

more than 1 hint

wanted to separate all Dino information

allows users to modify individual Dinos, within the same location

Final Screens

These are the final screens, after conducting 2 rounds of usability tests with our potential users, and iterating numerous times for better digital experience.