UI Design • Nov 2015–2017
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 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.
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.
UI Designer
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:
Designers can now create designs and user story diagrams faster and more easily, which increased the overall amount of designed features.
Being able to create more designs in shorter time means more flexibility in testing and decisions done by the product owner and stakeholders.
By establishing new design rules and patterns we increased consistency of UI and improved its overall usability for its users.
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.
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.
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...
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
UI Designer
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.
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.
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.
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.
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:
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.
The system handles automatic patient data recognition and automatic patient linking to the document with a possibility of a manual correction.
Designed advanced functionalities for previewing documents in the system improved the overall experience of the users (zooming, rotating pages, copying and others).
Let’s work together! I'm especially interested to help projects focused on healthcare, smart technologies, or project management.
Feel free to contact me at → bretislav.mazoch@gmail.com
Explore 2 more case studies.
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 →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 →