GoCustomized Design Tool Redesign

//Complete redesign of a web-based design tool

Role: UX/UI Designer. Collaborated with with the CEO, the Product Owner, two Developers and a Marketing Manager.

GoCustomized.com allows users to personalize their own phone case (or gadgets & T-shirts) with their own photos, designs, text, stickers etc. The company had a very basic design tool and required major design and performance improvements so it would be more user friendly, easier to use and offer more features so the user can customize their items quickly and enjoyably.

Steps

1 - Gathered business requirements

GoCustomized had a basic design tool and the stakeholders wanted a full redesign with a new UI and a great user experience. It was crucial that the new tool would be mobile-first since the old tool had no mobile version and more and more users visited from mobile.

2 - Researched the users

I conducted qualitative research on our users - customer calls and good old fasioned google - and GoCustomized clients were typically women between 15-45 years old who mostly used the tool to create cases with photos of their friends, family and pets. The stakeholders wanted to also target men and a younger group, so we set our target group as 18-45yo men and women, young professionals who look for great personal gifts or to express themselves with a personalized item. We had two clearly mapped out personas and still above all, the tool had to be intuitive and fun.

3 - Ideation, created versions of the design tool

Working with the team, we set out to plan the project in sprints in order for development and design to work in parallel. I mapped out the user journey, created wireframes and then built a UI style guide and a pattern library.

Version of the design tool after choosing a T-shirt to design

After rounds off feedback with the team and adjusting design versions, we had a desktop version and a mobile version. I created a high def prototype of the mobile version in InVision to test it out with first time users.

I tested it remotely using the InVision link and TeamViewer with a group of users I recruited online from the target group who were asked to performs specific tasks. According to their behaviour and feedback, I made changes to the design pertaining to the steps they had to take and the buttons design.

4 - Prepared the design for development

With everything tested, set and approved, I shared all he files and assets with the team. I worked closely with the developers throughout the process.

Mobile version of the design too

5 - Tested a first version with first time users for usability and bugs

Once the developers had a version of the design tool ready to go, I prepared testing sessions - live with 10 people in the target group that I asked them to perform specific tasks.

I tested the design tool not just for usability, but also for bugs and I gathered the findings and made some changes to the design that I relayed to the developers.

The tool gave people quite some freedom in designing a case - which seems to work in the same way as choice overload, they don’t know where to click and just bounce if they feel overwhelmed - implementing steps, arrows and a clear in-your-face upload photo button helped conversion and the bounce rate.

After the launch which saw a huge spike in use and conversion, I used HotJar to see how the tool fared with users and make improvements in the flow, and worked with the developers to implement A/B tests and see what could aid conversion.

gocustomized.com