Awwwards
 
 
 
 
 

Urban Massives

Urban Massives Header

Project type:

B2B Online Store

Services:

UX/UI,
Web Design

Client:

A concept for B2B online fashion store. Urban Massives is a brand for street wear with 10+ years on the market. They consist of several subsidiary brands thus offering endless variety of clothing for both end-customer and retail businesses.

Project goals

The client needed a completely new website design with a modern appearance and fresh, off-beat twist that will appeal to the youth. Their goal was the site to be both usable for B2B clients but also for end customers. The challenges here were mainly in the B2B side - presenting many size and color variations for a product, and also batch buying in the shopping cart. The client request was that the design would be simple and minimalistic.

The initial design direction that I chose was to have balanced asymmetry with some elements like banners and their titles going a bit off-grid but balancing each-other. Keeping the color pallet only in black & white nuances was also key decision for the clean look of the website.

Big bold typography is another modern design trend applied here for appealing the target end customers. Contrasting to the big headings are the small but finely tuned texts in the product box. Smaller sizes and playing with the font weight gave good legibility result but also left enough space for larger product names and big amount of sizes. To ensure consistency only photos with clean and simple background were chosen for banners.

Urban Massives Homepage
01

Solutions

1 / 6
  • Product Details Page

    Here the solution for quantity was a table with both vertical and horizontal headers respectively for the colors and sizes. On smaller resolutions the vertical headers become pinned and the table is horizontally scrollable. A legend was also added for better clarification of the fields, which were subtly color coded. The client could choose to set the hover effect for the product box to have either sizes shown or photos with different colors of the product.

  • Urban Massives - product listing

    Because of the big amount of different categories we decided to have only 3 products per row so that they are clearly visible from the first glance. Of course the basic filters for size, color and brand were added for better navigation.

  • Urban Massives homepage

    You can check how all fit in on the homepage and how much important is consistency of typography and visual elements across different sections

  • Urban Massives Shopping Cart

    Last but not least is the shopping cart. The unusual thing here was the functionality to add a list of products with quantity for order by uploading a CSV file. Also because of the large number of products in the B2B orders, we removed pictures of the product in order to have more rows visible at once.

Urban Massives - All Screens