Epro – UI Style Guide & Features
Epro –

UI Style Guide
& Features

Design system and features for clinical web application

UI Design  ¤  Nov 2015–2017

Summary  •  Process  •  Designs

 / Summary

A lot of resources can be saved when information is transformed into digital systems. Take the healthcare as a great example where digitisation is meaningful. Clinical staff simply need a quick and reliable access to information about patients, documents and more.

Epro is a project focused on that as a web-based information system for clinics and hospitals. It is a solution of the electronic patient record (EPR) used by 15 NHS trusts across England with more than 22K users. I was the first in‑house UI designer in the company and I managed UI style guide and produced designs for new features.

The Challenge

The company successfully run an older version of the system and was developing Epro Modern, a new version. A summary of UI components (originally created by developers) was not sufficient for design team cooperation. There was a high demand for more flexibility in design decisions and a demand for better design rules and patterns. But there wasn’t a scope for a full product redesign at that time.

The Solution

We revised and improved designers' UI style guide for Epro Modern by building/extending the grid system, spacing rules, typography, colour palette, icons, UI elements and templates.

As a result, designers can create designs of new features faster and in a higher number of variants. The style guide improvements in overall also increased UI consistency and its usability. Within the agile team, we then designed several new features utilising new patterns defined in the style guide.

My Role & Participation

UI Designer

  • managing and extending UI style guide of the main product (using Sketch/Illustrator, AdobeXD),
  • cooperating on the design of features by preparation of hi-fidelity mockups (for the conceptual design were responsible the product owner and senior developers),
  • preparing specifications for developers and checking developed solutions in terms of design implementation.
Epro symbolEpro symbolEpro symbolEpro Modern in use on the desktop computer by a nurseEpro Modern in use on the phone

Outcomes & Impact

We created more complex UI Style Guide for Epro Modern than it was before. My work on the style guide helped to the project in:

1. Amount of Designs

Designers can now create designs and user story diagrams faster and more easily, which increased the overall amount of designed features.

2. Flexibility in Decisions

Being able to create more designs in shorter time means more flexibility in testing and decisions done by the product owner and stakeholders.

3. Consistency, Usability

By establishing new design rules and patterns we increased consistency of UI and improved its overall usability for its users.

 / Process

Me exploring design systems
Epro symbol

1  Exploring design systems

Firstly, I studied available information related to design systems and then explored style guides of well-known companies. I wanted to extend my knowledge in this area with focus on web apps and information systems.

My favourite style guides are for example BBC GEL, Google Material Design or IBM Design Language. Excited from the explorations, I also wrote an article for my design blog about → UI Style Guides.

Epro symbol
Me deciding on the content with a fellow worker

2  Deciding on the content

After my explorations, we specified the essential parts which we wanted to extend or improve in our design style guide: Grid system, Spacing rules, Typography, Colour Palette, Icons, Elements and Templates.

Obviously, style guides in general can include other parts as for example micro animations, the tone of texts and more. At that moment, we decided to focus just on the base with possible extensions in the future.

3  Designing the content

Once the content was decided, I started designing individual parts of the style guide and continuously discussed results with the product owner and developers. I will introduce you the style guide parts in the next paragraphs...

UI style guide essentials
Epro symbolEpro symbol
Epro symbol

What I’ve Learned

We learn something new with every project...
•  As the first step build design system essentials

A good start are the basics. Prepare a grid system, spacing rules, font styles, colours, icons, UI elements and the most important templates. Later, you can always extend it.

•  Design systems need continuous care

Building a design system is long run with continuous learning, development and iterations. Start with fundamental blocks and extend the base during the time.

•  Design systems are useful, really useful

Design systems take time to develop, but save resources by making design and development more efficient. On top of that, it creates more consistent and usable UI for the users of the product. Happy users = better business, higher revenues.

 / Designs

UI elements

We needed to include already coded elements also in design sources for faster prototyping, so I re-created these elements in the design style guide. During the creation of UI elements, I also suggested and designed several usability improvements.

Screenshots from Epro Modern (desktop, tablet & phone resolution)

When I had set of UI elements prepared, I put together a design template for Edit Letter page which is one of the most important section of the product. I designed the view for desktop, tablet and phone resolutions. It became a base for other templates and other screens designs.

Example of the grid system and spacing rulesExample of the colour paletter guide
Example of the typography guideExample of the icons set
1  Grid system & Spacing rules

