Streamlining Functionality to Boost User Flow and Conversions

Problem

The website had disorganized, unprioritized content, making navigation difficult and reducing user engagement.

Solution

Streamlined the homepage, improved content hierarchy, and enhanced navigation for easier access to key information.

Tools

Figma

Invision

Adobe Illustrator

Qualtrics

My role

UI Designer

UX Researcher

UX Designer

Design Process

Blue Corporate Development Process Steps Graph.png

Research and analysis

Brand Discovery

Researched the company's unique elements, values, and attributes.
Explored their identity, target audience, market positioning, and overall brand essence.
Identified the brand’s personality, values, and key messages it wants to convey.
Goal: Gain a comprehensive understanding to inform brand development, messaging, and communication strategies.

Goals

Primary services include:
1. Packing, shifting, and moving belongings.
2. Offering shifting and moving consultation.
3. Apartment, office, residential, and long-distance shifting services.

Two types of shifting services

1. Local moves.
2. Special offer for students to settle before the semester starts

User Personas

Competitive Analysis findings

By incorporating the insights from these personas into the strategies, we created a more personalized and effective experience for the customers, ultimately increasing customer satisfaction and loyalty.

1 Prioritize clean and modern design, visible calls-to-action.

2 Emphasize engaging visuals, transparent pricing information

3 Highlight a diverse range of services, incorporate client testimonials.

4 Consider interactive features, emphasize local expertise.

Site mapping and Content breakdown

After analysis and user research, we prioritized content and established a clear hierarchy for better navigation and user experience. Using various personas, we crafted a sitemap addressing key pain points, which guided the content wireframes and webpage redesign.

The content is divided into two parts

Page templates
Content Breakdown

Click on the tab to know the contents of each page

Page templates

0.0 Home Template

CTA (Get a Quote) with Company Description
Icons for 8 Services with "Know More" Button
Display of Company Awards as Logos
Key Stats: Clients, Years in Business, Satisfaction Percentage
Customer Testimonial with Star Ratings
Additional CTA (Get a Quote)
Company Info and Staff Image Section
Company Affiliations and Logos with CTA to Call or Get a Quote

1.0 Services Template

Image with CTA
Heading with a tagline
Buttons for the services (4 buttons)
Local moves
Flat rate long distance - storage
Packing
Small buttons of services (3)
Special Student Offer
Packing services and supplies (H)
Boston to NYC special rates - CTA (to book now)
Bullet points section (process) - bullet points section (why us) - CTA (Prices and charges)
CTA (Call or get a quote)

Click on the tab to know the contents of each page

Content Breakdown (In detail)

0.0 Home Content Breakdown

Starts with a CTA (Get a Quote) on the right and a brief company description on the left.
Icons representing 8 services below, each linking to the services page, with a "Know More" button for more details.
Company awards displayed as logos.
Section showing three key stats: number of clients, years in business, and customer satisfaction percentage.
Customer testimonial in the center with star ratings.
Another CTA for getting a quote.
Section with text about the company on the left and a company staff image on the right.
Company affiliations shown as a small text box with logos of affiliated companies, followed by a CTA to call or get a quote.

2.0 Prices Content Breakdown

Wide screen with a plain background and a CTA (Get a Quote) on the right.
Center-aligned 2-3 lines of text describing the price chart below.
A charges calendar, 60% wide and center aligned, showing service charges by date, segregated by month. Colors represent different charges, defined by 5 rectangles at the bottom of the calendar.
Small center-aligned text box explaining the calendar and mandatory charges applied to all services.
Small rectangle CTA (Book Now).
Pricing chart showing service rates, aligned with the calendar colors.
2-3 lines of text explaining the pricing chart.
CTA with a phone icon (Call Us).
Illustrations of city skylines for cities with long-distance flat rates.
Short text explaining flat-rate long-distance services.
"Long/Short Term Storage" heading.
Three square storage icons in a row that flip to reveal details when clicked.
70% wide center-aligned rectangle with a CTA.

1.0 Services Content Breakdown

Background image of staff packing, with text on the left and a CTA (Get a Quote) on the right.
Heading with a tagline about services.
Four large, clickable service buttons (Local Moves, Long Distance, Storage, Packing) in two columns. Clicking flips the buttons to show service details.
Three small service buttons (Special Student Offer, Packing Services & Supplies, Boston to NYC Special Rates) with flip functionality, except for Packing Services, which links to a detailed service page.
Small CTA (Book Now) for getting a quote, leading to the homepage CTA below the header.
Three text bullet points explaining the company’s process, with a "Process of Services" heading beside them.
Three more bullet points under "Why Us?" explaining reasons to choose BBRM.
Center-aligned CTA for Prices & Charges.
Wide rectangle with two CTA options: “Call Us” and “Get a Quote.”

3.0 About Content Breakdown

