Membership website for engineers
Work > Membership website for engineers
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.
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.
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.
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.
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
View content on any device both offline and online
Become registered with a professional certificate
Having gained feedback from users, I was able to create information architecture deliverables, discuss these with the client and test with users.
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.
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.
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.
- Wireframing and prototyping remaining user journeys
- Usability testing with key audiences
- Design iterations and usability testing loop
- Website build
- Ongoing analytics post launch