Redesigning WTP!

What does WTP refer to? A makeover is always a challenge, but asking to redesign the site of an acquaintance, that’s another type of pressure. Welcome to another Case Study where we worked on the redisign of What the pow! web, our client for this third project of Ironhack UX/UI Design Bootcamp.

What the Pow!

The Brief

For this third project of the Ironhack Bootcamp we redesigned the website of a local shops and improve their online presence to increase their visibility both online and offline. The duration? Only two weeks.

At the beginning we had to decide on the client: we were between an online jewellery site, an architecture studio and a “winter” clothing shop. All potential clients were friends or acquaintances of one of our team members. We went for the clothing shop: WTP! or What the pow!-pow meaning powder, meaning snow- is a garment shop from Spain that works exclusively online, and their presence is mainly through social media. Our main goal was to analyze what already exists and improve the solution. They have a web but it’s not what w call “engaging”. I won’t go into details, let’s start the analysis.

The Team

We were a group of three members: Shekoofeh Shahabi, Adrián Fernández Álvarez and I. In this case, Adrián was not only a loyal customer of WTP! but a friend of the owner.

The team

The client: WTP!

What the Pow is a company that manufactures and distributes outerwear, sportswear, and outerwear accessories. “Pow”, from the word “snow or powder snow” hence the wordplay Álvaro made when he decided to found the company. They were a group of friends who decided to create a logo for their youtube channel where they uploaded videos about their snow Weekend trips.Álvaro started making the first sweatshirts and t-shirts to hand out to friends and when he least expected it, it turned into a business. Some of the star products are the windbreaker, the sweatshirts, fleece hoodies and t-shirts, specially made to resist low temperatures and ski trips.

Competitive Analysis

To start the process of investigation we decided to go through three stages of competitive analysis: Feature Comparison, Branding Comparison, and Market Positioning Map.

The competitive analysis stage started by comparing the brands that WTP calls international and local competition. Competition at a local level would be Blue Banana and at a more international and wider market: Patagonia, The North Face, Decathlon, etc. Here in the Feature Comparison chart, we can see, at a glance, what features we needed to catch up with the competition: more payment methods, a wishlist and better shipping process.

Competitive Analysis

The brand positioning map gives us to understand that WTP occupies a key place in the market but it is not being well exploited, it is time to give place to opportunities: give more prominence to the reviews, show the product in a more interactive way, suggest other products to the customer, generate a help channel for users, and some things that I already mentioned.

Competitive Analysis 2

With all these information gathered we went through the next steps: Information about the stakeholder(s), interview with them, and after that, the user interviews.

Interview with the Stakeholder

Alvaro Aldana, WTP! founder and owner. He is from Spain, the home of the project. Alvaro was clear about the website and even offered insights that are part of his own research. What is what the founder wants? To improve the website to make the user experience better. Also he wished to retain users coming from Instagram, where WTP! is well known and attracts a large number of followers.

Before going ahead with the interviews we needed to identify WTP! users and also what was Alvaro’s idea of a dreamed user:

“the user I have in mind will be 22–27, he or she likes open air sports, and like winter, fundamental! This person wishes with all his might for the weekend to come at last to go to a cool place far from the city”

Alvaro was also this “user” he describes, a very interesting concept for defining who may be your audience. But that’s the magic of the research, the deeper you go, the deeper you go, the more you discover.

User Interviews

The users we interviewed were four former customers between ages 20–30.

They were clamouring for a better design, more simplistic, a real homepage and better organisation, PayPal, filters, a wishlist, and a clearer shack out process where the system confirms you, you receive an email, etc.

Affinity

With all the data collected we can draft our Problem Statement:

“Sporty, adventurous adults who like to do outdoor activities need to find need to find easily what they are looking for and finalise their checkout process quickly because they want to use their time more efficiently and have a great shopping experience.”

User Persona and User Journey

I present to you the amazing Armando:

Persona

He is a very active person, but he works in an office from Monday to Friday. Armando can’t stop thinking about where he is going to go with his friends at the weekend.

Persona 2

He only wants to pack his stuff and run away to a mountain and ski without being disturbed by any of the obligations of his city life. So how might we help him?

Persona 3

The list of answers to these questions was long, very long. Eventually we went for the Moscow Method to prioritise some of the features of the list. Our most direct objectives are: improving the design, giving consistency to the website, adding colour and size filters, Wishlist, more payment methods.

Persona 4

Sitemaps: Old and new

To understand how the current web works we made a site map and redesign a possible new one.

Sitemap

User flow: Happy Path

Happy path

After creating the new sitemap, we created a user flow with a very happy path that will consist of a user who wants to buy a t-shirt, but as he starts exploring the web, he decides to put a mug he liked on his wishlist. Once he is on the checkout process he decides to move the mug from the wishlist to his actual cart, buying both products: mug and t-shirt but very happy about his decision..WHY? because is a happy path 😆.

Ideation: The fun part?

Until this part of the research I’ve spent days without a good sleep, I’ve had many discussions with my colleagues, but here is the first round concept testing sketches:

Sketches

After a round a concept usability test, we gather some insights and went straight for the first Mid-Fidelity Wireframe:

Wireframe

To understand whether or not the web is usable, we conduct a round of five usability testing that came up with interesting results:

  • Back button needed
  • Wishlist screen creation needed
  • Check out was easy
  • Menu interactions are efficient
  • Overall design was cohesive

User Interface: Mood Board and Style Tile

We use the creation of the moodboard to validate the branding attributes we picked for the brand.

Moodboard

For that purpose, we test our board against 24 colleagues that told us what adjectives or words came to their mind after watching it.

Moodboard Testing

Through the images we wanted to evoke or project a particular style or concept and we did it. Only that “young” was more interpreted as “energetic”, so we changed it, after all “we artists owe ourselves to the public”-or was it the other way? 🤔…nevermind. We decided to change it, “energetic” was more inclusive than “young”.

Style Tile

Oh colors, I almost forget. For the colors we took the stakeholder insights and preserve the B&W vibe but we added accent color in green and orange. Both colors are inclusive, and unisex, and doesn’t compromised the style of the clothing. Also green remind us to the love for nature and the orange give us that piece of freshness and warmth this brand wants to transmit.

HIGH-FIDELITY, YES GURL!

Day 953: we have a high-fidelity wireframe. No more intro, here is how it looks the final prototype for mobile and for desktop:

YOUTUBE Link Desktop Prototype

YOUTUBE Link Mobile Prototype

Do you like it? what do you think? would you buy clothe there? Leave a comment and tell me more.

Next steps

After the prototype saw the light we went for another round of testing (testing never ends). We did a Desirability Testing to validate some of the values of the new web and get some feedback before doing the presentation in front of the client. Results were positive and showed a consistency similar concept associated with the web:

Desirability

Takeaways

This will sound cheesy but we started as a team and ended as a team, despite of the differences, despite of the lack of sleep, despite of the remote modality. At the beginning we were full of opinions and assumptions, we followed the process and slowly ended up having different parts or “roles” that were crucial to finish the project but always communicating and improving our

Adding the UI was fun, but we should not forget that UXD is a process: choosing colours, choosing typography, place objects, components, it’s a decision we take as a team, but it’s also has a little of common sense.

And finally: feedback is crucial from the very beginning: interviews, concept tests, usability tests, desirability tests, we go on, we go back to basics and we improve with every test we do.

Thanks again for taking the time to read until the end, dad. OH..wait, you are not him? well, that’s amazing! Welcome stranger or…colleague. I hope you enjoyed this article. See you soon!