Full-width group photo of company staff.
Left-aligned brief text about the company.
Three equally spaced squares with left-aligned text outlining the company's mission.
CTA encouraging free consultation and contact.
Staff photos in a row (4 per row), with text about their exclusivity and special training.
Wide rectangle with a "Happiness Guarantee" stamp:
Left: “Backed by Boston Best Rate Movers.”
Center: Small guarantee icon.
Right: One-line text about customer care and satisfaction.
Three equally spaced customer testimonials, left-aligned.
Three equally spaced icons representing the company's expertise.
CTA form with five fields:
- Date.
- Zip codes (from/to).
- Service type.
- Move size (room, studio, office, etc.).
- Type of entrance/floor.
- Submit to get a quote.

4.0 Review Content Breakdown

Wide rectangle with a background photo of staff packing and shifting, and a CTA (Get a Quote) on the right.
Three equally spaced customer testimonials in one row, with left-aligned text.
70% wide video testimonial.
Three FAQs on the left side, with answers that slide down when clicked.
Two vertically aligned buttons:
- Top button for the cancellation policy.
- Bottom CTA for filing complaints, linking to the contact page.
Aesthetic photo of packed goods on the right.
Final box with two CTAs side by side:
Free quotation.
Free consultation call.

5.0 Contact Content Breakdown

A text about contacting them
Showing four types of way to contact the company through icons placed equally spaced 2 in one row and text to be left aligned
All the icons are clickable and the action assigned to them like the office address on clicking will take you to maps and show you directions to their office.
A contact form with 3-4 inputs like name , email, number , message form.

Sketches, Low & High fidelity Wireframes

After outlining the website structure, I sketched and illustrated the design to capture the envisioned look and feel. The focus was on enhancing user experience while preserving the brand's essence and maintaining continuity with the original design.

HOMEPAGE

ABOUT PAGE

SERVICES PAGE

PRICES PAGE

REVIEWS PAGE

CONTACT PAGE

Low Fidelity Desktop wireframes

Here are the low-fidelity wireframes for each page, design changes and their rationale are outlined at the top of each wireframe for clarity and improvement.

Home page

The initial homepage wireframes featured full-width text detailing services. I redesigned it to present information more visually and categorize it clearly, making it easier for users to understand the company's offerings.

Mobile

Desktop

Service page

The goal was to streamline service information. The original text-heavy page was reorganized with icons and illustrations for a more concise and visually appealing layout.

Desktop

Mobile

Prices page

The page aimed to categorize services and display prices efficiently. It featured a calendar showing moving rates and fees, with a table detailing costs for each rate.

Mobile

Desktop

About page

The original website had two pages with overlapping content. These pages were combined, and the content hierarchy was adjusted to place the most crucial information at the top.

Desktop

Mobile

Reviews page

The original website lacked a reviews page and had important, hard-to-find content on internal pages. This new page consolidates essential information, including cancellation policies, late fees, date changes, company policies, and general FAQs.

Mobile

Desktop

Contact page

The original website lacked a contact page. In the redesign, we added a contact page to facilitate customer inquiries and provide easy access to company contact details.

Desktop

Mobile

Visual Style Guide

To create the high-fidelity wireframes, we developed a visual style guide detailing logo usage, color palette, typography, and layout.

This guide ensures brand consistency and a unified identity. We retained the brand's color palette of blue and orange and selected fonts based on our target audience's preferences for an engaging user experience.

High Fidelity Mobile Wireframes

Homepage

Mobile

Desktop

A small quote with a CTA to see the prices of the services.

<

_________

Added a prominent, brightly colored CTA form for quotes at the top of the website to attract attention and drive conversions.

<

________

Added a breakdown of the moving process into four easy steps to clarify what the company will do for the customer.

<

____________

Wrote a small copy to give a small history of the company and their customer base

<

____________

<

____________

A testimonial praising the company’s excellent services.

This section outlines the company’s services with a CTA to explore all details.

<

__________

<

____________

A comparison showing the company offers the best prices for top-quality moving services in Boston.

This section details the company’s history and origin story.

<

_________

Statistics about the company which establishes trust.

<

_________

Introducing the staff and concluded with the company's authenticity and CTA to convert.

<

_________

Services page

Mobile

Desktop

Icons represent the services, and clicking them flips to reveal detailed information, making interactions engaging and user-friendly.

<

____________

Giving them a brief explanation and showing them the values the company carry for their services.

<

_________

Sharing the insights of the moving day so that the user know what to expect and by adding CTA's in the end

Prices page

Mobile

Desktop

Created a calender for the user to know which date would be the most suitable for them given the rates on each date.

<

____________

A price chart to make them understand the pricing and rates of all the services in a smooth way by adding icons and illustrations.

<

_________

By adding pictures of the cities they give services to makes it easier for the user to recognize the places

Illustration showing the different units of the storage pricing

A small CTA form to get a quote instantly just by filling this form.

About page

Mobile

Desktop

To share about the company , the first section talks about the mission of the company.

The company outlines their service guarantee, followed by information about their areas of expertise and company details.

A testimonial to show how the previous customers loved the services given by Boston Best Rate Movers

Reviews page

Mobile

Desktop

Contact page

Mobile

Desktop