Reading time: ~ 20 minutes
The detailed version offers a deeper dive into the design process, also covering additional information along the way.
Summary
ATOSS's web-based workforce management tool is a leading solution in Europe. However, customers and stakeholders felt that its design had become outdated compared to international competitors. Over the years, contributions from various designers resulted in an inconsistent design. A redesign was long overdue to ensure it remained competitive on a global scale, both now and in the future.
In collaboration with the Head of Product Design and the development team, we decided to redesign the entire interface as part of a framework transition project running in parallel. This redesign impacted every aspect of the user interface.
I led the project, overseeing the redesign of all reusable design components from start to finish. I also ensured all necessary design specifications were delivered on time to enable smooth and efficient implementation by the development team.
The first step was to evaluate the scope of the redesign, deciding whether minor aesthetic changes would do the trick or if a more comprehensive overhaul was required. However, the available development capacity for the project had not yet been determined.
Competitor Analysis and Field Research
To move forward, I needed to understand the design standards and quality of our main competitors. I conducted a competitor design analysis, which revealed considerable differences in interface quality compared to ATOSS. The positive takeaway was that we weren't alone in facing design issues. Additionally, I conducted field research to identify best practices and determine current standards for good interface design. My professional UI Design Certification course was particularly useful here, as it helped me to understand how much our current interface deviated from a good standard.
The major part of the interface was designed by an agency 7 years ago before the actual product launch. However, over time, multiple in-house designers added their personal 'touches' whenever new features or improvements were needed, leading to a quite inconsistent design. My goal was to see how far off our current interface was from the ideal standard.
Stakeholder Interviews for User Insights
Direct interviews with customers to understand their pain points were not feasible due to time constraints. Given that the redesign needed to be completed by the final release of the new framework, there was immense time pressure on the entire project. If I had followed ATOSS’s established research recruitment process, it would have taken weeks to talk to a customer. This outdated process needs to be revised to make user-centred design more dynamic and agile in the future.
However, it was crucial to gather 'user' feedback. To move forward while still following user-centered design principles, I held internal stakeholder interviews with the Product Management, Product Marketing, Sales, and Consulting teams to at least gather some actual user issues. These stakeholders interact with customers daily and provided me with valuable insights.
Developing Initial Design Concepts
It was time to determine how much I could actually change in the interface with the available development capacity. Based on the competitor analysis, field research, stakeholder interviews, and brainstorming sessions with colleagues, I created three different design studies for the interface's homepage, each varying in redesign scope:
Version 1: Minor changes like rounded corners or more whitespace. Colours and typography will remain the same. Would have no effect on the framework project's timeline. Also, the smallest recognisable impact.
Version 2: Changes to colours and typography, as well as structural and logical changes to some components. This might have affected the project’s deadline but would definitely be noticed by users (in a positive way).
Version 3: A complete overhaul, including changes to navigation and information architecture. This would definitely have delayed the framework project’s deadline and seemed like "overkill", though it was still worth considering.
I spoke to the frontend development team to estimate the rough implementation efforts for each version. Something I’ve learned over the years is, that it's better to show up with concrete numbers in your presentation, rather than just colourful imagery, if you want a timely decision on a specific topic.
I presented the design studies to higher management. The outcome was that we had to find a solution that addressed as many user problems as possible but (of course) without affecting the framework project’s deadline at all.
To understand my available development capacity, I had to ask the development team how much “spare” time they basically had per component. Based on that, I had to create the best possible design solution.
That’s where some basic knowledge about how code works came in very handy. It helped me to know how far I could go while still staying within the spare capacity.
After talking to the development team, it was clear that we could change not just corners and spacing, but also colours, fonts, and states. Basically, anything that did not affect the components' logic and layout.
I didn't see this coming!
During my discussions with the development team, we discovered that a design system from three years ago had only been partially implemented - ouch! This led us to realize that both the visual design and the entire design system needed an update. Tackling such a comprehensive overhaul was demanding, but it made the project especially rewarding, as we had the chance to create something truly cohesive from scratch.
The design system update is a standalone case study featured in this portfolio, presenting the entire process and its impact.
Redesign Approach
To manage the development workload and meet the transition project's deadline, the development team and I agreed on the following:
Visual design improvements with a focus on best practices and accessibility.
Copywriting of hardcoded text within components to improve understanding and affordances.
Potential structural and interactive changes to complex components to enhance usability.
The general structure, navigation, and layout of the software and its interface components will remain unchanged.
It was time to roll up my sleeves and dive into the details. For simpler components, I jumped straight into high-fidelity designs. While this wasn’t ideal, I didn't have the luxury of perfecting every button or form field, with nearly 70 components to redesign in just a few weeks.
For more complex components, like calendars and charts, I started with low-fidelity designs, as they needed more focus due to their complexity. Regular feedback sessions with my design and development colleagues were critical, ensuring the designs had full team support and were technically feasible.
Specification and Handoff
While redesigning, we finalized and handed off components to the development team as soon as they were ready. I set up a process where every design needed approval by the responsible developer before documentation to avoid technical hiccups.
My colleague Ceren's support was invaluable, helping to create over 80 design specifications on time!
Final Result
I redesigned 67 interface elements, resulting in over 80 design specifications, all completed within approximately 8 weeks, including adaptations to the design system. All identified user issues were successfully addressed.
The redesign follows well-established design patterns to make it more intuitive.
Natural and soft shapes make it enjoyable.
Consistent design throughout the interface makes it more valuable.
Neutral interface colours prevent user confusion when communicating information through colour codes.
All text-to-background contrast meets at least AA standards according to W3C in every part of the software.
As part of the success criteria, I initially set clear metrics to measure the redesign’s impact. This included a reduction in UI bugs, faster development times, and improved user experience through fewer user errors. Though the new design's release is set for 2025, we've already received positive feedback, which confirms these goals were successfully met.
The design is seen as more harmonious and intuitive. Implementation is also more efficient, saving 10-30% in development time and reducing the number UI bugs per component by sometimes up to 50%.
Next Steps
As a next step, I would definitely involve real users, taking an iterative approach to particularly critical and complex use cases in the software. Using A/B testing to validate the new design and, in the event of problems, make specific adjustments with the help of user interviews before the final release of the framework in 2025.