Improving The Enterprise Software Experience

The first phase of the design process was to gather valuable data and insights to lay the foundations for the design decisions. Information-gathering techniques were user interviews, internal audits, and visual design inspiration.

There are about 100 staff in the organisation, each with their unique duties and rank. For this study, I grouped all the staff into “Operators” and “Managers”. For certain processes and access to some information, Managers have a higher level of privilege than Operators.

I interviewed five members of the organisation (three Operators and two Managers) to gain valuable insight into the impression they have of the current platform. Key findings from the interviews are outlined in the “Research Outcomes” section. Below are select quotes from the interviews.

After conducting the interviews, I used the available information to generate personas for each user group that summarised their goals and frustrations and helped inform next steps.

Below are personas constructed from the interviews.

The internal audit was a comprehensive analysis of the current state of the platform. I took some time out to look at each of the processes and flows in order for me to better understand the platform.

Below are some screenshots from my analysis. Key findings from the audit are outlined in the “Research Outcomes” section.

The next step was seeking visual inspiration for web dashboards. I found a good number of relevant images that helped paint an early picture of what the final outcome of the design might look like.

Below are select images that were part of my moodboard.

After the research and information-gathering phase, I took the feedback from the conducted interviews and the dashboard analysis, and separated notable points into two categories:

‍i. Design Challenges: Issues that can be addressed by applying better design principles.
ii. Engineering Challenges: Issues that need to be addressed by the software developers and engineers.

The graphic below shows selected notes containing issues that need to be addressed. I highlighted the Engineering Challenges and shared my findings with the team in subsequent meetings.

The conceptualisation of the upgraded platform featured the early decisions that were made based on conclusions from the research phase. Key decisions included:

i. Including a light/dark mode switch at the top of the screen.
ii. Adding a “soft refresh” button at the top of the screen.
iii. Using large buttons for common primary actions.

The conceptualisation phase featured creating a sitemap and creating wireframes on paper.

The information architecture for the platform is primarily hierarchical, with some features of a matrix structure. Changes to the current structure were minimal, as the left menu retained its place as the platform's primary navigation.

The sitemap on Figjam is shown below.

The first look of the platform was sketched on paper with layouts that represented prospective screens.

The primary design tool for this platform was Figma. Soon enough, sketches and ideas began taking a digital shape within the tool.

The sketches were translated into a more refined and digital form that took us closer to the final look and feel.

After the wireframes were discussed, some adjustments were decided upon to improve the experience on the platform:

i. Home Screen Updates: Data points on the home screen will no longer be available solely to managers with higher privileges. This change allows everyone in the team to have a solid overview of the work needed to be done.
ii. Additional Analytics: More metrics would be added to the Analytics section, with additional data being visualised and queried on-demand.

The final phase in the design process was to put everything together. The colour choices, fonts, and high-fidelity mockups were tackled at this stage.

As the project progressed, the work in Figma matured. I created a system that dictated the design language of the platform. This design system included:

i. A Component Library
ii. Colour Styles (Light & Dark)
iii. Text Styles

The decision for which colours were used in the dashboard was informed by the brand colours, required accents, and best context fit.

The typeface of choice in this episode is Raleway. The sans-serif typeface was a great choice for its style and legibility. Raleway’s family of fonts did a great job in different situations, meaning there was no need to pair it with another typeface.

After a round of feedback on the low-fidelity screens, I updated the content of some of the screens and applied the text and colour styles shown above.

Enjoy!

The file was arranged and delivered to my less-than-enthusiastic developer colleague, and we all lived happily ever after!

Actually, no. Many meetings took place to exchange ideas, share my design rationale, and make needed adjustments. After about a year, the platform was ready to onboard users.

And we all lived happily ever after!

Each organisation has its unique requirements, and this one was no different. My biggest takeaways from this project were seeing behind the scenes of organisations dealing with customer-related interests internally and how the software they used affected the staff's day-to-day lives.

The biggest challenges I faced in this project were:

i. The size of the project, in terms of the number of screens that had to be represented
ii. The business needs were updated regularly, introducing new requirements to be addressed in the design and leading to a stretched timeline

This was an enjoyable experience, and I was able to learn many lessons that I can move forward with.