LEGENDS MOVING SERVICE
REDESIGNED WEBSITE
Overview
Legends Moving Service needs its website revamped for its small business. They have one location where the headquarters is in Murrells Inlet, SC. They mainly serve the "Grand Strand" as their primary source of jobs; however, they do service surrounding areas and travel for long-distance jobs.
Role
Product Designer
Location
Atlanta/Remote and Murrells Inlet, SC
Responsibilities
-
Research
-
Content Writing
-
Layout
-
Presentation
-
UI components
Challenge
They needed to update their website to attract more business and be current with today's trends in UI. The owner wants to keep the pricing off of the website to encourage users to call for quotes since pricing changes.
Solution
Update the company's site to have an appealing, clean, and insightful design so that users can see the services the company provides while being encouraged to call for more details.
Design Process
Empathy & Research
Define & Evaluation
Ideate & Solve
Mockup & Prototype
Test & Iterate
Product Launch
Research & Define
-
Research shows that most competitor's have opted out of colored background and grand designs.
-
Competitor's have clean designs that have white background with pops of color.
-
Users find the other sites to be more accessible thanks to fonts, colors, and layout.
-
Most competitors provided details but still missed specific details
-
For example, they would say that they offer pack jobs, but they did not mention items that they were or were not allowed to pack for the customers.​
-
Research Points
Persona
Name: Mel and Grant J.
Hometown: Pawleys Island, SC
Family: Husband and wife, dog
Occupation: Mel is a nurse; Grant is a History teacher
Mel and Jackson are a busy couple working as a nurse and history teacher at the local middle school. They need a way to book a mover in time for them to relocated across town before their wedding and honeymoon. First, they need to know what the movers offer for their services as they need some help with packing. Second, they need to be sure the movers are able to move them from their apartment to their new home. Third, they need to know if the moving company supply the materials for the packing and move.
Empathy Map
Pain Points
Information
The information should be provided on the website to avoid the extra work of calling a business for questions about services they offer.
Style
The style is off-putting and unclear for them to follow.
S.W.O.T. Analysis
Current website design and function
Strength
-
The site was short and to the point.
-
Not overwhelming with too much information.
-
Friendly design.
-
The site is outdated.
-
There is not enough details for customers to understand all aspects of the business.
Weakness
Opportunities
-
Let the user know about the details of the services they provide.
-
Have the option for user to get quotes from the site.
Competitors offer quotes online without having to call the office.
Threats
If/Then Statement
If the site was updated to be modern in style and more informative, then the business will attract more customers after they see the design and services the company provides.
How Might We
-
Adding small animation to the components to create interest.
-
Remove most of the colors, including the background for a cleaner look.
-
Add icons for visual indicators to help the user navigate the information they need.
-
Remove the illustrations and replace with real photos of humans.
-
Add shapes to highlight the photos to make the components dynamic.
Ideation & Design
Original Menu Bar
Needed Changes for the Update
The dividers for the menu will be removed.
The company's name and logo will need to be updated and consistent throughout the site.
The menu bar will have some changes:
-
"Home" will be remove. For the user to navigate back to the Landing screen they would select the company name/logo.
-
Invokes familiarity​
-
Simplifies the design to be more streamlined.
-
-
The font will be change to be consistent.
​
Original Landing Screen
The website will utilize more of the page to decrease the negative space seen on the left, right, and bottom of the screen.
The statements and dividers are to be removed. Have the points added in a different layout. Provided more information with the statements for the user to read.
The footer will be updated so that it is not floating to allow space to be seen underneath it.
Sketches for the Landing Screen
After narrowing down my sketches, the top choices would display the Hero image at the top with the Tag Line in the middle. The image on the right was my proposed option. It offers a more interesting layout that encourages the user to keep looking throughout the site.
Lo-Fi & Hi-Fi Mockups
I kept the two header bars:
-
The first bar is to show the company's license number as the owner requested that this special number remain there.
-
The second bar for the company's name and site menu for the user to easily navigate.
Design Improvements
-
The heavy, dark blue color was replaced with white for a brighter, cleaner background.
-
Icons were added for visual and informative details without adding weight to the page with photos.
-
Adding short descriptions to give insights to the user.
Original vs New "About Us" Screen
Design Improvements
-
Added a photo that parallaxes in the background of informative text blurb to peak interest and catch the user's eye.
-
Titled the section as "Our History" from "About" to sound more business professional.
-
Display the company's phone number next to the animated moving truck that slides into focus from the right side to entice the user to keep scrolling down to view more information.
-
Provided two sections that are titled "What We Can Move" and "What We Can Not Move" using icons and labels for easy scanning of the items appropriate to the section headers.
-
Display customer testimonials as the closer before the Footer so that users can view positive words from satisfied customers.
-
Removed the voided space from under the Footer (seen in original website image).
Original "Services" Screen
-
Add categories for the services the company provides.
-
Add tips for the user to better understand the services.
-
Replace illustrations with real photos of people.
New "Services" Screen
-
I added icons for visual indicators.
-
I did the content writing to have more descriptions.
-
Towards the bottom, the new addition for Tips has been placed with photos of people representing the action the tip is detailing.
-
Closing the page before the footer, I have the contact banner for quick reference.
Original "Contact" Screen
Remove the map from this screen. Change the layout of the page for more interest.
Remove shadow from components. Have the form be style with a modern design.
The footer will be updated so that it is not floating to allow space to be seen underneath it.
New "Contact" Screen
-
Humanized the site more by adding photos for workers and other subjects with small animations to capture the user's attention.
-
The office hours have been added with a note to say when the movers have finished their shifts.
Testing
Study Type
Unmoderated Usability Study
Location
Remote
Participants
-
12 people, men and women, different races, ethnicities, and creeds
-
Ages 18-60 (to cover students going to college and senior citizens - making sure everyone could navigate the site easily)
Usability Findings
Users found the sight to be modern, easy to use, and informative.
Requested improvements:
-
Change the layout of the Footer. Right now, the footer has the information on the right.
-
Add an Accessibility Page and quick access button in the Footer.
-
Update the placement of the Service Tips so that it is easier to read.
Length
10-20 minutes
Iterations
Footer Update
The layout of the Footer has been changed for better ease of use for the users. The Accessibility text button has been added towards the bottom for the user to be navigated to another page to read the details.
New Accessibility Page
From the text button, the user will be navigated to the Accessibility page that has been added to allow users to be aware of the steps that have been made to align with the WCAG standards. If a step has been missed then the user can contact me or the client to inform us, via email, of what needs to be changed or updated.
Service Tips Update
After the user sees and reads the different services that are provided, the user will see that there is a section for the Tips. It is now laid out in an easier format that is accented by colorful decorative shapes. The main words of interest have been kept bold within the paragraph description.
Service Tips Update In Context
Final Designs
Conclusion
Impact
The change was widely accepted. The improvements allowed users to see the information with ease. The owner loved the design saying that it was "Like a breath of fresh air" after having the old website design.
What I learned
For the landing page, add as much information to the page without overwhelming it. Allow the user to see the overall information and have them navigate to another section for in-depth details. Have the design be captivating and informative.
Next Steps
Follow up with print materials such as business cards to be made to reflect the update to ensure consistency with marketing.
