Challenge

Moving can often seem like a continuous stream of stressful events. From the repetitive process of reserving a truck to the challenges of modifying bookings, coordinating with moving assistants, and handling a large truck, do-it-yourself movers using U-Haul can find the moving experience both disjointed and frustrating.

Objective

This all-in-one virtual assistant redefines the entire moving journey. It offers responsive voice-guided features that optimize tasks, enhance coordination, and provide real-time alerts and guidance. It's particularly adept at intelligently addressing complex requests, which is a valuable asset for movers under pressure. By doing so, it significantly boosts the efficiency and overall enjoyment of the moving process while simultaneously alleviating driving concerns through hands-free, real-time support.


SAMMY

Supporting personalized, mover experiences through a voice-enabled virtual assistant

TIMELINE

2023 Aug - Oct ( 7 weeks )

TEAM

4 Designers ( Myself, Malia Hong, Christina Yang, Kimberly Blacutt )

TOOL

Figma, Figjam, After Effects, Premier Pro, Procreate, Notion

MY ROLE

Interactive prototyping, UI/UX Design, User Research, Concept Development

SUMMARY

Worked with 3 other designers, we designed the voice-enabled virtual assistant for U-Haul to improve U-Haul App experience with user-centered design methods. This project was submitted and won two design awards: UX design awards and Indigo deisgn awards.

This project demonstrates

A collaborative project with designers that works towards a design challenge with user-centered design methods. I crafted interfaces, built components, developed design systems, and created clickable prototypes. Designed dialog-based interaction elements to enhance user engagement. In the process, I aligned visual systems across film, motion, and graphic design for a cohesive user experience.

BACKGROUND

Moving can often seem like a continuous stream of stressful events, from the repetitive process of reserving a truck to the challenges of modifying bookings, coordinating with moving assistants, and handling a large truck. How can we improve the most disjointed and frustrating moving experience for U-Haul customers?

SOLUTION

Our team designed this all-in-one virtual assistant redefines the entire moving journey. It offers responsive voice-guided features that optimize tasks, enhance coordination, and provide real-time alerts and guidance. It's particularly adept at intelligently addressing complex requests, which is a valuable asset for movers under pressure. By doing so, it significantly boosts the efficiency and overall enjoyment of the moving process while simultaneously alleviating driving concerns through hands-free, real-time support.

FINAL DESIGN

Introduce Conversational UI Sammy

A friendly guide, reminder, and cheerleader who provides U-Haul customers with multiple options to chose from; personalized recommendations based on user feedback; timely reminders, equipment tutorials, and safety alerts for a safe and pleasant driving experience.

STREAMLINE ORDERING PROCESS

Personalized recommendation

Provides personalized guidance and recommendations for services or products that required multi-steps selections such as truck recommendations, order alternations, and moving helper selections.

EXPEDIATE DECISION-MAKING PROCESS

Flexible with options

By considering edge cases where recommended options might not fully satisfy users, I ensured that they can easily view and compare additional options through an intuitive user interface design.

TASKS MANAGEMENT

Timely Reminders

Helps users stay informed by keeping track of upcoming tasks and appointments, and sending notifications about changes in order status, helper confirmations, and more.

DRIVING BUDDY

Keep user informed

Sammy, through alerts and notifications, integrates with Apple Maps to provide users with real-time safety alerts, ensuring a safe and pleasant driving experience.

Concept Video
Final Design
Design Concept
Final Design
Final Design

RESEARCH

About U-Haul

U-Haul is a well known transportation and storage solution company in North America with various services and choices from trucks, trailers, storage units to packing supplies.

How’s the current in-store experience look like?

Through observation of U-Haul store operations and interactions with U-Haul employees, we identified key consumer actions in the order process, such as self-inspecting vehicles and self-return. The emphasis on self-service tasks can be overwhelming for first-time or vulnerable users.

Site visit

Look beyond the physical experience

The territory mapping helps us to scope the design goal through understanding the stakeholders in the U-Haul ecosystem, including main customer segments, touch-points. We discoverdd the main customer segments: do-it-yourselfer and moving helpers. Also, we took a closer look in to mediums for the interaction happens.

Terriority Map

Discover pain-points and surface opportunity areas on the digital realm

Opportunities are identified for improved interface design with easier information accessibility on current app, especially for various support request, such as alter order, coordinate with helpers

Issues identified:

Excessive scrolling and lengthy paragraphs for accessing support or information. Lack of transparency in order status Redundant steps for placing orders. Assistant/Help channels are demanded however hidden

App Audit
Task flow analysis

Zoom out the whole user journey -  Use cases discovery

Beyond simply examining the tools at their disposal, we also mapped user journeys that highlighted emotions, needs, and interactions. We discovered that emotional factors play a significant role in the overall process. It's not just about completing tasks quickly, but also about alleviating the stress of uncertainties and potential risks.

During the research phase, we prioritized design opportunities where the virtual assistant could support users in two key areas: (1) streamlining task flows and helping users stay on top of their tasks, and (2) alleviating user frustration when dealing with the unknown, uncertainty, and stress while driving.

Wireframing

While wireframing key screens, I prioritized understanding the context—specifically by first designing the conversation. I imagined scenarios where and when users might interact with Sammy, focusing on the actions they might take to complete tasks, such as confirming orders, updating information, comparing options, recommending, integrating services, guiding, notifying, confirming, and reminding. After that, we wireframed and selected appropriate UI patterns to effectively visualize these actions, incorporating elements like buttons, cards, notifications/alerts, and text/voice input.

Conversation Design
Wireframing
Design following actions

ideation

There are some key decisions we've made for structuring Sammy with the user interface. First question we asked ourselves was that where should we position the CUI? After a few round of iteration, we figured to position Sammy in the bottom navigation bar, ensuring that it remains visible on all screens at a fixed location for easy access. How would the page-to-page transition look like? When the user initiates a conversation, a small pop-up screen will capture and display the inquiry. This approach is designed to prevent a sudden transition to a new page. Subsequently, the pop-up will expand to a mid-height page, displaying all the dialogues from the bottom upwards.

What about the buttons? We initially designed to place CTA buttons below the inquiry or info card. After getting user feedback and considering the thumb reach on the phone screen, we placed the button below the screen as a Primary Interaction Area, considering that the center and bottom areas of the screen are easily reachable by the user's thumb when holding the device single-handedly. To keep users informed and provide feedback on user input, when users speak to or tap a selection, the button will enter the selecting state and then move up to become a speech bubble. As a result, those buttons serve as visual cues of the available selections the users have, also having the speech bubble as a record for the user’s selection.


When redesigning the home page, we considered several key factors:
Placement of Sammy: Where should Sammy be positioned to remain visible and accessible?
Feature Highlighting: Which features should be prominently displayed on the home screen?
User Differentiation: How should the home page differ for users with and without upcoming orders?
Visual Alignment: How do we ensure consistency with current U-Haul branding?

Sammy is placed at the bottom of the page to ensure constant visibility and availability for users. The redesigned app accounts for two user paths: those with upcoming orders and those without. For users with upcoming reservations, the reservation will be prominently displayed as the main info card. We simplified the navigation bar and moved the search function to the top of the home page for easier access. The main services and products are highlighted with visual emphasis to distinguish them from other services lower on the page.

interface design

Our goal for the new branding system is to design within the constraints of the current U-Haul branding while bringing a fresh perspective. I assembled the main components of the interface and crafted a clickable prototype for product demos and user testing.

DESIGNING SAMMY

Why Sammy?
U-Haul introduced it's first version of its "Sammy U" character in 1953, named after the company's founder.

Logo Concept Development
Logo Design
Motion Design
Sammy Identity

REFLECTION

Teamwork matters
Collaboration is crucial, especially in a design team. It fosters diverse perspectives, shared insights, and a collective effort towards achieving user-centric solutions. Our team accomplished projects by working closely together in pairs and being accountable for assigned tasks. We utilized design tools such as whiteboarding and conducted brainstorming sessions to generate collective solutions.

While other designers on the team focused on creating videos, we needed to work seamlessly to deliver UI prototypes for After Effects. This required careful handoff from Figma to AE, where I ensured that files were consistently named and easily understandable for smooth collaboration.

Consistency is the key
Consistency was key. While designing within the constraints of U-Haul’s existing branding system, I ensured that the new UI screens adhered to current branding guidelines. However, I introduced a fresh perspective by integrating elements like gradients while preserving the brand’s distinctive colors, such as green for notifications and alerts.

If I have more time, I will spend time on considering more edge cases such as last-minute orders and do more user testings to evaluate if the current UI components can solve customers' questions effectively. The effectiveness of the prompts we provide to users.