Sudish Hantal's profile

Creating uParcel's cohesive look to improve UX

Presentation matters

uParcel does an awesome job, providing various types of delivery services to cater to each type of customer need.
That said, their service page with its poor design isn't doing justice to their business.
So, here is how uParcel could revise the service page design to help their business.
Land here and go... where?

I landed on the service page and the hero section greets me with the text "Door to Door delivery" with some subtext below it.
Then, my eyes wander all over the background illustration which stands out for all the wrong reasons. It follows a different colour scheme.

uParcel uses a tint of orange in their brand colour scheme - something that is missing entirely from the background illustration.

Then, I look at the header menu which has all types of links: links to page, links to check order status, links to book a delivery, change site language, sign up, and more - all good.
Their placement, however, feels chaotic.

Looking further, I stumbled upon this hollow button that was barely visible over the light background. Turns out, I was looking at the call-to-action button in the hero section.

The elements don't look like they belong together, with almost each following their own unique style. Because of this, the design did not feel cohesive.

With that, I moved on to the next section.
I scroll down to the service section which is a 4x4 card grid talking about all kinds of services that uParcel offers.

It was pleasing, with each card feeling cohesive as its elements i.e. icons, text, and buttons all following the same styling.

I scroll some more... and more... only to realise

The list goes on

We humans are feeble - can't seem to remember more than 7 things at a time (yes, there's a UX law about it).
So, seeing 16 things at once was hard to take in - let alone remember.

With all that noted down, I moved to the next section.
The footer contains all important and helpful links for the user. The long list of services, however, feels too much.

The links block precedes the certification badges that are essential as they help prove the credibility of the service and build trust.

Further, the contact form is a good addition to allow users to send queries, but feels cramped inside the footer.
After reviewing the existing design, I found a common pattern of issues namely:
- lack of cohesiveness in design
- lack of hierarchy
------
How do I highlight uParcel's value in the best way?

This was the first question that came to my mind before starting the redesign.
Show value to sell

People buy a product or service when they see value in it. That was the first aspect I worked on. I revised the hero section headline to express value to the customer instead of stating what the company does.

I followed this with a prominent and noticeable call-to-action button to direct users' attention and action leading to browsing services in offer.

Proof of trust is key for building a sense of trust in potential customers. So, I sourced a testimonial from the homepage and presented it in a section below the button. The testimonial highlights the key characteristics of the services in offer - in the process, building a list of benefits.

The service is centered on people which made me think "Why not further amplify this aspect?"
So, I revised the background illustration with a photograph of people involved in the delivery process. As this will help customers better relate to the service.
Divide and direct

Next, I broke down the 16 card-grid into 4 categories.
This was to help reduce the mental load on users as they now had to process 4 things first instead of 16.
Further, I consolidated some services (like Additional Services) to further reduce the amount of info for the customer.

Then, I added an element of trust in form of certification badges which I moved from the footer section.
Helpful and grouped

I followed the same principle from the service section and grouped all the footer links into specific categories to help them group.
It helped reduce the mental load on users with less info to process at a time.

The contact form got its own section. The reasoning is, it's a secondary call-to-action for site users - the first being, booking a delivery service.
Thus, I styled the section to have a form alongside a photograph of deliverymen with uParcel's brand color to help customers relate. All this made it easier for the customers to send queries.
It was process...a process to help uParcel convey the value it holds for its customers by enhancing the user experience while browsing their services.
Curious to see the entire design?

------
What other aspects do you think could be improved?

On second thoughts, I feel the individual service links were present because of SEO purposes. But with not much SEO knowledge, I can only speculate.
Thank you for your time browsing through this project.
Creating uParcel's cohesive look to improve UX
Published:

Owner

Creating uParcel's cohesive look to improve UX

Published: