Modernisation and redesign of an enterprise application

A leading broadcaster needed to rebuild one of their legacy software, which was built on a technology they could no longer support. They approached a design studio specialising in enterprise UX to design a modern and intuitive web-based tool.

The application enables sales operations team manage commercial bookings during a program schedule change.

On behalf of the agency, I joined the client product team as the Lead UX Designer. Being on the front lines over 3 months, I spent majority of my time at client site with the users, business and developers, while having regular design critiques with other designers in the studio for collaboration.

Discovery: Understanding user and business goals

In the first 2 week sprint I spent time with users, interviewed and observed them while they used the existing tool.

mapping interview insights

Synthesising user interview insights

Biggest challenge was that the tool required extensive domain knowledge, which I didn’t have at the time.

To overcome this, I recorded all my interviews and product walkthroughs to refer back and analyse. I mapped out high level flows to see the big picture and how the journey fits into the wider architecture that extends beyond the application.

Developing this understanding helped me become an effective part of the team in a short time.

Discovery: Finding Problems to Solve

The client already had a very specific solution in mind. They were using another application that had a lot of common components and features. The requirement was to follow the design of the other application which came with it’s own usability issues.

However, during the time I spent with the users it became clear that the we could do a lot more to improve the user experience if we challenged the brief.

Manage-Flows-Blurred-Wide-BW

Understanding the application and how it fits into the wider user journey

I observed a number of areas that caused headache to the users. Some were:

  • Lots of errors were made while moving items between lists using drag & drop
  • Recovering from user errors was difficult and frustrating
  • They were relying on many years of experience, the tool wasn’t easy to learn and took considerable time for new users to adapt
  • Busy interface was causing unnecessary cognitive overload
  • Repetitive tasks were tedious

Design Constraints

  • Business requested to follow the design of a similar application. This meant that the new application had to inherit the usability issues of the other. Getting stakeholder buy-in for design decisions that challenged this was a self-assigned mission.
  • New API came with technical constraints that required changes in the original workflow. I had to solve certain problems before the developers had time to get into solution design. So I worked directly with the platform experts to reveal the limits and define how the code should behave to support both UI and API. My technical background came very handy at this stage.

Process: Solving problems, one step at a time

There was a huge amount of detail to take into consideration. For the first sprint, I briefed the designers at the studio and together we explored solutions for the layout.

ITV-AS-Featured

Once validated the design on paper with the users, I started building a wireframe prototype with Sketch and inVision.

layout-2-PA-3-folio-bw.jpg

Testing layout and navigation – first iteration

Screen Shot 2017-05-16 at 22.44.50

Users found the layout much more intuitive than before

We started looking for solutions to other problems I observed during research:

  • Designing an alternative to drag & drop to reduce errors. Users could now select a source and a target in various combinations to accommodate different scenarios and move with a CTA + Shortcut.
  • Adding in features that would help users complete their tasks faster and more efficiently and taking out the ones that are not essential.
  • Looking for excessive information to take out and present them only as needed, which would help with the decision making.
DragDropAlternative -bw.jpg

Increasing fidelity: More tidy, easy to read and intuitive interface

 

Untitled Diagram.png

Making repetitive and convoluted tasks easier to complete


Navigation

The app was going to be accessed through another application within the same app suite and would support two workflows. Imagine this like going into Gmail, switching to Google Docs then working on either a document or a spreadsheet.

sketching-navigation-alternativesI sketched a few variations of app navigation to collect quick feedback from business. I found out people should never be encouraged to:

  • Work on both workflows at the same time
  • Switch workflows before completing one

We picked the navigation option that allows the user to work on only one workflow at a time.

At that stage the navigation and table views were designed similar to other apps – but this was about to change soon.


Turning Point

During my discussions with technical stakeholders, a strategic decision has been made to build a completely new application. This decision was driven by both UX and Dev needs. This meant that we were no longer constrained by similar applications and we could design a more intuitive web tool.

Also implementing drag & drop – the original core user interaction – was a risk for project timelines. The ‘alternative’ (selecting source and target) interaction I wanted to add was much easier to implement. So we decided to leave out the drag & drop. This also meant that the user no longer had to see all the list items at once. I now could use continuous scroll and give as much room to the lists as needed.

With the new freedom to follow modern design conventions, I re-designed the navigation.

I continuously refined the interactions on the prototype, tested with users and presented different journeys to stakeholders during bi-weekly sprint reviews.


Communication

I was working far ahead of development, which meant sometimes I had figure out how to handle certain scenarios in the application level to accommodate the UI. When scenarios became complicated I wrote pseudo codes and drew up diagrams to explain the conditional logic.

Screen Shot 2017-04-23 at 23.24.14

New State Diagram showing actions available to the user on home page depending on Status

Towards the end of project, I was asked to design a new feature to accommodate a very complex scenario. Each meeting we held to come to a common understanding of the problem left the team exhausted and lost. It was the perfect opportunity to run a design workshop with key stakeholders.

IMG_5834 bw

Running a design workshop

I brought a business user and technical leads in the same room to sketch the options on paper, to communicate more effectively.

I framed the problem clearly and time-boxed the sketching session followed by pitch & critique of each design.

The session allowed us to reveal constraints and improved everyone’s understanding of the scenario while working towards a solution together. At the end, we worked out a way to automate the process to support the best user experience, without cluttering the interface with additional controls.

macrosplit-animated-2

Communicating a complex scenario


Outcome

“Much tidier, cleaner and very intuitive” – User

At the end, the product team had a framework to build, confident that it meets user and business needs.

“To be honest I wasn’t sure about this UX thing at first, but now I’m convert. I can see the value” – Business analyst

The designs helped technical teams solve difficult problems and make critical decisions.

Business was particularly happy as the new design had reduced the anticipated development work. It was a great learning journey for all of us.

“Huge contribution with wireframes and everything, you made a big difference” – Scrum Master

“It was eye opening” – Business user

“That’s good UX!” – Power user

IMG_5912.jpg

Joy of Enterprise UX 🙂