UX / UI Ecommerce Design Case Study - Rokform

Rokform is an ordinary group of people with an extraordinary passion for creative and functional technology accessories. They aim to improve lifestyles through developing unique mountable and protective phone cases.

Situation:

In this world of protective cases for iPhones and devices, it’s hard to differentiate your self from the others. Rokform does this by not only being protective, but serving another purpose of being mountable. One of the difficulties we faced is how to explain the product quickly and effectively then get the user to their device for purchase. Rokform complained of customers calling in to ask questions on the product and wanted their conversion rate increased.

Gameplan:

After researching analytics and user surveys I worked with the marketing and sales managers to come up with a solution that will engage users instantly upon landing on the homepage and drive them to the information they came for, and ultimately a purchase. This would involve a movie showcasing the benefits of a mountable case and options for easily selecting a users device to view products that apply to them. Supplementing this will be accessories and support easily within reach.

Mock-ups & Prototyping

After meetings I got into drawing wireframes, this project had a tight deadline so I elected to skip electronic wireframing and drew mocks for homepage, category, product, and the checkout process. We agreed upon a design that was based off the company's active brand and also information collected from users visiting the website.

Getting the Design Right

We went back and forth a couple times on the web re-design, making sure the correct information was being presented on the product pages as well the home pages, and landing pages. The original website was a bit dated and we opened it up and simplified things while keeping the branding consistent and impactful.

After everyone was happy with the main mocks, I dove into tablet and mobile, creating the same easy yet impactful design responsively across all devices.

Creating an Impactful Video

I took footage from the videographer as well as shooting my own, blended them together with some animation to help explain the mountable features easily and hosted it on YouTube. We kept it unlisted so that we could see how many people viewed it as it could only be accessed by the homepage via “Watch Video” button. Also a ’teaser’ video was put in the background of the main slider area for an active feel and get a user to click the video, if they already know about the product they can dive straight into choosing their device.

Launching the Product

The new site design was launched and received well by users around the world, it was easier for them to grasp the mountable concept, purchase products, or get customer service easier than ever. Customer support calls went down and conversion rates climbed.

Analytics, sales metrics and customer support was reviewed over the next couple of months and minor design iterations were implemented to address any issues that cropped up.

UX Design Case Study