︎

DIVYA

Mohan 


︎   About Me
︎   Get In Touch 
︎︎︎   LinkedIn
︎︎︎  Resume

 



American Expediting Web Redesign


Project Duration
may 2021 - june 2021



My Role
Project Manager
UX Researcher
UX Designer

The Team
Aaron Lee
Skills and Tools
Figma
Rapid Prototyping
Usability Finding Templates
Think Aloud Protocol
Heuristic Evaluation



The Problem


How can we bring American Expediting’s website up to speed with their competitors and emphasize the importance of their work transporting biological specimens and vaccines during the covid-19 pandemic?

  • American Expediting’s website hadn’t been updated in some time. It remained text-heavy and hadn’t reflected their transition to biological science work
  • Their current website is not responsive, contains dead links, and doesn’t center their priorities in hiring contract drivers and centering their work in biological sciences
  • American Expediting needed not only a website redesign, but new image sourcing, brand guidelines, and a style guide that they could follow to launch a site revamp by the end of 2021


our proposal

Working with the AE
team to understand their visions and expectations for a website, we can come up with a fully realized color scheme and style guide that can easily be transitioned to the web and print materials





The Solution


Americanexpediting.com is now live! 

View the final version of our redesign on any screen size ︎︎︎

DESKTOP



MOBILE




How We Got Here


Identifying the Problem


We conducted an expert analysis of the website and combined a heuristic analysis with think alouds conducted with six users

Think Aloud Protocol

Using the American Expediting website as it was, we asked users to complete a few simple tasks that were core to AE’s priorities for the site - to hire new drivers and make clear their what their capabilities as a shipping company were. We asked users to (1) Find two ways of scheduling a pick-up (2) Name three items or things that can be shipped with American Expediting (3) Find the name of American Expediting’s online shipping platform (4) Initiate a job application via the website (5) Find the closest American Expediting shipping center.


1

unclear visual / information hierarchy on text-heavy pages


Users had difficulty locating the information they needed on text-heavy pages with unclear headings and visual cues.

2

lack of responsivity


The site breaks at a narrower desktop size and does not maintain responsiveness throughout. At narrower screensizes, menu items are lined up vertically and are difficult to read. In this day and age, it’s imperitive that content is just as easy to view on any and all screen sizes.


3


ambiguity in navigation menus, cues, and colors


Users occasionally confused the vertical menu with a drop down, found the navigation unclear, and were thrown by alarming color cues (i.e. red highlights that would generally indicate a problem).

4

broken links and functionalities


Several aspects and functionalities on the site were broken, including the live coverage map, twitter link, and chat feature, with no indication to users of the system status or how long these features would be offline.


Jobs-To-Be-Done

The entire purpose of AE’s website was pivoting to highlight their work in life sciences which, up until now, had taken a backseat on their website. We could outline these new objectives through “jobs to be done” for multiple types of users who would access the website. For a utilitarian site such as AE’s, we found this a more logical approach than persona development.


existing Customer


Expand customer's knowledge of the service American Expediting provides


Prospective customer


Introduce and emphasize AE as a reliable provider for time critical delivery



prospective Employee / contractor


Present career opportunities and workplace values and culture

Site Mapping
Because two of these chief user findings were rooted in the structure of the website itself, we needed to return to the information hierarchy and develop a clearer outline of the different functions and priorities of AE’s website. Over several conversations with the AE team, we developed a final Information Architecture/Site Map from which we could begin building out separate pages.
This sitemap went through multiple revamps as we worked with AE to revamp and realign based on their priorities.


low-fidelity prototype


Our low fidelity wireframes were intended to give a rough idea of the information we envisioned on each of the main pages. We also reimagined the header as having two separate levels, another way of adding hierarchichal cues to the website, with the bottom level being fixed on scroll so that the most important menu items would always be available.

Header and Footer



Initial Screens



Typography

Compared to the old website, we converted all fonts to clean sans-serifs and made use of iconography, grids, and cards to break up the previous text-heavy pages that read more like a document. 

Responsivity

Responsive design was also a key concern. We drew up screens for a mobile version as well and started considering breakpoints to ensure a fluid, responsive experience.



mid-fidelity prototype


Playing With Color

Receiving approval of our initial screens with some suggestions for restructuring of the heading and individual page content, we moved ahead to defining a color scheme for a mid-fi iteration. Since color was both a constraint, in that AE didn’t have plans to recreate their logo, and an important point of change, with the use of red, a “flagging” color disrupting the information hierarchy on several pages, it was something worth nailing down in an earlier prototype. 

We decided to minimize our use of red only for calls to action and bump up the use of blue, since it is a universally pleasing color and meshes well with the cool colors often used in life sciences. Every step of the way, we gave our clients 3-5 options to choose from.



Of these the second was the most popular. The swerve indicated movement - perfect for a shipping company, and the light blue coloring was a good blend of subtle yet distinct for the secondary nav menu.


We provided color schemes for the site as a whole as well. We decided to steer away from any pinks or reds. While the AE team had initially wanted greens and light blues akin to other life sciences websites, we presented them with the third option, using shades of blue and primary colors. This would be the basis for our final iteration. The use of blue and yellow provided enough of a pop of color but didn’t clash with the red of the AE logo in the way the green shades did.



Around this time we also began collecting stock images after talks with our clients regarding the mood and tone they wanted to reflect through the images on their site.


high-fidelity prototype


With our color scheme and fonts defined, we brushed up on images, and considered interactivity for our final prototype.

Carousel Hero Image
A rotating hero image on main pages will modernize the website and add a point of introduction and interest.



Button Hover States
We defined hover states for light and dark sections of the website to indicate what could be clicked and interacted with.



Sticky Header
A fixed header will ensure that the most important menu items stay accessible. It also allows for an additional way to convey hierarchy in the stacked header

Responsivity

We transitioned our mobile prototype to high-fidelity and supplemented it with guides on how we envisioned site and image breaks on a tablet version.

MOBILE



TABLET and DESKTOP



final iteration︎︎︎


Our final prototypes were distilled into a cohesive style guide that could be passed on to developers for an easy transition from Figma prototype to responsive website. The guide outlined items such as:

  • Information architecture
  • Color scheme and typography guide
  • Image and site width breakpoints
  • Grids for desktop and mobile
  • Image sourcing information including links and prices (not available to public)

The version of the site we designed is still active today!