A designer’s guide to

Redesigning a Complex System — a UX Case Study

Designing digital products is always challenging, but designing a complex system is another level of difficulty.

Bird’s eye view of a round stone labyrinth.
Bird’s eye view of a round stone labyrinth.
Photo by Victor Garcia on Unsplash

What is the company, and what does it do?

The digital media operations provided by BCE through the MediaCMS.
The digital media operations provided by BCE through the MediaCMS

Who finally decided that this tool needed a redesign? Why only now?

The goal of this project

Roles and responsibilities — The dream team

So where does one start redesigning a complex system? Interviews

I discovered:

Interviewing the stakeholders

Identifying and analysing the competition

Getting to know the product itself

User and workflow diagram of the MediaCMS system
User and workflow diagram of the MediaCMS system
User and workflow diagram of the MediaCMS system

Time to roll up my sleeves and start planning

My UX planning for the redesign project on a kanban board type software called Trello.
My discovery phase planning on Trello

Starting with the users

Getting feedback from the users

Screenshot of the old MediaCMS on a user’s screen taken during an interview
Screenshot of the old MediaCMS on a user’s screen taken during an interview
Screenshot of the old MediaCMS on a user’s screen taken during an interview

Updating the personas with what I discovered

The persona characteristics, plus the business goals, were what would essentially define the product.

One of the 9 personas with updated characteristics.
One of the nine personas with updated characteristics

Analysing the footage from the user interviews

The affinity diagram analyzed and neatly organized into logical groups on the office wall with post-it notes.
The affinity diagram analysed and neatly organised into logical groups on the office wall

Top insights from the data analysis

The main problems we identified were:

Defining the requirements for the new MediaCMS

The IA structure

The first rough draft of the new IA structure of the MediaCMS sketched on a notebook.
The first rough draft of the new IA structure of the MediaCMS after a team brainstorming session

A clear vision and timeline

Mapping out the user flows

A use case example of a customer creating their own purchase order in UML diagram format.
A use case example of a customer creating their purchase order and the different users and elements that come into play

Buckle up your creativity belt; it’s time for design blast-off into wireframes

An example of a dashboard each user can customize to their working needs
An example of a dashboard each user can customise to their working needs
A sequence of screens demonstrating a use case based on the user flow diagram
A sequence of screens demonstrating a use case based on the user flow diagram

Prototyping and testing

High fidelity visuals and the pattern library

Example snippets of some button elements from the pattern library.
Example snippets of some button elements from the pattern library.
Example snippets of some button elements from the pattern library
Example snippets of some form elements from the pattern library.
Example snippets of some form elements from the pattern library
Example snippets of some text colour elements from the pattern library.
Example snippets of some text colour elements from the pattern library
The final design for the MediaCMS — dashboard view.
The final design for the MediaCMS — dashboard view
A dark theme alternative — dashboard view.
A dark theme alternative — dashboard view

Usability testing

Screenshot of the new MediaCMS on a user’s screen taken during a usability test.
Screenshot of the new MediaCMS on a user’s screen taken during a usability test

Example insights from the usability tests (excluding known bugs/defects):

A lean UX approach to software development

My sketched out UX process for this redesign project in diagram form.
My sketched out UX process for this redesign project

An important lesson

Positive feedback

“It’s nice that we can take a look behind the scenes from time to time to test the interface and it’s even nicer to see our problems being resolved.” MediaCMS user.

Final thoughts

For an interesting perspective on designing complex systems, check out:

The Startup

Get smarter at building your thing. Join The Startup’s +724K followers.

Samantha Da Silveira

Written by

Experience designer based in Luxembourg. Curious about everyday problems and how to resolve them. https://www.samanthadasilveira.com/

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +724K followers.

Samantha Da Silveira

Written by

Experience designer based in Luxembourg. Curious about everyday problems and how to resolve them. https://www.samanthadasilveira.com/

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +724K followers.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store