Spacing among UI elements was not consistent across the views. I decided to establish a grid system with 15 px as a base value (its multipliers were used for vertical and horizontal spacing). It was close to the state of implemented version.

At the end of my work for Epro, we were finally given the scope for the full redesign. We tackled the grid system as the first thing and decided to use 16 px base value with a 12-column grid system which was more suitable.

2  Typography

The set of text styles was not sufficient. I defined more text styles for better expression of a visual hierarchy. The font family remained Open Sans until the company re-branding was done.

3  Colour palette

Too many colours and no categorisation. That was the state of the colour palette. So I grouped similar shades together and reduced the count of colours. The plan was to make more improvements later during the announced full redesign.

4  Icons

When I joined the project, there was already a basic set of icons used in the interface. Firstly, I categorised icons for easier manipulation. Then, I also created several new icons which were used in new features.

Appendix: Designing A feature...

Electronic Document

The Brief

Having reliable tools for documents management is a crucial requirement on information systems. The task was to design an advanced electronic document management (EDM), which would help in processing of paper-based documents to busy clinical staff, regardless their location.

The Solution

Within the project team, we designed EDM, which introduced enhanced functionalities for documents management. We described user journeys by flow diagrams containing hi-fidelity designs. These designs were implemented afterwards.

As a result of that, the clinical staff can more quickly and comfortably manage any patient document.

My Role & Participation

UI Designer

  • preparing designs based on provided briefs and sketches (in Sketch/Illustrator, Adobe XD),
  • preparing specifications for developers in form of user flow diagrams,
  • checking developed solution in terms of visual design implementation and usability.
Me sketching ideasEpro symbol
Epro symbol
1  Sketching ideas

In the beginning, I was given a basic feature brief including a description of functionalities. Firstly, I started to think about specific views, layouts and controls compositions by drawing sketches.

Sketching helps me to record and organise my ideas and think about use cases which may occur. I took the same approach when designing a set of new icons which we needed to create for documents preview controls. 

Epro symbol
Example of a printout with drawn notes
2  Preparing & Reviewing designs

Once we discussed initial design ideas, we moved to the creation of detailed designs following UI style guide of the product. On top of that, I created also flow diagrams demonstrating main and edge use cases.

Every prepared design and user flow diagram was reviewed on regular design reviews. During those team sessions, we got a feedback in form of notes drawn on design printouts.

3  Reviewing implementation

After the designs were approved, I prepared specifications for developers. The specifications usually included the last version of the flow diagram with additional notes about UI measurements or statuses of elements.

My responsibility was also to review the implementation of the specification. The review of the implementation was mostly done in person with a developer.

Me reviewing the implementation with a fellow worker

Designs of EDM

The main page showing details of imported documents was designed as a layout with document preview on the left and auto-filled form on the right.

For advanced document preview functionalities (like rotating pages, layout mode and more) I designed also a set of new icons.

Outcomes & Impact

We designed a new feature which was in high demand across clinics and hospitals using our product. In overall, the feature improved the way of processing paper documents thanks to:

1. Easy Import

The users can more easily import scanned document or batch of documents through a new intuitive interface or through a shared folder on the server. That sped up the work of the clinical staff.

2. Automatic Recognition

The system handles automatic patient data recognition and automatic patient linking to the document with a possibility of a manual correction.

3. Comfortable Previews

Designed advanced functionalities for previewing documents in the system improved the overall experience of the users (zooming, rotating pages, copying and others).

Did you like my work?

Let’s work together! I'm especially interested to help projects focused on healthcare, smart technologies or sport.

Feel free to contact me at → bretislav.mazoch@gmail.com

Other projects...

Explore 2 more case studies.

Auntie Knitter – Knitted Ties E-shop (preview)

Knitted Ties E‑shop

Visual identity and website for business with knitted ties

As a Graphic & Web Designer of the project, I designed all brand visuals and designed and deployed the website (e-shop solution). Thanks to that, the business is able to manage online sells and be promoted.

Case study →
Summary  •  Process  •  Designs
Masaryk Uni – Medical 3D Viewer (preview)

Medical 3D Viewer

Interactive web application for medical 3D visualisations

As a UI Designer, Developer and 3D Artist of the project I produced medical 3D visualisations and created a unique 3D viewer for displaying the visualisations in web browsers. The viewer supports people from the university (medics, tutors and students) in teaching and studying.

Case study →
Summary  •  Process  •  Designs