Role
UX and design consultation for a smart moving company to redesign their marketing site and improve the user experience and conversion rate of their move booking flow.
Challenge
The original marketing page was quickly put up during Quips' launch. It saw some engagement but once users tried to book a move, it lead to confusion and drop-off due to unclear, inconsistent, and missing elements throughout the flow.
Process
Divide the workload into two phases: In Phase 1, work closely with stakeholders, CX experts, and users to form a hypothesis and craft a persona. Then identify themes from their current issues and come up with solutions. In Phase 2, bring these solutions to life with sketches and prototyping, and form a design system for faster iteration and cleaner development handoff.
Goals
User: Create a great first impression and ease them through a seamless, intuitive booking flow that give them full control and flexibility.
Business: Increase engagement/start rates, create the scheduling touchpoint, and improve booking conversion rates.
KPI's
- Abandon rates: decreased
- Conversion rates: increased
- Start rates: increased
- Schedule select: increased
- Profile form entry: increased
Timeline
4 Months, November 2019 – February 2020
"Process to book online from start to finish was seamless and couldn’t be more satisfied with my move! Very professional, polite, and fast moving company."
User review
Discovery and Roadmap
Conversations and Questions
I started by asking questions about who their users were, what issues they were facing, and what the goals were. With this level of detail, I was able to define a clear path a process.
Compile and Strategize
After more discussion, I broke the project up into two phases for a roadmap:
Phase 1
- Identify, note, and solve for existing user problems
- Compose empathy maps, user journeys, and wireframes
Phase 2
- Audit and compose a new design system/component library
- Apply new components and styles across the site and iterate with users
Goals
User: Create a great first impression and ease them through a seamless, intuitive booking flow that give them full control and flexibility.
Business: Increase engagement/start rates, create the scheduling touchpoint, and improve booking conversion rates.
Form Hypothesis
With their goals in mind, I put together a clear hypothesis statement:
I believe booking conversion rates will be improved by providing clearer, intuitive steps and progress indication throughout, while minimizing steps as much as possible.
Phase 1
Understand Movers and Their Problems
Persona
From feedback and empathy mapping, I started to define our persona:
Demographic
- People moving into small/mid-size apartments and homes
- Do-it-yourself mindset
Needs
- A free moving quote and price calculation
- Moving time estimate
Behaviors
- Use multiple online quote calculators
- Search and call conventional moving companies for support
Problems
I then put together a user journey map emphasizing these core problems:
- Initial marketing page is static and uninviting
- No confirmation or pricing details
- Active design elements and links don't look selectable
- Difficult to schedule a date on mobile
User journey maps are great for compiling feedback to identify and visualize problems within a design or flow.
Come Up with Solutions
Key Aspects
With user needs and issues in mind, I drew aspects that aligned with our goals:
- Emphasize primary call-to-actions
- Keep each step in the booking flow to-the-point and in view
- Design elements should appear selectable and familiar
Ideas
- Keep call-to-action and value proposition high in the fold
- Make elements look selectable and in view
- Keep each step as short and concise as possible
Design Goals
I started visualizing and noting design-level goals. This helped me to create a site map:
- Strive for familiar visual hierarchy
- Place design elements logically and consistently to avoid cognitive dissonance and excess scanning
- Expose small snippets of information to describe each step
Site maps for plotting new navigation and views.
Sketch, Wireframe, and Iterate
Hand Sketches
After circling back with the team and users with a proposed flow and discussing it further, I broke out my notepad, grabbed a pen, and started sketching views.
Refine Into Wireframes
Using prototyping tools Whimsical and Adobe XD, I refined some of the stronger sketches into wireframes. This type of design is easy to edit and helps users visualize the product before applying design language and content.
Incorporate Feedback and Iterate
After a few rounds of feedback and iteration, we landed on good desktop and mobile wireframes to move forward with with the new design system, branding, and components.
Phase 2
Build Design System
Audit Existing Design
After Phase 1, I did a complete visual audit of the legacy product, noting every element and style. This helped me merge any redundant design components and remove inconsistencies throughout the site.
Craft Design Language
I forked off some of the existing brand elements and put together the building blocks of the new design language, like typography, colors, iconography, spacing, and imagery standards.
Design New Components
I then applied the new language to refined components for a clean, consistent look:
- Buttons
- Form fields
- Sections and cards
- Navigation and footer bars
Apply and Document Components
Atomic Methodology
I applied these new components to wireframes and redesigned each view using Atomic Methodology:
- Atoms: Buttons, forms, form labels, dropdowns, text and image blocks
- Molecules: Form and button groups and title bars
- Organisms: Cards, navigations bars, and content sections
- Templates: Detail and location entry and summary view
Document and Compile Guide
After redesigning and iterating on views, I documented a high level summary, technical specs, and when/where/why to use each component into a guide.
View Design Guide
The Outcome
After identifying user problems and solving for them using design thinking and bringing it to life with a design system, the designs were launched. After revisiting the project, all KPI's were met and the product experience was greatly improved.
KPI's
- Abandon rates: decreased
- Conversion rates: increased
- Start rates: increased
- Schedule select: increased
- Profile form entry: increased
View Mobile Prototype
View Desktop Prototype
