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.
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"
02 The Approach
This project needed to be done quickly with minimal front-end resource.
Good - Cheap - Fast
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.
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
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
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. ​
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.
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
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
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
11 Delivery
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
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
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.