Ridin Dinesh
Avatar

Case Study

Responsive product configurator for an online printing company

Role: UX and UI Designer

iPad App
  • Macbook Image
  • Project Rundown

    Gogoprint provides an online printing service. User can customize their product online and get their prints delivered directly to their footstep. One of the main pain points they are facing is their product configurator. Their product configurator was built for desktop only but as their business evolves and grows, they need their product configurator to work on Mobile. Plus on top, their existing configurator had many paint point that needs to be addressed.

Project Challenge

This product configurator 2.0 requires great attention as this needs to work with all their 50+ products and also on a mobile device. Creating a seamless and user-friendly experience for customizing a product is going to be difficult.

Project Goal

Create a product configurator that is user-friendly, works with all their products and also with any new product in the future.

Tools Used:

  • Adobe XD

    To create Wireframe and UI

  • Hotjar

    Study screen recording of real users

  • Google Analytics

    To study user behaviour

  • Zeplin

    To review and share design assets to developers.

Phase 1: Study current user behaviour

In this phase, I collected as much data with regard to user behavior and feedback. I talked to different teams in the company with regard to what they think are the main pain points. Then used the tool Hotjar to study real user screen recording to understand how the user flows through the product configurator. There are so many components to this product configurator, this whole process of collecting and studying took over 1 month.

After collecting data, there were too many pain points, so I had to make a list of all Goods, all Problems and then Prioritize the problems.

In order to separate all the points, we set up a meeting and called up a key person from each department. Played a small game of sharpies and sticky notes.

User Journey: During this phase I also mapped out the user journey / flow, which would give me an overall understanding how user would interactive with the product configurator.

I also had to discuss with the development team to understand the backend, what are the limitation and what kind of coding afford would require if we had to tackle some of the pain points.

Phase 2: Wireframe and Prototyping

After going over a couple of sketch works, I got started on the wireframe. This phase took me some time as I did more wireframes, got into newer problems so I had to redo the wireframe again a couple of times. ones I had a wireframe that I believe would work, I created a prototype for it and tested it among the team internally. The prototype was designed in Adobe XD.

Below are some screenshots of the earlier version of wireframe and Prototypes

  • Image Image
  • Image
  • Image Image
  • Image Image

Multiple revisions/iterations are done for all the designs.

Current Progress:

After many months of testing and iterations, we have come to a MVP for the product configurator.

Conclusion

So far internal user feedback has been great. ones we get real user feedback on the new product configurator 2.0, we would be able to learn and improve the design.