One of the most rewarding projects that I’ve been involved with at sage has been the new contact page redesign. Starting off as a small side-project, it ultimately got buy-in from senior stakeholders and was released to our customers within the short space of a year.
Much of in-app feedback that we received pointed to the individual contact page being a major pain point for our users. They commented that client records couldn’t easily be saved and that critical data such as invoice history was extremely difficult to find.
After reviewing the pages from a design perspective: Labelling looked visually disconnected from associated fields and the main calls to action were hidden below the fold. You can see below how these pages looked before I started working on them; the contacts index page is on the left and an example of an individual contact is on the right.
Soon after, I began mocking up some high-fidelity concepts that would be used as part of the pitch to senior stakeholders. During this process I deliberately diverged my ideas as much as possible in order not to restrict my design-thinking with too many constraints.
I explored a responsive design with mobile friendly hit areas which was something that the app previously didn’t support. I also explored an improved header area, quick actions, status colour, favourites and different list layouts.
Cards were a key part of the pitch to stakeholders and they helped me showcase how much more efficiently users could perform key actions. These included marking invoices as paid, contacting customers and chasing up debt. By showing all the different states that cards could have, I managed to make the concept feel tangible and evoke the feeling that this project could be a reality.
When creating concepts for the individual contacts screen, I focused on surfacing key data by reducing vertical space used. New features from the contact index concept were also brought in to make both pages consistent.
I explored a tab component, saved & edit states, status colours, quick actions and KPIs in card form. It was at this stage that we put the two prototyped concepts in front of users and investigated what features would be most useful to them.
Once we had gathered some user-insight, I iterated and refined the patterns further, helping to define what the MVP would be. By this point, key senior stakeholders had bought into the ideas and they consequently placed the designs high on the development backlog. Due to the individual contact screens being the biggest pain point for users, this was our MVP focus.
Development soon began using the React framework with the save and edit components being one of the first to be built. The team also started work on widening out the app to facilitate any future responsive designs.
Another React-based pattern that the developers worked on were the KPI cards. - Depending on the amount of data saved per contact, the cards flex adaptively. For example, if there is an address saved, Google maps will be surfaced. Alternatively, if users sell to foreign clients, then they can view both their home currency and the client’s native currency.
all data available
Selling to a foreign contact
no address saved
The designs generated a tremendous amount of excitement across the global business and other products were soon keen to get involved and reuse the framework that I had helped contribute to. Users began seeing a vast improvement in their workflow, with one commenting: 'The new changes you have made to the Customer Details and Account Activity are excellent! Makes my Credit Control so easy. Thank you!'
Whilst we released an MVP that has great benefits for our users and inputted new components to our pattern library; this project had personal significance for me as I managed to help shape the Sage roadmap, facilitating the improvement of a page that I knew needed a big usability overhaul.