SOE

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.

 
 Interviewing both users and internal stakeholders from multiple audiences was invaluable for establishing a balance of designing for users and considering business goals.

Interviewing both users and internal stakeholders from multiple audiences was invaluable for establishing a balance of designing for users and considering business goals.

Adam.png
 Mapping my findings from user interviews helped me establish themes based on user goals and user problems

Mapping my findings from user interviews helped me establish themes based on user goals and user problems

 
 

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.

  • I mapped the primary audience of 'Members' problems to 5 key themes

    • Isolation in their job in the real world- the need for connecting to similar users online

    • Insufficient member services online - Current functions are insufficiently presented and don't function well

    • Content - Unable to find up to to date content that was not biased towards one of the three sectors. Content on the current site appears to be only aimed at older and more experienced members

    • Navigation - unable to find benefits, courses, renewal, membership information, CPD information

    • Visual design and brand is not appealing - users felt that the SOE acronym was easily confused with Special Operations Executive, the brand was boring and bland, there's too much text andthe mobile experience is non-existent

  • I summed up the desires of members in 7 key points

    • Find technical info

    • Receive reminders about what they need to do to maintain their status

    • Gain knowledge and skills

    • Networking

    • View content on any device both offline and online

    • Progress career

    • Become registered with a professional certificate

 
 

Primary personas

Secondary personas

Information architecture

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

 
 Taxonomy

Taxonomy

 Sitemap

Sitemap

 

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.

 
 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

SOEEarlyWireframes.jpg
 

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