UI/UX Web & mobile Design

Conteam clothing

Ecommerce Clothing Store

Project Brief
Overview

Conteam is an urban clothing company that donates 10% of their profits to organizations combating extreme poverty worldwide. Their website needs a visual redesign and some changes to the home page to improve the user experience.  

Role:  Project Management,
UI/UX Design

Date:  2019

Duration:  1 week

Project Brief
The Challenge

The Home Page:

  • Looks outdated and lacks content
  • Video player constantly loops video with no user controls to stop or change the volume level  
  • Search is a link that loads to a different page
  • There’s no organization with the displayed clothing
  • Side navigation links are difficult to understand before clicking them (Basics, Lookbook, Meaning, Join the Team)
  • “Join the Team” link sends users to a page that offers them exclusive deals but there’s nowhere for users to sign up
  • No details about clothing 
  • There’s no footer, sitemap, or links for their social media 

*Current Conteam home page:  https://conteamclothing.com/

Project Brief
The Solution
  • Redesign home page with a more updated and modern look
  • Add controls to the header video player
  • Add separate sections for men and women
  • Add Top navigation with search bar 
  • Change navigation links to make them easier to understand
  • Add more details to products on hover (sizes and colors available)
  • Add section for upcoming clothing collections
  • Add Newsletter signup section
  • Add footer with sitemap and social media links

User Research

Competitive Analysis

Atlantic Shopify Template

  • I used a similar style to organize and separate the men and women clothing   
  • I used a similar style for the clothing items adding the title, price, sizes, available colors, a “View Details” button and a “Add to Cart” button.  

Design Planning

Wireframe Layout

Web Design

  • Redesigned home page with a more updated and modern look
  • Added controls to the header video player (play, stop, timer, volume, etc.)
  • Added separate sections for men and women
  • Added top navigation with search bar 
  • Changed navigation links to make them easier to understand (separated “Collection S.19” and “Basics” into Men and Women. Eliminated “LookBook” link and designed an image gallery on the home page for it. 
  • Added more details to products on hover (name, price, sizes and colors available)
  • Added section for upcoming clothing collections
  • Added Newsletter signup section
  • Added footer with sitemap and social media links

Mobile Design

  • Redesigned home page with a more updated and modern look
  • Added stop and play button to the header video player
  • Added separate sections for men and women
  • Added top navigation with search bar 
  • Changed navigation links to make them easier to understand (separated “Collection S.19” and “Basics” into Men and Women. Eliminated “LookBook” link and designed an image slider gallery on the home page
  • Added more details to products on hover (name and price)
  • Added image slider for upcoming clothing collection
  • Added Newsletter signup section
  • Added footer with sitemap and social media links

Visual Design

Final Home Page Design for Web and Mobile

Web

Mobile

Thanks For Watching

LIKE WHAT YOU SEE?