In November 2014 I joined Arbor as a lead in-house designer. For 2 years, I was in charge of developing and maintaining the visual identity and UI components of the enterprise software called Manage Information System (MIS). It is a cloud based platform used by headteachers, teachers, governors and admins to collect student data, with the aim of saving teachers time and improving pupil achievement through intuitive UX/UI and easy data input, analysis and visualisation.
THE CHALLENGES
When it came to designing the visual identity of a complex MIS, the challenge was to find a balance between usability and aesthetics. Upon joining Arbor, my mission was to set us apart from the competitors by aiming to be seen as the most innovative MIS on the market, with a modern looking UI and user-centred design. The application is used by many different user groups with a varied age range, so one of the key considerations was to make sure that the UI elements look obvious (can't be too subtle) while maintaining a clean and modern outlook.
MIS is a complex software in that it contains thousands of unique pages; building and maintaining bespoke pages at this scale is simply not possible given the company's resources. That's why I (in conjunction with the Front End development team) designed a set of reusable and generic UI components to be used as building blocks for the system's views. For scalability and consistency reasons, we had to build a design system that would allow Product Managers to build pages from scratch using the UI palette available. While designing these UI components, I encountered a number of challenges:
- In order to meet all the design requirements, I must always think about edge cases and see if the components can work even in the worse case scenario
- While designing the best possible functional and intuitive components, the UI must stay within the scope of implementation resources and consider any technical constraint
THE DESIGN PROCESS
One of my early tasks was to redesign the KPI Dashboard, which contains a combination of different types of KPI boxes shown below. The aim of a KPI box is to display data and put them in context by allowing users to compare values. So there are two parts to this particular challenge: 1) What are all the different types of value present in the system? 2) What's the best visual solution for comparing values?
First I identified all the different types of value that currently exist in the system.
- Numerical and percentage data type (e.g. 98% of students are present in class today)
- Discrete data type, (e.g. marking A, B, C, ..., U)
- Negative value (e.g. when talking about a decrease in rate)
- Data without maximum value (e.g. when talking about current enrolled student)
I then figured out that the best way to compare values is by listing the values to compare in bar chart; I specified the 4 types of bar charts, based on the 4 different data types. For example, data without a maximum value (second column below) has a bar without background to indicate that there is no maximum.
In addition to the visual representation of data, I worked with developers to determine the best scaling mechanism, all of which has been carefully documented in our UI Rulebook. This solution not only satisfies the requirement of 'comparing data'; we've also thought about all the edge cases and came up with a UI component that can accommodate all current and foreseen scenarios.
FLAGSHIP PAGES
However, certain workflows cannot be achieved with a generic UI. Or rather, UX will benefit a lot from a bespoke design. These types of workflows are usually self-contained and can be achieved through an unique component, e.g taking attendance or bulk marking pupils. We called these flagship pages, and each one of them requires a lot of research, gathering use cases, prototyping and A-B testing . Below is an example of the markbook, which looks like a normal grid but contains a lot more advanced functionalities such as bulk marking and attaching photo evidence.
“Yuting did a fantastic job working on our system UI, design rulebook, print and website over a period of 3 years. She combines great attention to detail, logic and layout, as well as lateral thinking to how design impacts the overall UX. A very solid all-rounder who I would recommend.” — James Weatherill, CEO at Arbor Education
