Project overview

The startup Skate or Die needs an e-commerce website. The company sells skateboarding clothing for young people aged 15-25. The tone of voice is bold, provocative, and so-called 'Make a Statement.'

Our teamwork was based on the principles of Agile methods such as Scrum and Kanban. Every week we received backlogs with a list of tasks / user stories from the site owner, and also held daily meetings to discuss the current work.

A partial list of user stories we worked with:

• I want to understand the target group we need to attract to buy our clothing.
• Sometimes, the user should have the ability to choose product categories from a carousel on the homepage.
• I want to see the user flow for those who want to sell used items through 'Skate or Die.'
• The user should be able to select a category from the menu and view products in that category after clicking.
• The user should be able to see news in the form of the latest products on the homepage.
• The user should be able to fill out a form if they want to contact us with questions and support.
• I want to be able to create categories. (Admin)
• I want to be able to add new products to a category 'With image and text.' (Admin) I want to be able to upload 3 images per product. (Admin)
• I want skaters to be able to create their own T-shirts.
• I want to see a proposal for the collaboration section.
• I want a shopping cart on the page, and I want to see which products I have added to the cart.
• I need a checkout flow.
• The user wants to be able to save products to a wishlist.
• The user wants to access their wishlist and see the products they have saved.
• The user wants to be able to share products on Instagram.
• The user wants to see which products are in stock and which are out of stock.

My role

My role in the project involved researching and analyzing competitors, creating a mood board to generate ideas for subsequent work. Following that, I created wireframes for the Content Management System (CMS) and shopping cart, based on which I developed prototypes showcasing the addition of categories / items to the site and order processing.  In the process, I had to design for two different target audiences: the people running the site and the people using it.

Challenges and solutions

When developing the CMS, I focused on the target group which can include business owners and content managers. They are usually works on computers at the office or from home. That made me concentrate on  desktop version of CMS. Moreover managing an e-commerce site with numerous items on a mobile device is inconvenient, inefficient, and sometimes impossible. I utilised a standard structure typical for CMS’s, recognisable icons, and clear labels to reduce the user learning curve and make navigation simple and intuitive.

To demonstrate the user flow during the checkout process, I aimed for a concise design that would make the checkout process as quick and easy as possible. Each step (contact details, shipping methods, payment methods) occurs on a separate page. I implemented a progress bar, indicating every task / step completion, allowing visitors to see how far they've progressed in the checkout process. Users can also look through the order details to make changes if needed or simply double-check it before making the purchase. This page includes product image, prices, shipping cost, contact and delivery data, safety information, fostering trust and comfort for an optimal checkout page experience, encouraging the customer to complete the purchase.