SOE in progress

Membership website for engineers

Work > Membership website for engineers

SOEAction.jpg
 

My invovlement in the project

  • UX research
  • Workshop facilitation
  • Functional specification documentation
  • Project managing the discovery phase
  • Sketching concepts
  • Wireframing and prototyping
 
 

Redesigning the existing website

The exsiting website was built over 7 years ago and looked extremely dated. It was not responsive and information architecture was led by organisational structure rather than user-centred design.

 
 The homepage of the previous website was cramming in a mixture of training schemes, membership organisations and charitable campaigns without clear separation or visual heirarchy of elements.

The homepage of the previous website was cramming in a mixture of training schemes, membership organisations and charitable campaigns without clear separation or visual heirarchy of elements.

 

Analytics

Using Google Analytics and Hotjar, I was able to make some assumptions about the positioning of navigation links and the content on pages for logged in users.

 
 Heatmaps showed the need for a reduction in text content and the most useful links to be prominently displayed.

Heatmaps showed the need for a reduction in text content and the most useful links to be prominently displayed.

 Analysis of homepage to compare frequency of visits to target links and prominence of position

Analysis of homepage to compare frequency of visits to target links and prominence of position

 
 

CRM integration

In tandem to the design and build of the website, a new Microsoft Dynamics CRM build was commissioned and the website specification needed to consider complex data requirements and integration with the new CRM system.

 
 

User research

The agency won the brief based on the rebuild and integration with CRM. I later persuaded the client to undertake user research in order to verify the brief and provide a user-centred design that catered for the organisation's multiple audiences.

 
 
 

Assumptions and design decisions

  • 70% of users were able to find the information they needed on the old website meaning a radical deviation from the current information architecture would be inappropriate and upset the schema already understood by regular visitors.

  • From the 30% of users that said they couldn't find what they were looking for, most of the feedback was about specific specialist.

  • Some very pertinent feedback related to key user journeys such as "how do I join?" and "I want to see events in my area."

 
 

Information architecture

Having gained feedback from users, I was able to create information architecture deliverables, discuss these with the client and test with users.

 
 Documenting the tagging structure in a taxonomy document showed that the topics needed to be simplfied and grouped more efficiently. It was clear that a card sorting exercise was needed.

Documenting the tagging structure in a taxonomy document showed that the topics needed to be simplfied and grouped more efficiently. It was clear that a card sorting exercise was needed.

 

The problem of multiple brand channels within a single website navigation

Previously, it wasn't clear to new users how the three brands under the SOE umbrella related to the organisation as a whole.

We had established that for some users, the primary user journey would be to pick a channel as they would only be interested in content related to that sector.

The new design would allow interaction with the brands, which would be discoverably by browsing. Users would also be able to use the main site navigation to navigate to more general content.

 
 Early concepts for the solution for the website navigation in desktop view. Content specific to region was also important to users, on top of the allowing them to select their sector. 

Early concepts for the solution for the website navigation in desktop view. Content specific to region was also important to users, on top of the allowing them to select their sector. 

 Making sure the mobile menu was intuitive enough for users to understand the changes they were making to content on the page was a challenge.

Making sure the mobile menu was intuitive enough for users to understand the changes they were making to content on the page was a challenge.

 
 First iteration homepage wireframes for desktop view

First iteration homepage wireframes for desktop view

 More detail added to the wireframes

More detail added to the wireframes

 

Prototyping

Using a Sketch > Invision workflow, I was able to rapidly prototype the concept I had explored by sketching the idea, which was initially tested in the studio and then tested with real operations engineers in the wild.

 
 Clickable prototype created using Sketch (Craft) > InVision workflow

Clickable prototype created using Sketch (Craft) > InVision workflow

 

Design system

Having built several websites for similar organisations, common elements and templates were easily copied and re-styled. Working on several website projects simultaneously allowed us to build on the existing library by adding elements that showed potential for re-use. For example:

  • Log in screen
  • Forgotten password process
  • Search template
  • Knowledge library


Communicating the new style to front end developers was acheived by pointing them to the appropriate elements in the library, sharing annotated mock ups and a style guide created by a UI designer in the team.

 
 
 

The functional spec

The project was delivered in sprints but limitations due to the structure of the organisation and their budget meant that instead of delivering via a fully agile process, an extensive functional specification document needed to be created. The document was signed off before the build phase began and detailed all user stories for front end and back end users.

 
 
 

Next steps

  • Wireframing and prototyping remaining user journeys
  • Usability testing with key audiences
  • Design iterations and usability testing loop
  • Website build
  • Ongoing analytics post launch