01 ––

Minimaal

Comp 21Comp 21

Category: E-commerce Website ・ Role: Branding, User Experience, Design ・ Year: 2017

Minimaal is an e-commerce platform focused on bringing functional minimalist products to light. Minimaal curates and showcases products that embody the company mission: buy less, but buy better.

One of the main challenges of launching a successful e-commerce website is getting consistent conversion rates and repeat customers. With this in mind, I also had to address the following user stories:

  • As a user, I want to browse products without distraction

  • As a user, I want to view details about a specific product

  • As a user, I want to add a product to my cart

  • As a user, I want to pay for my items with a CC or Paypal

  • As a user, I want to sign up for an account

The focus for this project was to craft a shopping experience that was simple yet intuitive and eases the customer’s checkout process. I made it a priority to design a solution that focused on preventing cart abandonment during transactions and an easy to navigate but aesthetically pleasing interface.

Final Landing Page - Minimaal@1xFinal Landing Page - Minimaal@1x
Landing Page@1xLanding Page@1x
Desktop-HDDesktop-HD

USER RESEARCH

The research phase began with a SWOT analysis of other minimalist driven e-commerce sites.  The three e-commerce sites that were analyzed (Hypebeast, The Minimalists, and Curate Online) were all similar in theme and content, so it was important to understand any differences in the shopping experience for users. This also helped me settle on the ideal approach that Minimaal should have towards showcasing it's products and attracting the right audience.

 

With these requirements defined, I was able to establish a clear visual hierarchy throughout the platform and keep all content and user interactions consistent across the board for web and mobile. While this analysis helped me establish features that would make the platform stand out, diving deeper into best practices for e-commerce web design led me to conclude the following:

  • E-commerce sites should be easy to navigate

  • Product Pages should be clean and uncluttered

  • Reduce the friction of selecting a product and making a purchase

  • Eliminate all distractions during the checkout process

Main GIF MinimaalMain GIF Minimaal

Since MINIMAAL is a brand that promotes living a minimal lifestyle through it's products, it was essential that the brand had a minimal aesthetic yet also appealed to a broad range shoppers interested in the minimalism lifestyle.

For the logo, I wanted to utilize the brand name and transform it into something simple yet elegant. In the dutch language, the word “Minimal” is pronounced with two letter A’s. By creating a union between the two A’s, symmetry and harmony were achieved and this resulted in a single ‘M’ within a circle as the main logomark.

With a minimal theme in mind, I went with a color palette that was clean yet professional. Varying shades of black, gray, and white are synonymous with minimalism so this was a no brainer. The same thinking applied to our typography choice of Titlium Web, a light sans-serif typeface that's versatile and easily readable on all screen sizes and great for headings and body text. While using two contrasting typefaces is great for certain website designs, going with one typeface throughout the project kept things consistent.

Artboard 2@3xArtboard 2@3x
Typography@2xTypography@2x
Icon DesignIcon Design
Color Palette@2xColor Palette@2x

With the research phase completed and the brand identity established, I began sketching out low-fidelity wireframes for the browse products, product detail, and shopping cart checkout pages.

Artboard@1xArtboard@1x

FULLY RESPONSIVE

More and more online shopping is now done on mobile phones and tablets. Designing for mobile responsiveness was imperative to ensure users had the ideal buying experience anywhere and on any device. Navigating through a menu should be a breeze and signing in or creating an account should be the most simple task.

Minmaal-FlowMinmaal-Flow
Minimaal-2Minimaal-2
Search Bar@2xSearch Bar@2x
Minimaal Product CardMinimaal Product Card
[unex_ce_button id="content_45rqew2ch" button_text_color="#000000" button_font="bold" button_font_size="40px" button_width="full_width" button_alignment="center" button_text_spacing="2px" button_bg_color="transparent" button_padding="100px 60px 100px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link="http://jcdelacuesta.com/?work=wanderlust" button_link_type="url" button_link_target="_self" has_container="" in_column=""]Next Case Study[/ce_button]