Movers Redesign CASE STUDY

UX | UI | BRANDING

OVERVIEW

A moving company*  is losing potential costumers because scheduling a move is currently a poor user experience. For this project, I revamped the UX and UI of this website to give the company a better return and to provide the customer with the solutions that he/she are looking for.

Movers-Redesign-Web-Showcase.jpg

 

CURRENT INTERFACE

The current website requires the customer to fill out a long form and provide information about the inventory they own and other details about the move. Then, the customer has to wait for the company to call them back with the estimate. The website gives the user no timeframe. 

OBSERVATIONS, RESEARCH, WIREFRAME SKETCHES

Observations from personal experiences with the website and competitive analysis include:

  1. Visual design: The gradient background was extremely distracting on the eyes. The beige color mixed with brown text made it difficult for me to focus on the forms. The physical elements were too close together. The best sites had less content, more contrast, and more white space.

  2. User’s effort: The website required too much from the user. I felt very overwhelmed with the sheer amount of information I had to read and provide.

  3. Real time decision making: Positive user friendliness was inversely proportionate to how much time it took me to get my quote.

  4. Transparency: My intuition told me that the information presented on the website was there to help the company, not the user, thereby decreasing my trust in the company. Rather, websites that actually explained the different parts of the quote gained my trust. Finally, no time frame was given.

I took notes and created wireframes to map out the best user journey posssible

user flow movers project.jpg
movers redesign wireframe.jpg

WIREFRAME - UX ANALYSIS 

Moving Cost Calculator

I wanted to create an experience for the user that was quick and simple, so I decided to go with a “moving cost calculator”. 

The user inputs the moving dates, moving location/destination, size of move and destination, and any additional packing and disassembly services needed. From there, the calculator’s algorithm takes the average amount for all of the components and adds them together to present a range to the customer. 

I wanted to help the customer as much as possible. Therefore, I added question icons next to fields in the moving calculator to explain the importance of the questions in formalizing the quote. 

         Example: If the user hovers on the question mark next to moving dates, a dark box will show                 up and might have information about the cost increase of moving on a weekend compared                   to a weekday.

 Conversion

If the customer is happy with the estimate and wants to learn more information, they can go forward and press the “Get Started” button. This starts the point of conversion.

Upon pressing the button, a form drops down (represented by the blue square)  A drop down form helps eliminate overcrowding on the page.

To help the user, the moving information is saved from the previous form. However, if the user would like to change anything, they can still do so.

Then, a confirmation message pops up on the screen, the user receives a confirmation mail, and a representative contacts the user within 24 hours. 

User experience transcends well beyond the company’s website. Therefore, the company should be cognizant of providing a great user experience even after the user leaves the page.

Additional Information

Scrolling downwards, the website provides information that is completely user-focused. It helps the user understand the different components of the estimate, the information to present to the representative, and FAQs.

By benefitting the user with information that is helpful and relevant, the company is providing great user experience beyond the visual design. 

Summary of UX Changes

  • Consolidating navigation

    • Placing “About Us” information on the home page

    • Putting “Cities we serve” on the home page, within the “About Us” section

    • Combining “Moving Services” and “Packing Services” into one page, called “Services”

  • Removing redundant information from the footer

  • Simplifying the "Free Quote" page

Budget Movers Rendia Site_Desktop 1200px.png

REBRAND

Brand Colors

Blue represents trust and calms to viewer. Therefore, it is a great color to use when comforting the user and helps the viewer trust the product or service being offered. 

I pulled the red tone from the website’s original branding. I also liked the pop of color that the red brought in as an accent color.

 

Iconography

I created a set of icons for the company to add a modern set of branded visuals in lieu of stock images

Screen Shot 2018-08-17 at 3.10.12 PM.png

FINAL INTERFACE

UI CHANGES

  • Utilizating more white space

  • Adding modern and flat visual elements, such as icons, that tie back to original branding.

  • Changing to color scheme

  • Incorporating more contrast and visual flow through colored sections

FINAL UI

I reviewed my final redesign by reviewing my original principles:

  1. Visual design: Eased congestion by creating more space between elements, thereby increasing white space. Changed color choice to blue to help the viewer focus on the website. Added iconography for simple and modern visuals.

  2. User’s effort: Basic information required from the user. The website gives the user a guide to collecting information for the representative.

  3. Real time decision making: User receives the estimate right away.

  4. Transparency: Information presented on the website is there to hold the viewer’s hand throughout the process. User receives a confirmation email and time frame.

Budget Movers Rendia Site-12.png
Budget Movers Rendia Site-10.png
 
Movers-Application.png
 

THANK YOU FOR VIEWING!