iLYSM

Redesigning an unconventional website without losing its ethos.

Overview

Details
Project
Responsive Website Redesign
Role
UX Designer
Lead
Trello Board
Usability Test Script Drafting
Heuristic Analysis
Design Studio
Spec Documentation
Final Presentation Draft
Team
Brandon Bailey
Jaime Huang
Neil Jackson
Duration
3 weeks

iLYSM

But I’m Not Working that Hard to Buy Your Shoes

iLYSM.com wants to support artists, by connecting artistic expression with everyday objects. The existing site has a brutalist aesthetic and an exploratory ethos: a deep single page with content branches that were accessible by various methods of horizontal scrolling. It sells a line of high-top tabi shoes and uses the proceeds to support artists. The problem is the sales numbers are brutal.

Our Challenge was to redesign the site so sales increased fourfold and the e-commerce functionality could scale as iLYSM introduced more shoe SKUS and a $99 Art Store over the next 6 months. All while maintaining exploratory ethos and design aesthetic.

This project was balancing act between the founder’s desire to be edgy and unconventional and the need to sell some shoes. Getting the owner of the site to accept a more conventional solution would be the key determinant of our success.

How Might We help an artistically-inspired website find the right balance between its brutalist style and the imperative to be a functional e-commerce platform that can support Artists?

Discover

We researched the issues with the existing site using the following UX methodologies

1. Stakeholder Interview with the founder and our point of contact who had recently been bought into the company.

2. Feature Analysis of current site with competitors and comparators nominated by ILYSM and niche sites they liked.

3. Heuristic Analysis of the current mobile and desktop sites primarily focused on the functioning of the sites rather than the more subject dimensions of the design.

4. Usability testing of the current site.

5. Interviews people nominated by the stakeholders.

“It’s very 2020; ugly, but not ugly in a bad way. Ugly in an interesting way.”

Mel

“It’s pretty cancerous… but there is a way to do this style in a more modern website.”

Gilbert

“They say they’re not for everyone, they’re kookie and weird but it’s frustrating. You don’t want to have to work that hard to buy something.”

Jess

The stakeholder interview was our opportunity to gauge who was driving the redesign; Was the founder sold on the idea and how far could we push before her desire to protect the ethos of the site became an obstacle?

The feature analysis provided some guidance as to the standard features we would need to incorporate in an expanded e-commerce site: multi-level navigation, search and archive functionality.

The heuristic analysis rendered a long list of recommendations, even though we steered away from the more subjective metrics for fear the founder would reject anything that smelled of convention or industry standard.

Interactive Comparison

Although it was not officially prescribed in the ABBY method I performed an interactive analysis of the steps required by the user to
1. find a pair of shoes,
2. select one of two adjacent sizes when the first was out of stock and
3. add some socks to their order.

Usability Testing

Six users performed 5 tasks on the site. The direct success rate was below 50%. After spending an average of 6 minutes 18 seconds on the site none of the users could articulate the mission of iLYSM: Buy shoes and we will support the artists.

Our Diagnosis

The synthesis of our results started by developing two personas, Mel the Edgy illustrator and Cole the Sneakerhead to represent the archetypes of the two customers iLYSM had described and parts of our research had illuminated. We represented Mel’s experience buying shoes on the current site using the journey mapping technique before creating a better e-commerce experience using a user flow.

We performed an affinity mapping of the interview and usability testing quotes and observations. The many insights of our Research fell within 4 main problem areas

branding old.png — 1. Branding

The mission of the site was opaque and not consistently communicated, and the animated smile graphic, the most common branding asset on the site was overused to the point of distraction.

2. Navigation

Putting the primary navigation under a down arrow fooled most users and the inconsistent and not learnable horizontal scrolling made navigation difficult. This section required clicking the header and dragging to scroll.

3. Images

There were issues with image loading and labelling and a lack of images that supported the goal of selling product.

4. E-commerce

Once users had found the shoes the process of buying them was click-heavy. The out of stock and up-selling functionality was clunky or hidden.

In addition I suggested that we group all the post-its as positive, neutral or a negative as an impactful visual demonstration to the founder that she needed to accept change.

A Prescription

Design Studio

A visual brainstorming session to surface solutions to the site’s problems. Doing this with the stakeholders illustrated how far they were prepared to go with the redesign.

When we presented these results to the iLYSM team they agreed with our findings, and we were able to turn the meeting into a Design Studio: a visual brainstorming session to surface the features required to revive sales. This moved us towards a Minimum Viable Solution that should include the following features:

1. Branding: Reduce the presence of the animated smile. Increase messaging of the mission to support artists by promoting the shop in the zine interviews, but keep it fun.

2. Navigation: Make primary navigation visible. Let content float by rather than require users to scroll horizontally.

3. Images: Expand imagery used to sell shoes. Redeploy existing product page image carousel to get more content above the fold.

4. E-commerce: Bring interface in-line with industry standards.

E-Commerce User Flow

Re-Imaginging the process of buying Tabis

Treatment and Testing

We took these insights and went through four rounds of design and testing, adjusting the mid-fidelity and high-fidelity designs as each round of usability testing dictated.

Iteration 1

The existing site re-imagined with the recommendations of our research applied. The testing validated the changes we made to the navigation.

Iteration 2

Expanded shopping functionality by adding a secondary shop navigation menu. We also iterated on a design for the display of zine interviews that had not tested successfully in Round 1.

Iteration 3

We loaded the baubles back onto the redesigned site. The testing results were fine, but users complained that it was too busy,

Iteration 4

The Final Prototype we presented to iLYSM had fewer of the distracting visual elements.

Usability Testing Final Prototype

A substantial improvement in terms of time and success rate

Discharge

The Founder was very happy with our final prototype and recommendations. We had demonstrated where her existing site was failing and she was delighted we had preserved its ethos while giving her a more intuitive and scalable e-commerce interface that could be the foundation for growth in the months ahead.

In our debrief she asked how she might implement changes to the existing site without spending too much on a developer. It was not clear if this was just a quick fix, while they built out our design, or a sign that the funds to repair the website might not be available.

We would maintain that if iLYSM is to grow implementing the design we presented is a necessary investment. We hope they find the funds.