Case study
Caption competition now open.
Project overview
Team
Timeline
Impact
The improved UX allowed the business to pitch and win new clients.
What I did
The best case scenario!
This project was a dream come true.
I was asked to 'redesign the SaaS platform' - a huge responsibility.
I was trusted to work independently while still being open to input.
I had six months to deliver, so I planned and used my time accordingly.
If I could work on this kind of project every time, I would be very happy.
About Guru Systems
Guru Systems is a tech startup in the heat network and low emissions energy space.
They specialise in data analytics and remote heating control.
Their main clients are property developers setting up sites with energy meters and heating devices - and housing associations maintaining heating hardware and calculating energy bills.
They make their own hardware as well as software.
Pre project
Briefing & strategy
Onboarding
I was brought in by the CPO and asked to redesign the SaaS platform.
The main problems to solve were
The navigation and signposting were disorganised
Many of the user interfaces were hard to understand
The UI did not confidently portray the brand identity
The UI was inconsistent due to the absence of a design system
I came up with strategies for two projects
A design language / design system
An IA / UI audit and redesign
I came up with two project plans
A design language / design system
An IA / UI audit and redesign
Project one
Design language / design system
UI and brand audit
I conducted audits of the SaaS platform's UI - as well as the brand guidelines and primary marketing assets.
This gave me an overview of the styles, components, and page templates used in the SaaS platform - as well as an insight into how the brand image was being expressed in materials outside of the main software.
I cropped out screenshots of each UI component and made decisions around which should be redesigned, consolidated, or discarded.
Asset
Takeaway
SaaS UI
Components that serve similar functions could be consolidated down to single components.
Several components required multiple size variants to suit various types of content.
Brand guidelines
The UI colour ratio should reflect that found in the primary brand logo.
Best practice research
I have worked with design systems before - but this was my first time building one from scratch.
As part of the project - I conducted some best practice research - by looking into the biggest and best digital brands and their design systems.
Design principles workshop
Creating a new design language for a flagship product can be a delicate endeavour.
Stakeholders may wish to have a say - it's possible that not everyone will agree - and there is a risk that quality will be compromised.
The best way to cure post-design pushback and conflicting feedback is to prevent the entire thing from happening, pre-design.
I ran a workshop to allow each stakeholder to publicly express their design-based values.
They did this by showing screenshots of their favourite products - and talking about the features and what it was that made them good.
We used the sticky notes containing the design values in an affinity mapping session - each resulting group of notes was assigned an overarching theme - or 'design principle'.
I assured the stakeholders that the principles would be referred to and implemented in the creation of the new design language.
The session achieved a state whereby each stakeholder was able to see that their values were largely shared by the collective and acknowledged by the designer.
Principles
Clean look and feel
Make complex data easy to digest
Allow simple manipulation of complex data
Empower users to control their own workflow
Make key content easily accessible
Simple IA / navigation
Etc..
Design language
I created the UI design language.
I factored in the top UI related design principle - 'clean look and feel'
I adhered to the colour ratio as per the brand guidelines
I documented the design decisions
I came up with a light and a dark mode - the CPO and CEO signed off on the light mode.
Design system
I made the system in Figma.
It contained three primary elements.
Styles
Components
Documentation
I did this alongside the IA / UI redesign - so I was adding components as I went.
I published the system to Guru's Figma account and it was used on design projects going forward.
The end file contains around twenty pages.
I estimate my Figma skills to have progressed from intermediate to advanced during this process.
Read more about the design system in this LinkedIn post
Project two
IA / UI redesign
IA / UX audit and interviews
I took a screenshot of every UI in the site.
I put them in a Miro board - and tied them together with lines to create a wireflow.
I annotated each screen - noting neutral observations, usability concerns, questions to ask, and ideas for improvement.
I held question and answer sessions with the product managers for each service to help broaden my understanding around the users, use cases, problems to solve, and ideas for solutions and new features.
Area
Takeaway
IA
A simplified and easier to navigate site structure was possible.
Each service data table could be paired with a dashboard to present the user with high-level data.
UI
The breadcrumb trail would need to be rebuilt to accurately correspond to the page hierarchy.
The data table UIs would be easier to use if they featured search and filters.
The heating control dashboard UI could be restructured for easier use.
Content
Unnecessary jargon could be replaced with simple language.
How-to content could be offered to help novice users understand the technical subject matter.
This is, of course, a summary of the key takeaways.
The user research that wasn't
I requested access to users for research - the business declined - for the following reasons.
They had a small base of regular users - and did not want to narrowly skew the product in their favour
All users would be trained by client services - so client services would stand in to provide input
The SaaS platform contained five services.
Service
Main function
User type
Proposed research
Allowed?
Verify
Verify meter installation
One-time
Day on-site / shadowing
Integrate
Configure heating hardware
One-time
Remote interviews
HeatSmart
Monitor and control heating
Regular
Day on-site / shadowing
Pinpoint
Identify network problems
Regular
Remote interviews
Pay
Bills and payment
Regular
Out of scope
-
Verify
Main function
Verify meter installation
User type
One-time
Proposed research
Day on-site / shadowing
Allowed?
Integrate
Main function
Configure heating hardware
User type
One-time
Proposed research
Remote interviews
Allowed?
HeatSmart
Main function
Monitor and control heating
User type
Regular
Proposed research
Day on-site / shadowing
Allowed?
Pinpoint
Main function
Identify network problems
User type
Regular
Proposed research
Remote interviews
Allowed?
Pay
Main function
Bills and payment
User type
Regular
Proposed research
Out of scope
Allowed?
-
The user research that was
The 'Integrate' service was brand new - and I was able to design it with outside user input.
I consulted with an external subject matter expert - who had previously been in a heating engineer role similar to that of the upcoming users.
I used the opportunity to learn about potential users, their roles, goals, likely pain-points, and what functionality and content they would require.
I verified my UX / UI work with the external contact across five rounds of design and feedback.
Information architecture
I took all of my learnings from the previous stages and applied them to the following..
A sitemap with a completely restructured page architecture
A navigational Figma prototype to demonstrate the new IA
A list of UI requirements to rejuvenate poorly performing interfaces
I had the CEO and CPO sign off on all three artefacts before starting the final design phase of the project.
UI design
I applied the design language and system to every UI.
I folded in my learnings from the previous phases to improve the content and functionality.
I validated the designs with a small group of stakeholders and customers.
Service-level dashboard - showing key data from the corresponding data table.
Heating device asset table - with search and filters - and - bulk action functionality.
Popup modal with heating device activity log - a new feature which I designed outside the main project.
Single dwelling heating dashboard - with heating controls and boiler performance cards.
Heat network performance data vis - rehoused inside a popup modal as part of the restructured IA.
Projects retro
What was achieved?
Problems solved
Order restored to the navigation & signposting
An improved UI with a better user experience
A bolder and more on-brand design language
Consistent UIs with a design system
Project takeaways
Save time with Figma - and - take a risk on a workshop.
I learnt a lot about Figma during this project - it's a great tool - and as a designer I can't sing its praises enough - I used auto layout on the design system components - but not on the UI page templates - for some reason at the time I thought this was the best approach - I know better now, so next time I will have all the page template elements locked place in with auto layout.
I was on the fence about running the design principles workshop - I don't want to waste people's time. The main reason to run the workshop was to negate design language push back or trampled feelings.. it's possible that the stakeholders in this project weren't ever going to push back on my work - but I think on balance it was worth taking up those couple of hours.
Next case study
Click anywhere to close
Click anywhere to close
Click anywhere to close
Click anywhere to close
Click anywhere to close
Click anywhere to close
Click anywhere to close
Click anywhere to close
Click anywhere to close
Click anywhere to close
