top of page

7 bridges 
Platform refresh

Client 

Industry

7 bridges

Logistics

Tech

Skills demonstrated

Design leadership & influencing 

UI Design - Information architecture   

Give the platform a facelift. Transform it from a bootstrap platform to UI that the team could be proud of.

Despite the 2020, 7bridges was gaining new customers and moving towards Series-A fundraising, but its engineer-built UI was basic and outdated. It a rapid, resource-efficient upgrade.

7b mock up.png

01 The challenge

The existing platform UI had been built and designed by engineers. It was a bootstrap theme with no branding applied and a very dated look and feel. 

7 bridges was heading towards Series-A funding. It was time to give the platform a redesign to reflect the ground-breaking logistics tech brand we were, making us  presentable to investors and potential customers.

 

"We had a great new brand identity and we needed our product interface to be bought into 2020 and reflect that vision"
Screenshot 2022-06-19 at 21.17.54.png

02 The Approach

This project needed to be done quickly with minimal front-end resource.

 

Good - Cheap - Fast
double diamond.png

This project held a lot of potential for scope creep. In order to get a good outcome we needed to be precise about the project scope priorities and timeline. The double diamond approach looked broadly like this:

1. Problem discovery

The site was in need of significant improvement but we had to settle for a refresh rather than redesign. We needed to get a view of pain points and how they were impacting the existing users and stakeholders (in this case, the sales team,. future customers and investors)


2. Define
Prioritisation and compromise. This is where we narrowed down what we could do into what we should do. Where can we make the most impact? What would the MVP look like? I involved as many stakeholders as possible in the process.

 

3. Develop/Design
Systematically working through the design priorities. I worked closely with the front-end and back-end teams. Daily catch ups meant everyone was aligned. 

4. Deliver 

Input from our CS team told us that this release was going to have a big impact on our users. We therefor had to be strategic in our approach. 

03 My role

This was a project I championed early on at 7bridges.. I was the lead designer and responsible for working with the co-founder and various stakeholders to understand what the priorities were and how it should be approached.

Screenshot 2022-06-15 at 18.41.24.png

04 Discover 

Exercise 1 / Platform audit

The objective was to get a birds-eye view of the platform, information architecture, pages and content.. No record of the platform existed, so this was a useful exercise for future projects also. 

 

Approach 

I worked through each section of the platform and created a record in excel of each page, component and piece of functionality. Accompanied by a description and a screen shot. I also noted possible pain points for exploration including both visual and functional issues. 

Output and learnings

A detailed excel document. This would form the basis of our prioritisation. It would also be used as a starting point for many of our future projects

Screenshot 2023-03-28 at 12.44.44.png
Exercise 2/ Data analysis 

During the audit I had used my designer's eye to locate UI and UX problems throughout the platform. Now it was time to use the data to locate user pain points.

 

Approach 

I used a combination of Heap Analytics and Full Story to locate user pain points, specifically where were :

- The 'user time on task' data was exceeding the OKRs 

- The most rage clicks

- The highest number of error notifications raised

- The highest frequency of users clicking to go back

Output and learnings

The data showed us that the majority of usability issues existed in the send booking flow (where users booked shipments). This was unsurprising as it was the most frequently used part of the product and involved varying levels of complexity and room for error. The most common issues were:

- Errors being made at some point in the flow. Users then had to click back to locate the error

- Users not being able to locate the correct pages in the navigation bar

- Long dwell time on pages. Full story enabled us to observe mouse movements showing confusion as to where things where. Particularly calls to action

Screenshot 2023-03-29 at 12.14.14.png

05 Define

Now it was time to prioritise and define objectives. I ran an internal workshop that involved everyone from senior leadership through to sales, marketing, data and engineering so we could get input from a diverse group.  

Approach

I presented a detailed breakdown of my findings from the discover phase; A list of user pain points and design issues. 

I then asked everyone to assign a score to each pain point relating to four factors: 


REACH, IMPACT, CONFIDENCE, EFFORT

We then aggregated the scores and prioritised the list. 

Output

I found this to be a useful tool to get an informed cross functional perspective and understand the complexity and challenges that the engineering team would face.

However it had limitations and needed a subjective design eye to  finalise the list of priorities so that we could achieve the 'good enough' outcome we were looking for. 
 

Screenshot 2022-06-19 at 20.45.55.png
Screenshot 2022-06-17 at 18.35.24.png

06 Design plan

After an extended period of discovery, I had a list of design priorities that would be the focus of the project. 

This case study details the elements in bold. 

- Colour Palette update
 

- Menu and navigation redesign
 

- Shipment booking workflow and stepper
 

- UI re-skin including CTA redesign
 

- Changes to page architecture so there was consistency across all pages

07 Colour palette

Translating the new brand colour palette to digital required various stages of accessibility testing (AA standard was our goal at this stage). The aim was to create a digital palette and standard that provided:

