top of page
Mockups.png
Modern Brand OVerview.png

Modern Brands

Website Landing Page/ Login

UX/ UI Design (Currently updating)

My Role

Lead Product Designer
UX UI Designer

The Team

UX UI Designer 

2x Developers

Tools Used 

Figma

Adobe XD 

Zoom/ Google Meet

Illustrator 

ClickUp

Duration

4 Week Sprint

PROCESS

Digest

Undo

Redo

Create

Verify

Bring To Life

Make Changes

pexels-ksenia-chernaya-3965557 (3).jpg

Modern Brands bridges the gap between fashion design and technology, making it easier, faster, and more cost-effective for brands, design professionals and factories to make fashion products. 

Imagine if you had that IP at your fingertips? Imagine if you could go to production in minutes instead of weeks.

Modern Brands designs, sources, costs, sketches, techpacks, patterns, graded and 3D mock ups over a thousand styles so that you could do just that.

Digest

The Oppurtunity

Modern Brands provides a way for designers/brands of all levels to not only create fashions but also branding for creations simply online. This now removes the hassle and long time frames sourcing these sorts of resources can take. You now have the support of any big brand at your finger tips.

PROBLEM

The website is the core of the companies purpose, users should be utilizing the site to complete task on their own to create and brand their fashions oppose to reaching out to inquire on services. Which would mean users are signing up to the membership options to access the 

HOW MIGHT WE CREATE A WAY TO MOTIVATE USERS TO USE COMPANIES SITES TOOLS INDEPENDENTLY OPPOSE TO CONTACTING COMPANY DIRECTLY TO CREATE FASHIONS AND USE BRANDING OPTIONS? 

Let's Learn 

I sat with the Founders, Lead Developer, Marketing and the (Fashion) Design Team to gather insights of the company and the existing functions of the websites tools. Modern Brands is a SAas company which is an important factor.

The websites purpose was to function as a tool and support for the brands who were its members. You should be able to gather who they are, what they have to offer and why you need to join all on the landing page simply.

A major issue is that users were not interacting with the CTA's on the landing page. Which should be functioning as a one stop shop for this user to obtain all they need to know and subscribe to the program best suited for them. This in fact was not what was taking place. Users were reaching out via email asking questions about enrolling as well as what Modern Brands has to offer. This was extremely counterproductive. 

Staff felt the site did not speak to the companies brand at all as well as felt users were not consuming the available content

Modern Brands already had an in depth Branding Guideline, which was done by a third party. The website was designed by a website designer, who based most choices off of the founders color palette request of beige hues, they did not consider the true purpose of the site. Important details were placed at the bottom of the landing page, and the overwhelming amount of beige made it hard for users to scan or even want to read what was being presented

Undo

Discovery

Comparison Analysis 

 

Saas Sites.png

Started the landing page redesign process by collecting the references that we believed were close to the Modern Brands concept

The landing page redesign goal was to:

  1. Be welcoming and informative to new users, while remaining familiar enough for existing long time users

  2. Clearly showing the product and what it does 

  3. Convey the feeling of trust and confidence that would urge leads to leave an email address and purchase a membership

Design Decisions

First I worked on the architecture of the pages flow using the found pain points of the business as well as the data provided by the sites google analytics:

  1. People were not signing up (people are not using the sign in button in the header, if people do click it they leave the site quickly after some revisit but more than 85% do not)

  2.  Users knowing if the product is for their needs

  3. Becoming  a member/ free and paid 

  4. Visotors spending enough time on the landing page to actually consume content 

  5. Many were still left unsure exactly what was possible through the sites tool/products 

What do the people think?!

I used a mockup of the sites layout and CTA buttons to gather the pain points and habits of the participants, also to hear the opinions of words used, and overall architecture? 

They were taken with::

  1. Identifying if their an ideal user

  2. Signing Up

  3. Becoming a member

  4. Learn as much as they can about the product without leaving the homepage

80% of participants used the pricing options to sign up/ become a member

70% of participants felt the sign in button was only an option for existing users

Only 10% of participants clicked on the Free Membership offer 

60% felt they were the perfect fit for the sites tools

40% of participants felt and shared details showing they understood the use of the tool
 

Redo

The Start of Something New

First Brand Adaptation

After sharing my findings with the founders, I began dismantling brand elements to create new combinations. Curating a new Brand Guide entirely. 

Through using this method I was able to establish to elements of the new UI.  

I was able to pull colors and decide on the best typography. The current site was using multiple shades of what seemed to be the same color, and 5 different fonts with to multiple sizing with no consistency. 

Screen Shot 2022-09-06 at 6.18.27 PM.png

Existing Color Palette/ Usage 

New

Once we all agreed on the new approach, it was time to get a bit more specific, this way we will not lose integrity of the design once pass from me to developers, so I creating a Design Design for all to follow this way we can create consistency in the design. A CTA button would never change unless it had a new purpose or action, fonts will remain consistent and colors serve purpose.

Brand Design Guide image.png
Create

Fresh Coat of Paint'

Hi-Fidelity MockUp

Login changed to Sign Up - with the
added option to login for existing users underneath

a space to collect users email replaced the free membership button that no one was clicking
This way we collect a way to reach them past this interaction and they receive the free membership offer in their email

The "Who Uses Modern Brands" section was brought to be directly under the fold and simplified

Copy and images were placed side by side to create a shorter scroll while browsing the landing page

Membership section was changed to allure users to read Premium option first being its the membership the business would prefer most users to have
(the pricing of Pro is intentionally not showing on this mockup)

A preview into what options the tool and website offer without having full access 

the logos of some of our top clients and users were added in their full color and with transparent background 

LANDING PAGE1.png

I used best design practices while utilizing the color palette. Research proved that the expiating colors fit within the mood and tone we wanted to set of fashion forward and creditable. We just to make slight changes to dilute the overwhelming amount of beige utilized throughout the entire page. 

So we switched out the base of beige for the classic white background, making it easier to look at and differentiate content allowing the eyes to better scan through the landing page.

White, Black and this Sand shade became the base colors 

While the light Beige became secondary oppose to primary and the new addition of Rose Pink replaced the harsh shade of blue that was being used as an accent color

bottom of page