STUDENT STATUS

Internal Data and Tasks - University Beyond Bars

Designing a web-based application for task management and student financial aid applications.

Equll Website Demo

new GIF

 

Project Summary

3 Weeks of Design - 7 months of Development Support

2 UX Designers, 5 Developers

Research - User Interviews, Background

Analysis - What do users need from the program?

Design - How will the users  interact with the software?

Solution - Figma prototype and specifications, live web app

Statement of Work 

Research

Initial Research

What is port drayage and how does it work? (It's moving containers from ports to nearby warehouses and vice versa)

What is the startup's business model? (Uber for port drayage)

Interviews with current users - what are their insights into the current MVP site? The current site got a 34 SUS score.

Who are the competitors and what are they doing?

How does the current site and business work? Task flow of current system.

Current MVP Dashboard

Current Equll Shipment Dashboard
Equll Comparative Analysis
Existing Task Flow

Synthesizing the Research

Affinity Map - What are the key desires we found in the user research clients arranging a shipment?​

I value maintaining relationships with carriers and clients.

I prefer real-time feedback.

I want to see the status and timing of my shipment.

Saving money is a key part of the value proposition of Equll, the actual users didn't focus on that as a day-to-day issue - it was more about information and trust. 

Affinity Map
Who are we designing for?
Persona
 
 

Analysis

How does Sheri feel when creating a shipment?
Customer Journey Map
How should the site be organized?

Card Sort - How would users arrange the categories?

Quotes - the smallest group, but very important.

Account

Shipments

Card Sort Best Merge Method
How will Sheri interact with the new site?

User Flow

New Task Flow
 

Design

Design Studio Initial Sketches

Equll Sketch 1
Equll Sketch 1
Equll Sketch 2
Equll Sketch 2
Equll Sketch 3
Equll Sketch 3
Equll Sketch 4
Equll Sketch 4
Equll Sketch 5
Equll Sketch 5

Initial Digital Layouts

Main Dashboard

Level 1 Info - Summary of all active and past shipments

Level 2 Info - Snapshot of a single shipment

Version 1 Shipping Dashboard

Level 1 Info

Level 2 Info

Shipment Details

Level 3 Info - All details of a single shipment

Version 1 Shipment Detail

Level 3 Info

Colors and Fonts

Step 1 - Color theme options

Color Option Explorations

Step 2- Theme "C" explorations - we went with the version in the lower right - the dark purple navigation bar was ultimately too overwhelming.

Color Option 1
Color Option 3

Fonts - Roboto has both proportional and monospace versions, which is good for containers numbers.

Color Option 2
Color Option 4
Fonts - Proportional and Monospace

Usability Testing and Iterations

Evolution of Main Dashboard

Shipment Dashboard version 1
Shipment Dashboard version 1

Initial version for layout and flow only.

Shipment Dashboard version 2
Shipment Dashboard version 2

Improved flow and added visual design.

Shipment Dashboard version 3
Shipment Dashboard version 3

Refined flow and minor tweaks.

Evolution of Shipping Details

SUS Scores

Original Site: 34

First Prototype: 75

Second Prototype: 87 

Shipment Detail version 1
Shipment Detail version 1

Initial version for layout and flow only.

Shipment Detail version 2
Shipment Detail version 2

Improved flow and added visual design.

Shipment Detail version 3
Shipment Detail version 3

Refined flow and minor tweaks.

The Final Product - Prototype and Specs

Wireframes

Prototype

Equll Website Demo

Specifications

Sample Pages

 

What I Learned

Major Takeaways from this Project

Entirely remote projects are doable - focus on communication!

Standardize deliverable creation before they're started.

Availability of usability test participants is key!