DrayEasy Web App redesign

DrayEasy Order Management Redesign

DrayEasy Web App redesign

Project overview

Context

DrayEasy is a tech-forward company specializing in software and data analytics solutions tailored for the logistics industry. However, the current platform presents significant user experience challenges, including cluttered interface elements, unclear information architecture, and an overwhelming amount of content that dilutes the user's focus.

Information

Type
Product Design
Platform
iOS and Android
Deliverables
UI Screens, UX Flow and Prototype
View Prototype

Final Solution

Based on the conclusions from our research, we redesigned the entire interface flow from order management to container tracking, effectively
addressing the needs of the stakeholders.

Research

Lorem ipsum dolor sit amet, consectetur adipiscing elit ectus mattis nunc aliquam tincidunt est non viverra nec eu, in ridiculus egestas vulputate tristique.

Product critique

01 Redundant user flow

Users have to take extra steps to complete their tasks

02 Overwhelmed information

Users cannot grasp the information they need at their first glance

03 Frustrating information architecture

A lot of must-seen information are missing / hidden in deeper navigation

Journey Map

Interview Insights

Competitor Analysis

Interview Insights

Design Process

Lorem ipsum dolor sit amet, consectetur adipiscing elit ectus mattis nunc aliquam tincidunt est non viverra nec eu, in ridiculus egestas vulputate tristique.

Ideation Wireframe

Exploration Order

Exploration Container

Modal

Pros:
-Clear display of container information
-Quick switching between container and order pages.
Cons:
-Space limitations
Intrusiveness
Don’t allow arbitrary switch among containers.

Full Screen

Pros:
-More space for more info display.
-Easy and clear navigation.
Cons:
-Unable to switch between containers.

Slide-Out

Pros:
Achieve fast return to the order page.
Can still see part of the order page.
Cons:
Space limitations
Seeing the order page can be distractive.

Card List + Tab

Pros:
-Able to see status difference between containers. Meeting the type1 customers’ requirements.
-Able to see both shipment and request status through the list.
-Can show more containers.
-Support arbitrary switch.Easy and clear navigation.

Iterations Tracking

Initial UI

Iteration 1

Iteration 2

Cons:
-Enhance information hierarchy.
-Use more understandable terminology.
-Include more relevant container information.
-Reduce space occupied by events.
-Clarify relationships between statuses.
Pros:
-Clear navigation on request status.
‍
Cons:‍
‍-Map feature doesn’t align well with user scenario.
-Request status and substatus appear unrelated.
-Didn’t display shipment information.
-Iconography fails to differentiate release status effectively.
Pros:
-Hightlight and visualize shipment timeline through key events and dates.
-Better iconography for navigate and comparison.
‍
Cons:
-Visual imbalance due to the layout.

Iterations Tracking

Iteration 3

Iterations Tracking

Final Design

Client Requirement:

-Ensure clear display of blocked containers.
‍-Visualize status and activities clearly.
‍
How We Solve:
-Utilize distinct colors and iconography to effectively highlight each status and activity, including the identification of blocked containers.

One Step Further:
-Adopt a clean and consistent visual style.
-Provide error prompts and helpful documentation.
-Incorporate shipment timeline to highlight key events and dates.
-Able to see the latest shipment update.
-Able to notice changes in release and request status easily.
-Establish a better information hierarchy that aligns with users' needs.

Iterations Rate

Initial UI

Initial UI

Initial UI

What could be improve?
-Avoid making rates look like clickable buttons.
-Clarify the relationship between "best" and "average" rates.
-Enhance visual hierarchy for clearer presentation.
Pros:
-Clear labeling of rate information.

Cons:
-Lack of highlighting for the total rate amount.
-Potential readability issues with the horizontal layout.
Pros:
-Highlight the final total rate.
-Clearer and more concise layout.
-Provide prompts if rates change.
-Allow visibility of previous rates and comparison if change occurs.

Next Steps

Lorem ipsum dolor sit amet, consectetur adipiscing elit ectus mattis nunc aliquam tincidunt est non viverra nec eu, in ridiculus egestas vulputate tristique.

Usability Testing

We plan to conduct some usability tests to define usability issues and address them.

Iterative Update

We will communicate with engineers during the development process to update some features.