★ Improved product's UI design system and its usability, enhancing ease of use for clinical staff across 15 NHS clinics.
★ Accelerated design workflow, enabling faster creation of new features, allowing for rapid reviews and reducing costs.
UI Design • Nov 2015–2017
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. As the first in-house UI designer at the company, I managed the UI design system and created designs for new features.
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.
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.
UI Designer
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.
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.
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...
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.
Developing a design system is a long-term effort that requires continuous learning, refinement, and iteration. Begin with core components and enhance gradually.
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.
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.
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.
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.
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.
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.
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.
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.
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.
UI Designer
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.
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.
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.
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.
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