I was hired by a software development company to perform a UI redesign on one of their flagship products. It’s a responsive web application that allows healthcare staff to manage outpatients and their equipment.
Branding and design have been changed to comply with an NDA.
Project overview
Challenges
- Optimising complicated forms
- Visualising dashboard data
- Ensuring compatibility with Web Accessibility Guidelines
- Modernising outdated UI
Solutions
- Multi-part forms with progress indicators and appropriate inputs
- Charts and graphs where appropriate
- Colours and UI structure that are compatible with WCAG.
- Contemporary and clean UI design
Results
- High fidelity designs for mobile, tablet and desktop devices
- Developer notes for key pages
- Interactive design demos that led to new sales
- Positive feedback from existing clients that led to reduced churn
Research
During the research phase I interviewed users and stakeholders and also gave them various tasks to perform in the current UI to identify potential issues. One of the deliverables of this design phase was a user persona which reflects a typical user.
Low fidelity designs
During this phase I produced diagrams, flow charts, wireframes and prototypes which I presented to stakeholders.
Flow charts
In this flow chart I have mapped out the ordering process starting from the catalogue and ending on the order confirmation page.
Sketches
I produced rough pencil sketches for pages that had more substantial pages.
Wireframes
Next, I produced wireframes which I presented to the team and stakeholders.
High fidelity designs
During this phase I produced high fidelity designs and prototypes in Adobe XD.
Login page finished design
The finished login page utilises golden ratio that splits the page into two sections- login form and announcements. The client wanted an area where they could post important notices and announcements. They also wanted the page to look nice even if there weren’t any announcements so I used a gradient background with some abstract shapes to give it a 3D feel.
Homepage finished design
In regards to the homepage the feedback from stakeholders was very similar – they wanted to see key information about their own or their team’s profiles. Showing products and orders was a priority. In terms of UI design, I grouped relevant information and spaced it out using blocks to avoid overwhelming users.
Mobile designs
This application is responsive so I had to produce designs on mobile devices as well. Below you can see examples of the login page and the homepage.
Add patient form
The feedback about this form in the current UI was that it was very long and confusing. In this design I focused on breaking down a very long form into manageable chunks and using input types that offer better usability.
Shop page
I included useful sorting and filtering options on this page. The client also wanted to show as many products as possible in two different views.
Cart page
The client feedback on the current UI cart page was that it was too cluttered and confusing. To solve these issues, I focused on surfacing the most important functionality while hiding less important actions in dropdown menus. I also used a centred, easy to read layout.
