Find Best Route Anywhere
A Mobile App searching quotes feature design
Overview
DrayEasy is a B2B SaaS product that helps cargo owners search, book, and manage drayage services in North America. It focuses on the "last-mile" delivery of short-haul transportation. It had helped move over 26,000 containers and delivered them to more than 5,000 warehouses.
DrayEasy already had the web application version. However, during the initial user interviews, it seems not proper for them…
↓
During the user interviews, we found that users often need to search rates and route outside the office , whether it be at warehouse or port sites.
Problem Statement
The web application is really hard to access when users are outside the office. a mobile app is required.…
↓
My responsibility is DrayEasy Mobile App rate search process.
↓
Working with a design manager and a product manager in the team, the team was in charge of designing the search experience. My responsibility was creating an experience for users to search and compare rates on mobile devices
HOW MIGHT WE help cargo owner search rate more efficiently and smoothly through mobile app ?
Impact
4 times in efficiency
With the new mobile app, users can check the rate quickly from 15 mins to 3 mins compare to when they use a laptop
200% active users growth
Once DrayEasy provided client access via mobile app, there was a increase of 200% in daily active users in a month
Check my design solutions
↓
The design is based on the existing web version, so our research is divided into two parts: web version critique and user needs
↓
Existing web critique
Designing for mobile it's not merely directly translating the web interface. Through this analysis, we identified additional features for the mobile version and areas where optimization could be implemented
01 Non-hierarchy Information
As the starting page, users are confused about what to do next and how to search the route.
02 Complicated Rate Comparison
Users complained that they feel overwhelmed by the massive and non-hierarchy information in one page
03 Uncategorized Notifications
The notification center can quickly become flooded with thousands of updates.
Learn from users
We conducted 4+ interviews with 5 industry experts resulting in clarifying user journey and defining pain points. Our aim was to understand their working mode and preferences.
We identified three main pain points
↓
Can’t search quotes easily due to chaotic information
Can’t receive notification in an organized manner
Can’t compare rates efficiently due to complicated steps
Based on the 3 main points, we will focus the design on 3 key features:
Search route, notification and compare rate
↓
Search Route - Integrated Homepage
We kept the user flow of the web page: search their desire routes and call up previous search records. We focused on how to convert the web page to mobile
- Replace the map with search for a more informative homepage and add the 'search' part
- Reduce information clutter and allowed for a more intuitive navigation
- Introduced a 'News' feature to keep users informed and engaged with
Iteration
Through testing with users, we have improved the layout and structure of the homepage, the search filter and types, and the history route display
Final Design
An integrated homepage is both concise and information-packed, offering users the ability to explore routes, review their search history, access real-time industry news, and receive crucial updates
B. Notification - Categorize and Prioritize
Narrowing down the final selections of notification to display on the screen with considerations of both high importance and high urgency. How can we categorize notification that don’t overwhelm the users?
After reorganizing and classifying reminder categories, we are now contemplating how to integrate these classifications with the user experience
Final Design
Creating a notification system that can differentiate reminders according to their category and level of urgency guarantees that our users remain consistently informed and manage without the risk of missing critical information.
C. Compare Rate - Visualize and Interact
For the compare feature, our main focus for improvement lies in effectively displaying routes and prices to enable users to quickly and clearly find the desired results
Wireframe iteration
Component iteration
Final Design
A revamped visual and information architecture made previously complex drayage options easier to digest, so that the user can focus on what’s truly relevant to make a choice.
In the design process, I was also responsible for the design system, transitioning from the web version to the mobile version.
↓
For the DrayEasy product, we defined Noto Sans Regular as our main text font to provide a sense of cleanness, elegance and technology. To guarantee legibility, semi-bold font styles for headings and regular styles for text body establish a clear visual distinction from title.
Concerning our color scheme, a deep blue was selected as our main hue, setting it apart from the four functional colors on the interface. The color coding complies with WCAG 2.0 AAA level standards for accessibility.
The transition from web to mobile is never just a simple adjustment of format; I have learned a lot from this process…
↓
A deep integration of web version research and user needs.
In the design process, our research started from the web version. We considered the strengths and weaknesses of the web version to identify key points for the mobile version. By integrating user needs, we were able to finalize the design
Cooperation among cross-functions team
During this project, not only did we collaborate with the design team, we also initiated numerous discussions with the product manager, the development team, and client. Gaining proficiency in accurately and efficiently conveying the ideas of the designer to different teams is of utmost significance!
