Lulabop.com (E-commerce website)

UX Tools: Sketch, Illustrator, and Photoshop
Time Frame: 3 weeks

PROJECT BRIEF

The current structure and organization of information on Lulabop.com concerning the Hero Clip (Qliplet) product is not converting traffic to purchases at an optimal rate. We need to leverage an existing user-base coupled with a robust wholesale business, and direct its energies through the preferred sales route of the product website.

THE GOAL

Give the customer a clearer path to purchase and an optimized way to find information about the Hero Clip (Qliplet).

RESEARCH

Google Analytics showed huge amount of new traffic Lulabop was receiving (Google, Facebook, Coolmaterial.com, Pinterest, IGG, Shopify Customers, Kickstarter).*

The data was almost evenly spread across genders, though women spend more on average.

During user interviews we found most customers were using a desktop computer to access Lulabop.com. The remainder would normally use their phones to access the website. Those on the desktop computer tended to have real mixed results, with a majority experiencing some sort of video loading issues. The mobile version of the site, the video did not load at all, either by design or by mistake. This mobile video issue was unknown to the CEO and the sites original designer. They had assumed that the video played correctly across platforms.

The user interviews indicated that customers were getting confused between the Hero Clip (Qliplet) and the Qlipter since they have similar sounding names and looks.

After reviewing all the Google Analytics data, product and website interviews were conducted. Hours of customers testing the site and the Qliplet were collected.

For the Comparative Analysis Glassybaby and Passion Planner were selected. A simple 4 point rubric (The Danforth Rubric) was used to help nail down points of difference and effectiveness for comparing e-commerce websites to assess performance.

With all the testing data from the 42 interviews conducted an Affinity Diagram was created for the large amounts of language data (ideas, opinions, issues) and organized into groupings based on their natural relationships.

All of the research went into a single and simple persona that accurately represents the larger Lulabop base.

Along with the Persona, a user journey was created from user stories using the Qliplet (Hero Clip)

SKETCHING /PROTOTYPING

With the research complete the next step is to white board and sketch out ideas. These ideas were present to the steak holder at a mid-project meeting. With the clients input we presented Paper Prototypes that could be iterated upon quickly. Also at this meeting, the client was presented with the pain points discovered in the research. Lulabop had been in the process of updating the brand, with our input it seemed like a good time to push through with some of these updates. The Qliplet was renamed the Hero Clip and the company colors changed from Grey/Blue/Red to a forest green and the font in the logo became more modern. Lulabop was hesitant to update all the content on the home page. They felt the video really conveyed their products well. Incremental steps, the feeling was to show them a high fidelity mock-up of the paper prototypes that had been created at the final steak holder meeting.

A/B TESTING

The high fidelity mock-up of the landing pages was changed to a carousel that displays images with the product detail and the product in use, the research indicated that 7 out of 8 testers preferred the photos over the video. This would also solve the problem of customers with spotty internet connections not being able to load the video.

Feedback about the order in which the images of the product detail and the product in use should be displayed was divided half and half: Some preferred to see the product first because it creates interest and later found out about its practical uses. The other half would rather see the use first and then have a closer look of the product.

Midway through the project, the name of your product Qliplet, changed to Hero Clip. This change came at the perfect time, customers were consistently confused with the Qliplet and Qlipter. Although, the name change would need to wait until the second quarter of 2017, still good news.

VALIDATION/PITCH

At the final Pitch with all our A/B testing concluded, a Shopify mock-up was presented to Mina Moo and Ciara Duff. The presentation laid out the research showing the case to replace the video on the home page along with placing a “shop now” call to action button on a carousel of images. These two updates created a clear path to the purchase of the product. And with the video replaced with an image carousel, the mobile version of Lulabop.com would become more efficient, along with delivering a consistent experience between desktop and mobile.

At the conclusion of the Pitch, Mina Moo the founder of Lulabop, expressed that she had initial concerns about the changes from the mid-project meeting. But with the final A/B testing research, Mina was ready to implement nearly all of the updates shown. The only revision not made was the name update to the Qliplet. Lulabop is currently waiting until the second quarter of 2017 to update the name to Hero Clip.

This was a great project to work on, nothing beats having a very happy client. I’ll keep updating on the impact the updates had on Lulabop.com in the future.