Project case study
UX, UI, Visual design



Concrete Media offer clients, such as Marks and Spencers, a Enterprise Management Platform (EMP) that allows clients to successfully and seamlessly manage their retail operations. The plaform allows clients to create projects and tasks, analyse various items of retail and store data, manage people, content and more; all from a single platform in the cloud.

My role

As the sole designer for this effort I was brought on board to help re-think the user experience from the ground up, apply a new and refreshing look and feel and work with product on a variety of new product features. I worked through all stages of the design process from user journeys, wire-frame creation, prototypes through to high-fidelity and dev ready designs.

The challenges

When I joined the team at Concrete in London they were working on the new retail platform titled CPX (Which stands for the Concrete Platform Experience). This platform was very functional and the designs were essentially driven off wireframes which were produced by an external agency whom they have engaged with for UX help. Hyper functional the platform lacked visual asthetics, a smoother UX experience and structure. Therefore I was presented with the following over-arching goals:

  1. Update the visual look and feel of the platform
  2. Fix underlying UX issues
  3. Continue to build out new features

Dashboard challenge

The first challenge was to create a more intuitive dashboard to allow for the management of a users assigned and owned tasks.
With an aim of addressing the following UX and UI issues:

  1. Solve a poor table layout experience across desktop and mobile

  2. Content (tasks) need to show specific details and overview information

  3. Allow user to easily filter and search for tasks

  4. Investigate colour palette and look and feel

Existing UI

The existing UI was very functional at best and compromised of a tabular view for navigating tasks. We knew from previous feedback that this layout didnt work well on mobile devices for obvious reasons. The engineering team has a crude layout in place but this was cumbersome at best. Previewing a task was realised with use of modals. The down side of these modals was in the limited real-estate and the fact that some modals had mini workflows contained within them. I generally try to avoid this approach where possible.

Card based solution

The initial thought here was to adopt a UI pattern offering a card based layout solution that would work much better across any viewport device. Given the platform controls some additional UI features would be added to give a more suitable mobile experience for example the lower nav bar and slidable nav bar for navigating task types. You can read up more about this pattern here.. Generally when I explore UI patterns I tend to reference either Googles Material Design Library or a vendor like Carbon from IBM which I like but thats a personal choice. Or I do the usual and see what other vendors or competitors do. Plus there are rafts of online UI paterns places to visit like


The initial thought here was to adopt a UI pattern offering a card based layout solution that would work much better across any viewport device and give greater flexibility to the UI as a set of components that can be reused.
The data and upon talking to some of the customers pointed to the fact that the majority of staff prefered a desktop experience over mobile. Therefore mobile requirements would be addressed later however we needed to try and make the UI components as mobile friendly as possible so that we can easily expand onto this platform at a later date.
Following feedback it was therefore also decided to retain a tabular layout feature for desktop users and allow the user to toggle view modes for card or table views.

Finished visuals

A card based and tabular alternative layout to suit the users needs.

Task creation challenge

The second task was involved sorting out the UX and UI for task creation. There were two elements of complexity for task creation which needed to be carefully considered:

  1. Add the ability to link the task your creating to other tasks (dependancies)
  2. Add the ability to add approvers and assignees to the task

Existing UI

The exiting UI was all done within a floating modal which was rather long and contained elements of complex UI. I tend to avoid having complex modals where possible as they just present issues for UX down the road and its simply not an elegant solution.

A UI Refresh

After consutling with the Product team we decide to isolate the task creation to its own screen in order to keep the user on-task and on-focus. Following an agreed UI pattern we utilised a flyout side panel to allow for any complex features that the task needed e.g. adding attachments, assigning the task or linking to other tasks.

"Aim to keep the user on-task and on-focus"

Finished visuals

The finished visuals for task creation. Dev ready and uploaded to Zeplin.

Slide out side nav

Allows the user to stay within the context of the task on desktop and then browser and link to other tasks.

Slide out side nav for attachments

Upload progress are visually indicated by background loading bar. There is an additional progress bar adjacent to the Done button.

Complex tree searching

This particular task was probably the second most complex aspect of the platform I was asked to solve. The request can be defined like so:

  1. Allow the user to navigate an tree structure of geographical regions, zones, districts and stores.
  2. The user has to be able to select any node (reflective of a store, region, zone or district) on the tree however this will not select all child nodes. This is the default behavior. The user should be given the option to select all children though.
  3. The user needs to be able to see what nodes they have selected.
  4. The user needs to be able to search for nodes (stores, regions etc).
  5. Any proposed solution must work on a mobile device.

Thinking process

In order to understand this request I arranged a few one-on-one calls with the product manager to go through this task in detail and make sure we were both on the same page. I also wanted to discussion some fundamental UX issues I had with the proposal.

As we were both remotely working I proposed on using Google Slides to create some crude and make shift wires.
Why Google Slides? Well its collaborative for a start and most digital/product people know how to use it. Plus if we need to quickly bring in any other stakeholders (the MD for example) then they wont be faced with a crazy new tool to interact with and they can join in. There is also the added benefit that people can go away and review this in their own time and still contribute.

I also like to invite as many initial key stakeholders as I can.

(Above) Google Slides is an easy tool to colab on ideas quickly

During one of the calls I raised an ux issue for users when selecting parent nodes refering to point 2 above. Users are familiar with the model that when you select a parent node then all children are then selected by default (makes sense right?). If we break this behavior then its going to be an odd experience. All-though we could utilise a partial selection model like you see on Gmail. Which is when your "select all" checkbox has a line through it [-] because you deselected some rows. I just needed to bear this in mind when concepting.

(Above) Selecting a parent and the childen (default behavior)
(Above) Partial selection when you select a parent then unselect some children (alternative behavior)

These initial meetings (using Google Slides) allowed us to define some fuzzy solutions collaboratively. This means that I can then go away and work up some more detailed solutions on my own. For this part of the task its a case of doodling with pen and paper the mechanics of these requirements. No real process just a case of quickly working out some flows and data structures for pages. The following images show some of my sketches.

Once I have spent enough 'thinking time' on my own working out some possible models I will usually bang out some crude lo-fi visuals to help explain my solution and rational. Enough at least to kick start another iteration of discussion.

(Above) Lo-fi mocks made in Figma super quickly. These took about 15 mins

I then pop these run outs into Google Slides again so I can initiate the next meeting and collate feedback from the product team. Remember that I run these sessions interactivly so any participants can add ideas to the designs.

(Above) Setting up Google Slides for a feedback and review session

Most of the process now involved iterating this process whilst gaining product feedback. Once we think we have a workable solution the next stage is to prototype up something. So it's either on to Invision or a crude html/css mock up if possible depending on the time we have available.


Concretes new platform was launched in spring of 2019 and really stands out from its predecessor platform. It was released in strategic steps and the first client being Marks and Spencers in the UK. This allowed us to guage feedback and identify any bugs or UX issues that the client experienced. Overall the feedback was largely positive.

Back to home