UX
UI
design system
We began by holding workshops with key stakeholders at Amey. These workshops provided us with these key takeaways:
Many competitors were imitating each other and this was an opportunity to set Amey apart visually.
Amey had many different audiences so we would need to make it easy for each type of user to meet their goals.
Their current sitemap was not scalable and did meet their requirements for growing and reorganising their services.
Whilst a visual designer began working on refreshing Amey’s brand, I addressed the issues with the sitemap. This involved ensuring each key audience would easily find information relevant to them. E.g. potential investors could easily find company information in the About Us pages, government agencies would easily understand what services Amey offer and within which markets. This determined the items in the main navigation.
A key consideration was ensuring that each audience could move around the site to meet their specific goals. Therefore, I fleshed out the personas that we explored in the workshop and created user-flows for each of them to help determine what links would be required on various pages. Cross-linking components became very important to the overall site approach.
I then moved onto wire-framing. As I was working on this stage at the same time as the brand designer was considering style I took this into account as I was wire-framing. Perhaps unorthodox but we were under a very tight time constraints and this greatly sped up the process.
Once the brand direction had been signed off we started producing hi-res mock-ups and explored how the components would look with the new visual style. The style was clean and minimal with a typographic approach.
A key challenge was to take this original visual design and turn it into a design system that used no more than 25 components. I put together the entire design system in just under 2 weeks, using a page per component that incorporated component specifications and behaviour, which was regarded as a major achievement.
I also explored some animation concepts for the site, which we will look to build in a Phase 2.