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
.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.
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
Discovery
Comparison Analysis
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:
-
Be welcoming and informative to new users, while remaining familiar enough for existing long time users
-
Clearly showing the product and what it does
-
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:
-
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)
-
Users knowing if the product is for their needs
-
Becoming a member/ free and paid
-
Visotors spending enough time on the landing page to actually consume content
-
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::
-
Identifying if their an ideal user
-
Signing Up
-
Becoming a member
-
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
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.
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.
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
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