Windhelm 2.0

DNV GL Energy

Project - Completely redesigned experience for ageing web application. Design work phase done in order to secure funding for development.
Product /service - Used by technicians to monitor and maintain wind farms remotely. Desktop or multi-screen, control room environment.

Duration - 2 weeks
Team - Product owner, UX designer, developers, key customers
Activities - Research, user journey mapping, IA design, UI/UX design, prototyping, visual design
Deliverables - Personas and workflows, Site map, High fidelity mockups, InVision prototype
Outcome - Relaunched application with greatly improved adoption, usability and customer interes
Before and after: The WindHelm site, completely overhauled for better user experience.
User task maps. The result of interviews and work shadowing to better understand how people use the existing product.
Development team technical knowledge was high, but knowledge of users, goals and work patterns, very low. My first work involved establishing personas with the product owner. Through a short series of customer interviews and contextual inquiry studies, I mapped work flows for each persona, key goals and motivations as well appraising the existing website's performance for each customer.
Organising and evaluating stakeholder ideas by persona and user needs on the wall.
With time very tight timescales, I followed a Lean UX approach and minimised documentation, progressing through collaborative mapping and sketch sessions with the product owner and key customers. Our whiteboard wall filled with notes on user needs and goals over the course of a few days, providing the input to concept design.
Early UI sketches, exploring feasibility of new ideas in order to prioritise them for road-mapped releases.
Balsamiq UI sketches, exploring how functionality would differ across devices and user scenarios.
The redesign needed to solve some key usability issues, save time and reduce error for a series of personas with differing needs. As the existing site is not currently used on mobile, I needed to identify new user scenarios and needs that would be met by an overhauled, fully responsive site. Which personas would use mobile and to do what? Concept designs began with hand sketches and Balsamiq mockups.
Site map. Details greatly simplified product architecture and references relevant personas.
A major frustration with the existing site for all users was over-complicated navigation. I worked with the development team to establish a simpler IA - greatly reducing the number of pages and grouping them by user tasks. The site map above was made to explain this concept to stakeholders.
Illustrator /Photoshop screen mockups for stakeholder engagement.
Having followed Lean UX principles to arrive quickly at a concept design, I dedicated remaining to high fidelity mockups and a clear presentation for senior stakeholders. It was important that those outside the project understood the reasons for design decisions and benefits to customers, as well as being excited by and buying into the concept.
Mockups explaining how the design allows for a consistent experience across devices
- from mobile to multi-screen control room environments.
Photoshop /Illustrator mockups demonstrating how the responsive site would appear across different devices, including multi-screen environments.
Illustrator /Photoshop UI mockup. Desktop site showcasing Unity 3D wind farm visualisation.
Visualisation was key to conveying complex data in intuitive ways. A Unity map interface was proposed to allow monitoring staff to zoom for a global view of several wind farms, down to individual wind turbines to investigate issues.
Illustrator /Photoshop UI mockup. Tablet site demonstrating clear overview of a wind farm portfolio.
Illustrator /Photoshop UI mockup. Mobile site in use (Created by design team). 
Smaller screen sizes would not be used by monitoring staff, but by executives and other team members to stay notified of key events. The data displayed was summarised and technical details slimmed down accordingly.
Illustrator /Photoshop UI mockups. Mobile site showing quick toggle of windfarm info modes (Created by design team). 
The mobile site, seen here in an interactive InVision prototype, required new navigation controls and prioritisation of components such as summary stats and webcams, which give an immediate overview. 
Illustrator /Photoshop UI mockup. Showing flexible workspace suited to a large, multi-screen control room environment.
Users in the control room environment would be inside the application for long shifts of several hours. My research identified an opportunity to reduce fatigue and make it easier for users to keep track of high quantities of information with simpler UI layout and intelligent use of colour throughout. 
Back to Top