top of page
Desktop Mockup 07.jpg

My role:

As a leading UX designer, I was responsible for designing the dashboard for the art school website to create a user-friendly interface that serves students, instructors, and administrators. 

I aimed to enhance engagement and provide insights into school activities and resources. Feedback guided refinements to align the dashboard with the school's mission, ultimately fostering a sense of community and providing seamless access to relevant information.

TOCO ORIGINAL.png

My Responsibilities:

  • Visual and interaction design

  • Information Architecture

  • High-Fi prototyping

Problem Statement:

  • The absence of a centralized dashboard interface on the art school website results in fragmented access to vital information and resources.

  • The lack of a comprehensive dashboard solution to integrate information, ensure seamless navigation, and nurture a sense of community within the school is evident.

Business Goals:

  • Enhance user experience and satisfaction by providing a user-friendly interface for accessing information and resources.

  • Increase engagement among students, instructors, and administrators by fostering a sense of community and collaboration.
  • Enhance the school's reputation and attractiveness to prospective students, faculty, and partners through a modern and effective online platform.

Define

User Research

Qualitative Research:
Conducted 1:1 session with the senior driver to gather detailed narratives and opinions from the participant.

 

 

Quantitative Research - Survey:
We ran an online survey among 25-30

representatives of the drivers using

Microsoft Forms to see what are the

significant pain points that need to

be resolved and understand user

needs.

 

Here are some of questions:

  • What are the most common pain points you 

   experience when using the mobile app?

  • Rank the pain points you experience such as:

        - Difficulty navigating the app

        - Slow loading times
        - App crashes or freezes Inaccurate load

          assignment

        - Ineffective communication with dispatchers

  • How likely are you to recommend the mobile

       app to a colleague in the industry?

  • What are the main reasons you use the app?

Frame 1.jpg

Understand the Current Process:

We interviewed senior drivers from the Bolton warehouse to us through the process of executing planned routes to identify the essential needs and demands of the user while he engaged with the app.
We came up with a High-Level User Flow and asked the user about the common challenges he faces while utilizing this system and pinpoint the aspects that cause him the most frustration.

Current process flow.png

What works:

Icon-Tick.png
Icon-Tick.png
Icon-Tick.png
Icon-Tick.png

Showing up the list of all assigned stops in the dashboard for driver’s action,

Driver is able to take proper action based on customer’s availability,

Driver can skip or miss a stop if required, and provide a reason,

Driver is able to view the stops on the map with a specific status icon to recognize what is skipped, missed, or completed,

What could be improved:

Assigned stops won’t show up on the same day as it has been assigned

It’s hard to find specific instructions for customer delivery

There are multiple steps to skip and miss stops, and limited options as reason code

There is no interaction to take proper action on the map view

No clear steps to navigate through the steps new drivers

Not able to send messages to dispatchers through the app

Persona:

06.1 User research (3).png

Categorizing pain points:

It was time to put all pain points on the whiteboard, vote on the most important pain points and categorize them under specific areas of problem to come up with solutions according to the importance of the issue.

Pain Points.png

Prototype

Design Handover:

I’ve been working closely with our senior designer and reviewed all wireframes based on the user’s requirements and expectations. We’ve prepared a handover of all the design assets for our web developer to begin implementing these changes in code. These include content (copy, documents, images in all necessary resolutions and formats), font files, icons font, wireframes, and style guide updates. We walked the team through Figma for all related documents.

Definition of Order Type.png
Definition of route Status.png

High-Fidelity Wireframes:

We initiated the process by creating design variations, aiming to address identified pain points and enhance the overall user experience for the mobile applications.

1.

On Hold section:

Introducing a dedicated section within the app for "Skipped Stops" allowing drivers to easily revisit and complete these tasks at their convenience. This distinct separation enhances visibility and clarity, ensuring skipped stops are readily identifiable amidst the rest of the listed stops.

Frame 3 (3).jpg

2.

Special Instruction field:

Implementing a new feature within the "Stop Details" section to provide clarity regarding customer expectations and instructions for drivers when completing the stop.

3.

Accurate Stop Details:

Facilitating easy access for drivers by providing essential customer information such as phone number, order type, and appointment time.

4.

Estimated Route field:

Ensuring accuracy in route distance and time estimates to enhance clarity and driver awareness.

Frame 4.jpg

5.

Confirmation Pop-up:

Implementing a feature in the app to confirm that the driver has selected the correct action, thus preventing inadvertent removal, skipping, or missing of stops.

Frame 5.jpg

6.

Alert banner:

Presenting real-time updates on ETA (Estimated Time of Arrival) while monitoring the route on the map, ensures driver remains informed.

7.

Progress bar:

Enhancing the user experience of our routing app with a dynamic progress bar, providing real-time visual feedback on the driver's journey, including scheduled Time of arrival versus actual time, customer information, stop status, and order type. This intuitive feature empowers drivers with clear insight into their progress, ensuring they stay on track and effectively manage their time while using the map to monitor their progress visually.

Frame 6.jpg
bottom of page