Chapter three · 2020–2021
HSBUpdating HSB.se
Restructuring HSB's website block by block, from survey analysis and phone interviews to wireframes, a Sketch component library and Episerver blocks.
Areas
- Survey analysis
- Interviews
- Paper sketches
- Wireframes
- Flowcharts
- Episerver
- Lo-fi prototype
- Usability testing
- Requirements analysis
- Design reviews
- Functional testing
At a glance
- Problem
- HSB's existing website was hard to use, and the project had no clear way of gathering requirements.
- Approach
- Survey analysis and phone interviews, then paper sketches, wireframes, a Sketch component library and remote usability tests, repeated for each of six site sections.
- Outcome
- Detailed wireframes, UX flows and specified Episerver blocks and page types, with design reviews and functional tests all the way to launch.
- 6site sections, each taken through the full process
- 7steps in the process, 3–7 repeated per section
The assignment
The assignment was to update HSB’s existing website by improving its structure, content and design. My main tasks were to create wireframes, build a component library in Sketch, and run usability tests and interviews. I also did design reviews and functional tests on work as it was being built.
The project was split into six blocks, matching six parts of the website, and the project group worked through one block at a time.
Understanding the problem
To understand what felt problematic on the existing website, I did an in-depth analysis of an earlier survey. I followed it up with phone interviews with people who used the site.
I also stayed in close contact with the project manager and the strategist, to bring users’ needs into the room and take in the client’s wishes and requirements.
How I worked
Steps 3–7 were repeated for every new block. As developers built the new website, I ran design reviews and tested the functional requirements, to make sure the behaviour and design matched what we expected.
Requirements handed over
Went through the client's requirements with the project manager and strategist.
Research and interviews
In-depth analysis of an earlier survey to see where problems occurred on the existing site, and phone interviews with users to understand why. Benchmarking of similar functionality.
Paper sketches
Quick paper sketches and regular check-ins with the project group for fast feedback.
Wireframes
Wireframes and UX flows in Sketch, based on the paper sketches, and a component library in Sketch.
Lo-fi prototype
Digital lo-fi prototypes in Sketch and InVision.
Usability testing
Remote tests of the lo-fi prototypes over Google Hangouts, then a summary, a presentation of results and suggested improvements.
UX to visual design
Close collaboration with the UI designer to turn the wireframes into finished design.
Challenges
Remote work
The project was carried out remotely, so I couldn’t meet users in person. Instead I ran usability tests and interviews over video calls. I booked extra time with every participant to allow for the delays and misunderstandings that happen more easily on a call than face to face. It gave me new ways of working that I’ve kept since.
Blocks and page types in Episerver
Episerver was the CMS, so I designed new blocks and page types around it. That meant taking an inventory of the existing blocks and page types to understand the constraints, and to decide which blocks to reuse and which to create. I hadn’t worked with Episerver before, so I stayed in close contact with the developers to discuss functionality and solutions.
Requirements
The business’s requirements emerged along the way, and there was no clear requirements documentation or process for gathering them. Together with a technical project manager, I helped compile the requirements, and I took part in discussions with strategists, the client and developers to work through requirements and possible solutions.
Result
I built a component library in Sketch so components could be reused across the updated site. From it, I delivered detailed wireframes and UX flows, and specified the blocks and page types in Episerver. I worked closely with the technical project manager and developers to find the simplest way to break the blocks and page types down.
The team especially valued that I was involved all the way, from project start to design review and functional testing. The client and the project group were very happy with the work and the collaboration.
