❶ / Summary
Significant resources can be saved by transforming information into digital systems. Healthcare is an ideal example where digitization has real impact, as clinical staff require quick, reliable access to patient information, documents, and more.
Epro addresses this need as a web-based information system for clinics and hospitals. It serves as an electronic patient record (EPR) solution, used by 15 NHS trusts across England with over 22,000 users at the time. As the first in-house UI designer at the company, I managed the UI design system and created designs for new features.
The Challenge
The company was successfully running an older version of the system and developing Epro Modern, its new iteration. However, the existing UI component summary (originally created by developers) was insufficient for effective design team collaboration. There was a need for greater design flexibility, clear design rules, and consistent patterns, although a full product redesign was not within scope.
The Solution
We enhanced the UI style guide for Epro Modern, refining the grid system, spacing rules, typography, color palette, icons, UI elements, and templates.
This improved design system enabled designers to create new feature designs more efficiently, with greater variant options. Overall, these enhancements boosted UI consistency and usability. Working within an agile team, we designed several new features leveraging the updated style guide patterns.
My Role & Participation
UI Designer
- Managed and extended the UI design system using Sketch, Illustrator, and Adobe XD.
- Collaborated on feature design by producing high-fidelity mockups (ideas were led by the product owner and senior developers).
- Prepared design specifications for developers and ensured accurate design implementation.
❷ / Process
1 Exploring Design Systems
I began by studying available resources on design systems and exploring the style guides of well-known companies to deepen my knowledge, especially in web apps and information systems.
Some of my favorite style guides included BBC GEL, Google Material Design or IBM Design Language. Inspired by my research, I also wrote an article for my design blog on → UI Style Guides.
2 Deciding on the Content
Following my research, we identified key areas to expand or improve in our design style guide: grid system, spacing rules, typography, color palette, icons, elements, and templates.
Of course, style guides can also include elements like micro-animations, text tone, and more. At that stage, we chose to focus on the basics, with potential extensions in the future.
3 Designing the Content
With the content defined, I began designing each part of the style guide, regularly discussing progress with the product owner and developers. The following sections introduce each part of the style guide...
What I’ve Learned
• Start with the Essentials
Begin by building the basics of your design system—grid, spacing, typography, color palette, icons, UI elements, and key templates. These foundations can be expanded over time.
• Design Systems Need Ongoing Care
Developing a design system is a long-term effort that requires continuous learning, refinement, and iteration. Begin with core components and enhance gradually.
• Design Systems Are Invaluable
Though they take time to create, design systems save resources by improving design and development efficiency. They also produce a more consistent and user-friendly UI, leading to satisfied users and, ultimately, better business outcomes.
❸ / Designs
UI Elements
To enable faster prototyping, we needed to incorporate pre-coded elements into our design sources, so I recreated these elements in the style guide. While designing the UI elements, I also proposed and implemented several usability improvements.
Templates
With a set of UI elements ready, I created a design template for the Edit Letter page, one of the product’s key sections. I designed the view for desktop, tablet, and phone resolutions, establishing a foundation for other templates and screen designs.
1 Grid System & Spacing Rules
Spacing among UI elements was inconsistent across views, so I established a grid system using 15px as the base value, with its multiples for vertical and horizontal spacing. This aligned closely with the implemented version.
At the end of my work with Epro, we were finally granted scope for a full redesign. We began by updating the grid system to a 16px base value with a 12-column layout, which proved more suitable.
2 Typography
The existing set of text styles was limited, so I defined additional styles to enhance visual hierarchy. The font family remained Open Sans until the company's rebranding was completed.
3 Colour Palette
The color palette had too many colors and lacked organization. I grouped similar shades, reducing the overall number of colors, with plans for further refinement in the upcoming full redesign.
4 Icons
When I joined the project, a basic set of icons was already in use. I first categorized them for easier management, then created additional icons for new features.
Applying the Design System to a New Feature...
The Brief
Reliable document management tools are essential for information systems. Our task was to design an advanced electronic document management (EDM) system to streamline the processing of paper-based documents for busy clinical staff, regardless of location.
The Solution
As a project team, we designed the EDM system, introducing enhanced document management functionalities. We mapped user journeys with flow diagrams and high-fidelity designs, which were later implemented."
As a result, clinical staff can now manage patient documents more quickly and comfortably.
My Role & Participation
UI Designer
- Creating designs from provided briefs and sketches using Sketch, Illustrator, and Adobe XD.
- Preparing design specifications for developers in the form of user flow diagrams
- Reviewing implemented solutions for visual design accuracy and usability
1 Sketching Ideas
At the start, I was provided with a basic feature brief outlining functionalities. I began by sketching ideas for specific views, layouts, and control compositions.
Sketching helps me capture and organize ideas while considering potential use cases. I applied this approach when designing a new set of icons for document preview controls.
2 Preparing & Reviewing Designs
After discussing initial design ideas, we moved on to creating detailed designs that adhered to the product's UI style guide. I also developed flow diagrams to illustrate primary and edge use cases.
Each design and user flow diagram was reviewed in regular design sessions, where we received feedback as notes on design printouts.
3 Reviewing the Implementation
Once the designs were approved, I prepared developer specifications, typically including the final flow diagram with notes on UI measurements and element statuses.
I was also responsible for reviewing the implementation, which was primarily done in person with a developer.
Designs of EDM
The main page displaying imported document details was designed with a document preview on the left and an auto-filled form on the right.
I also designed a new set of icons for advanced document preview features, such as rotating pages and layout mode.
Did you enjoy my work?
Let’s work together! I'm especially passionate about projects in healthcare, smart technologies, and project management.
Contact me at → bretislav.mazoch@gmail.com or LinkedIn