PinkSox

Project overview

Revamp Pink Sox website from B2B to E-commerce.

Pink Sox is a family owned business, run by a mother and daughter. They sell women and girls socks designed with exciting patterns, their goal is to inspire young girls and women to embrace who they are and let their inner self shine through. Currently Pink Sox is a B2B commerce company transitioning to an e-commerce.

Brief

My role as the UX/UI Designer, was to transform the website to E-commerce.

The client expressed that they wanted an easy to use platform, that was bright and fun.

Duration: One month
Role: End- to end UX/UI Designer
Team: Self directed, with help of mentor and peers
Tools: Figma

Problem statement

How might we change this website from B2B commerce to a user friendly e-commerce company website?

The process

I began my research with user testing. I gave the four participants the same task: To buy a pair of socks. They were informed prior to starting that technically this was not possible, but they should be able to get through most of the task up to the ‘adding to cart’ stage.

User tests

Findings

I carried out a competitive analysis and found three e-commerce sock companies. Happy socks, Sock it to me and Cute but crazy. While reviewing their websites saw the different ways they each built their shopping section, how their item description page was built and between all of them I found aspects that were good and others less so.

Secondary research

I began the process of creating the platform by jotting down all the main points from each interview and then building an affinity map. I categorized all the information received from the interviews, and from there looked into finding the most common pain points that needed to be solved.

Synthesize

Problem

There is a lack of shopping section, and the usability standards need to be improved.

Solution

Add in shopping section, redesign certain sections by adding in and removing certain elements, such as reducing the amount of text on the item description page, or keeping the CTA on one side of the page as supposed to it jumping from side to side etc.. to make the user experience better.

Goals

Business goals:

  • Create an easier user experience so people purchase the product

  • Create a product that serves a wider audience.

Technical goals:

  • Create a responsive website

  • Create a scalable website

  • Make sure the website abides by the accessibility guidelines

  • Make sure it can viewed on all devices

User goals:

  • Make the Website more accessible

  • Make it user friendly, clean up the design to limit confusion

Flows

I created user flows and task flows to get an understanding of what steps were needed to complete each task. I selected a few tasks and mapped them out step by step, this way I was able to make sure no step was overlooked, which would make for a better user experience.

Wireframes

To create the low fidelity wireframes, the overall layout was kept the same as they already were, as requested by the client. However, there were a few crucial changes made according the to feedback received from the usability tests, and what the client had requested. This in and of itself was an interesting experience, finding the correct balance between the clients vision and what I found I thought should be changed according to my research findings.

Desktop

Mobile

Although this UI kit was already created for the most part, there were a couple elements I changed for example the rounded edges.

UI Kit

High fidelity prototypes

When it came to creating the high fidelity wireframes, I started by meeting with the client to discuss which elements they would like to keep. Whether that be certain photography or specific elements. From there I began changing the website and bringing the low fidelity wireframes to life. As expected, there were a number of ideas that did not come out as I envisioned and therefore look slightly different than originally planned.

  1. The logo was moved slightly close to the center

  2. The CTA was centered and will remain in the center no matter which image of the slideshow appears

  3. A “Best sellers” section was added

  4. The basket icon has been added, and the Soxygen logo was moved to the footer

  5. The navigation bar was updated, most importantly “Shop” was added

  6. The announcement bar has an announcement, rather than just being used as a welcome banner

  7. A ‘Quick add” button was added

  1. Originally I planned on reducing the amount of text here, however after discussing it with the client, they made it clear that it was important to them to keep the story as it is. During the usability tests I asked the participants to read this section and tell me what their impression of it was, and to my surprise most of them actually enjoyed reading it and said that they usually do look for that section on a website and read it.

  2. The core values were placed straight after the “Our story section”, the “Meet the team” section was removed

  3. I changed the icons to make them all uniform

  1. The text was moved to the side of the image, as the test on top of the busy image wasn’t clear

  2. The “Our process” section was reduced to one small section

  1. Different collections were created to make the user experience easier

  2. The ‘Quick add” button was added

  3. The client asked me to remove the black outline around each product, it was replaced with a soft shadow

  4. The price was added near each product

  1. The amount of text was decreased

  2. Price was added

  3. Size selection, and quantity selection added

  4. ‘Add to cart’ and ‘Buy it now’ buttons added

  5. All other specifications were places in an accordion menu

User tests

After completing the high fidelity wireframes, I redid the usability tests. This time two of the participants had participated in the first tests and for the other two participants hadn’t . It was important for me to see if the changes were obvious and are an improvement. I knew I could get this perspective from the participants that already tested the website. However, I thought it was equally important to have it tested by fresh eyes, and see what their user experience was.

For some background, the reason I was testing the navigation back to the homepage, was because the client requested I remove the ‘Home’ button from the navigation bar and I wanted to ensure users knew to click on the logo to navigate back to the homepage. For the same reason I asked them to read the ‘Our story’ section was - as stated earlier I wanted to shorten the text but the client was adamant not to, so I wanted to check we had come to correct decision by leaving it.

The tasks:
Task 1: Please browse and find a pair of socks, select a size and order them.
Task 2: Please select a collection, once there please navigate back to the homepage
Task 3: Please check out the about us page and read the our story part

Findings

Closing thoughts

This project was a really interesting one, it was focused more on UX than UI, as the UI was mostly already done. It was fascinating to see how a few changes completely change the purpose of a platform. There were more changes I would have like to do, like for example update the photography, but as time was a constraint, it wasn't possible at this time.

Challenges

This project posed quite a few challenges. One of them being that the website is hosted on Shopify, which was quite limiting. The client had a vision that wasn't so easy to accomplish on the platform. Throughout the project we did our best to find work arounds, and while sometimes we were able to - unfortunately there were things we had to pass on.

Next steps

As this project came to a close, I felt like there was still so much I wanted to accomplish. If I were to continue this project, I would love to update the photos and add some fun effects to the website. As such a vibrant sock company, I felt like the website should be more fun and alive, for example adding an interactive curser.