MIDDY’S

Bespoke fulfilment web app for Australia’s largest independent electrical wholesaler.

My role on this project was UX/UI Designer, I worked alongside one other UX Designer at Papercloud throughout the process.

As the largest independent electrical wholesaler in Australia, Middy’s handles hundreds of major project orders each day. Their existing fulfilment process was extremely time-consuming and laborious, filled with phone calls and emails that soon became difficult to document and track. The process also made it difficult to recognise potential blockages during a project, and identify who was responsible for them.

Middy’s needed a solution that would let all stakeholders know the state of a project at any given time, whilst simultaneously acting as a source of truth for any changes made to the order.

Role
Product Designer

Agency
Papercloud

Figuring out where to start

We began the user experience research process by speaking with Middy’s Major Project Estimators. These were the people who face the day-to-day issues throughout the fulfilment process, and the prospective main users of the software solution. We also interviewed several of Middy’s preferred suppliers as well as several of their customers. This process was continuous over a few months, and helped us to really understand the pain points each stakeholder faced.

We also hosted a workshop at Papercloud, gathering several different stakeholders including customers, suppliers and Middy’s staff together at the same time in order to brainstorm collaborative solutions that would better impact the process for everyone involved.

MIDDY’S

Bespoke fulfilment web app

My role on this project was Lead Product Designer, I worked alongside one other UX Designer at Papercloud throughout the process.

As the largest independent electrical wholesaler in Australia, Middy’s handles hundreds of major project orders each day. Their existing fulfilment process was extremely time-consuming and laborious, filled with phone calls and emails that soon became difficult to document and track. The process also made it difficult to recognise potential blockages during a project, and identify who was responsible for them.

Middy’s needed a solution that would let all stakeholders know the state of a project at any given time, whilst simultaneously acting as a source of truth for any changes made to the order.

Role
Product Designer

Agency
Papercloud

Figuring out where to start

We began the user experience research process by speaking with Middy’s Major Project Estimators. These were the people who face the day-to-day issues throughout the fulfilment process, and the prospective main users of the software solution. We also interviewed several of Middy’s preferred suppliers as well as several of their customers. This process was continuous over a few months, and helped us to really understand the pain points each stakeholder faced.

We also hosted a workshop at Papercloud, gathering several different stakeholders including customers, suppliers and Middy’s staff together at the same time in order to brainstorm collaborative solutions that would better impact the process for everyone involved.

Using all of this information, we were able to create several user personas for the different stakeholders and go on to map out comprehensive user journeys from everyone’s perspective. The aim was clear: too much time is wasted throughout the fulfilment process chasing up emails and phone calls and there is too little transparency with regards to who is responsible for blockages. We needed to design a system that both increased efficiency and transparency so that all responsibility is accounted for and all information is located in one place.

Using all of this information, we were able to create several user personas for the different stakeholders and go on to map out comprehensive user journeys from everyone’s perspective. The aim was clear: too much time is wasted throughout the fulfilment process chasing up emails and phone calls and there is too little transparency with regards to who is responsible for blockages. We needed to design a system that both increased efficiency and transparency so that all responsibility is accounted for and all information is located in one place.

Wireframing

Using our findings from the research process, we began to wireframe ideas for the web app. We knew that the app would primarily be used on desktop and laptop, so we began designing with that in mind. Having to design for three separate users (Middy’s, customer, supplier) posed several challenges. For instance, certain sensitive information and functionality would need to be kept from some users. We split our design file according to the three different user types and created ‘overall’ user journeys for specific tasks, taking into account how each user type would interact with the web app.

Wireframing

Using our findings from the research process, we began to wireframe ideas for the web app. We knew that the app would primarily be used on desktop and laptop, so we began designing with that in mind. Having to design for three separate users (Middy’s, customer, supplier) posed several challenges. For instance, certain sensitive information and functionality would need to be kept from some users. We split our design file according to the three different user types and created ‘overall’ user journeys for specific tasks, taking into account how each user type would interact with the web app.

Visual design & prototyping

We knew that the app was going to display lots of text-based information for each project, so we made the decision to try and utilise white and lighter shades of blue as much as possible for backgrounds, saving the iconic pink and blue Middy’s branding for elements such as accents and primary buttons. We also wanted to introduce an element of playfulness to the app to try to soften the impact of introducing a new solution to all three user types. This was achieved by making use of elements such as rounded buttons and drop shadows. We also worked alongside an illustrator who created playful illustrations to represent each user type.

Once we had established the styling for the app, we began to carry out usability and heuristic testing using Invision prototypes, continually iterating our designs. Throughout this process we discovered several features that were vital to the fulfilment process but not immediately apparent following our initial research, such as the ability to continually edit or add new products.

Visual design & prototyping

We knew that the app was going to display lots of text-based information for each project, so we made the decision to try and utilise white and lighter shades of blue as much as possible for backgrounds, saving the iconic pink and blue Middy’s branding for elements such as accents and primary buttons. We also wanted to introduce an element of playfulness to the app to try to soften the impact of introducing a new solution to all three user types. This was achieved by making use of elements such as rounded buttons and drop shadows. We also worked alongside an illustrator who created playful illustrations to represent each user type.

Once we had established the styling for the app, we began to carry out usability and heuristic testing using Invision prototypes, continually iterating our designs. Throughout this process we discovered several features that were vital to the fulfilment process but not immediately apparent following our initial research, such as the ability to continually edit or add new products.

Results

We set out to design a system that would reduce existing the manual effort required during the fulfilment process, and provide a source of truth for all blockages and updates. By streamlining the project creation process and containing it within the web app, we successfully identified a means to help reduce the number of emails and phone calls previously involved. The ‘Activity’ section of each project provides an up-to-date log of any changes made to the project, as well as a note on who made the change. Each project also has an individual ‘Status’, which shows all users what stage the project is at and who is responsible for any hold ups.

Results

We set out to design a system that would reduce existing the manual effort required during the fulfilment process, and provide a source of truth for all blockages and updates. By streamlining the project creation process and containing it within the web app, we successfully identified a means to help reduce the number of emails and phone calls previously involved. The ‘Activity’ section of each project provides an up-to-date log of any changes made to the project, as well as a note on who made the change. Each project also has an individual ‘Status’, which shows all users what stage the project is at and who is responsible for any hold ups.

What I learned

Designing a new system for several different user types provided plenty of challenges. I learned to understand how to design enhanced workflows rather than simply upheaving them. I also learned that whilst initial research is vital to the human centric design process, continually testing designs is equally as important. Often a user doesn’t know what’s missing from a product until they look for it, and it’s better to recognise any missing pieces during the design phase than during development.

What I learned

Designing a new system for several different user types provided plenty of challenges. I learned to understand how to design enhanced workflows rather than simply upheaving them. I also learned that whilst initial research is vital to the human centric design process, continually testing designs is equally as important. Often a user doesn’t know what’s missing from a product until they look for it, and it’s better to recognise any missing pieces during the design phase than during development.
Want to chat?
hello@jimles.co