01

A baseline of default colours

That could be built on as the product evolved. For example as the new AI elements were introduced additional identities could also be brought into play.

03

A fresh look & feel

Using the primary colours in a way that promoted a modern and fresh product that moved away from the corporate monotones of the existing design. 

02

Accessibility 

Understanding how colours would work together and relate to the AA accesibility standard. Coral was chosen as an accent colour but was problematic when used alongside other colours and white smoke. 

04

Feedback colours

To support functionality and communicate workflow and error states. I had to develop a secondary palette.

Core.png

08 Navigation

The data had flagged that users were struggling to locate items in the menu and were clicking in and out of pages. The navigation structure was therefor a high priority for re-design both in terms of architecture and visual design.
 

Solution

- Re-organised the menu hierarchy. 'Send' representing the 'sending' of  a shipment was given primary status as a key action for users. All other menu items to be positioned as secondary administration items.

 

- 7 bridges logo placed in the masthead. I felt that by using customer logos we were lessening brand impact and essentially white labelling our product. I carried out research on approaches from other Saas organisations and a quick survey across key customers to support this decision.
 


- Implemented a new colour palette and typography, gave the bar in white smoke and a drop shadow.

Pain points:

- No clear hierarchy or structure

 

- Use of client own logos in place of

7bridges logo

- Typography that lacked impact

Screenshot 2022-06-24 at 10.09.33.png

9 Shipment booking flow

The shipment booking flow was the frequently used part of the product. It took users from the creation of a shipment booking to selecting the send address through to rates and booking confirmation.

 

Our data had shown us that this was where the highest number of user errors existed and where the longest average time on task was significantly higher than our OKRs. 

Hypothesis

The booking flow was long and there was a lot of room for human error. We needed to work on the validation, so we could surface errors and help users fix them quickly and easily. 

Research

I used Heap to observe customers using the booking flow. There were many instances where the user for right to the end of the flow and was told that the booking had failed due to an error, The user would then have to click back through the flow to locate the error. 

Solution

One of the solutions i developed was a progress bar that would show the user where they were in the flow and highlight any input errors at each page transition. It would also enable users to click easily between steps if they wanted to review or amend their inputs.

Output

I commissioned a set of icons and designed a booking progress bar that provided simple feedback as to:

- An overview of the booking steps

Use's current location
- Successfully completed steps

- Input errors

Screenshot 2023-03-28 at 16.05.43.png

10 UI reskin 

We wanted to apply our new set of brand guidelines to the platform to enhance and modernise the UI and bring it in line with our marketing site.

The key was trying to do the minimum amount of change for maximum effort.

 

We also wanted this to be the start of a new era where we began creating proper design documentation. 

01

Applying the new typeface

Meant translating the brand font into a typescale that would function in the platform and its components e.g. data tables, buttons and navigation. 

03

Button states

Reworking button states was a big step forward that helped highlight primary CTAs. I also implemented a sticky button bar so that users didn't have to scroll to the bottom of long pages

02

Icon set

The introduction of a functional icon set that could help enhance the design and usability of the front-end

04

Grid background

One major change to layout was the use of the grey grid as a background and content panels. This helped to seperate difrerent areas of workflow

Step 1 / Navigation bar

We replaced the old navigation bar with the new one, to give users a feel for the new design and brand.

Step 2 / New architecture

Which repositioning of copy and tables on certain pages. The old bootstrap UI remained so the changes were hardly noticeable to users.

Step 3 / Colour palette and components

This was the final step when the new UI came fully into play

We knew this was going to be a high impact release for our users. We were changing the front-end of a platform they used daily in their warehouses and offices. We developed a strategy to try to soften the impact. A phased approach - We decided to release the redesign over 4 phases.

In addition we communicated the changes to users via:

 

- Phone calls to team leaders

- In-product notifications (Beamer software)

- Post release feedback forms  

11 Delivery  

Screenshot 2022-06-17 at 13.30.30.png

12 Results & impact

The impact could be felt both internally and externally: 

1. Accolades from the wider team 

Who felt we had taken the product to the next level in maturity and standard.

2.  A more streamlined way of working

We had a new design system and component library in Storybook and a new more streamlined way of working that made the Front-end team's lives easier. 

3. Positive feedback from power users

As self proclaimed 'non-techies' a number of users in warehouses and customer service teams said they appreciated the new look. 

"We can now feel pride when presenting the platform to external stakeholders"​

13 My retrospective

This was a challenging project that carried big consequences for the business. I came away with lots of learnings:

  • That 'good enough' was a start up philosophy I had to get used to. Being able to pinpoint where thrifty design could effect big impact was a valuable skill

  • Working closely with the front-end engineer was priceless. It enabled us to iterate as we went and support each other when challenges arose

  • Data analysis in Heap and Full story was a steep learning curve in this project.

bottom of page