GoCustomized Design Tool Redesign

//Complete redesign of a web-based design tool

Role: UX/UI Designer. Collaborated with with the CEO, collaborated with the Front End Developer.

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 basic design tool and required 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 management wanted a redesign to improve the UI and the general user experience of the tool and, of course, invite more sales. It was crucial that the new tool would look and work well on mobile since the old tool had no mobile version and more and more users visited from mobile.

2 - Researched the users

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. Management wanted to also target men and a younger group, so we set our target group as 18-35yo men and women, students or young professionals who want a protective case for their phone that is also completely personal and representative of themselves. The tool had to be very easy to understand and use even by less tech savvy people, it should be intuitive and fun.

3 - Ideation, created versions of the design tool

In collaboration with the CEO and the Front End Developer we set a number of features for the tool that would be fun, an improvement on the existing basic tool and not very time-consuming to implement as to launch an MPV as soon as possible.

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

After creating quick wireframes and user flows, I created a basic style guide for the UI and set out to create the entire design in a flat design style with friendly colors and very clear icons as to leave no questions regarding what something does and be used with ease by anybody.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 few people I recruited online from the target group who were asked to simply check out the features and try everything out while I took notes on their behavior, asked questions and asked them to perform more tasks if needed (or if they ignored certain buttons or features). According to their 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 set and approved, I uploaded the designs, svg icons, interactions and guides to Google Drive. The Front End Dev and I had our desks close enough to throw pens at each other so we collaborated easily throughout development.

Mobile version of the design too

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

As most people reading know, testing a working first version of a software beats testing a prototype made with any design prototyping tool - it just gets the absolute best results. Once the developer 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 to design a case they would like to have for themselves and with additional tasks in case they didn’t use all/any features (it was fun to see one tester just select a black case and say that’s what he wants).

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 passed to the developer. It’s always interesting to see live how chaotically people use software and see how things you thought were crystal clear were actually confused for something else.

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.

gocustomized.com