No BS. Let’s dive right in! 🤘🏼

1️⃣ Landing Page Redesign

User Goals: Get familiar with the product, learn about its various features and start using it with ease.

<aside> 👇🏻 Tap to play

</aside>

Current Design

Untitled

Issues

Lacks a nav bar, which is an essential element for optimal web experience
Font spacing is too little; it looks visually very clustered thereby reducing readability
Providing a CTA that will directly take the user to buy covers, which is Amulet’s primary product, would be better than launching the app. This definitely will result in more conversions
‘Join Amunation’ can be a secondary CTA. Having 2 prominent CTAs may lead to confusion.
Text is tightly packed + center-aligned which makes it tougher to read
The ‘Cover’, ‘Stake’ and the ‘Earn’ sections lack CTA buttons
Users often only skim through the Investor & Partners sections so these need not be given such a large area
There’s an inconsistency in the UI throughout
- Some elements are totally rounded, some are semi-rounded while the rest have sharp edges
- Too many typefaces are used
- Type hierarchy needs improvement
Footer can be used more efficiently by providing useful links to sections of the website, resources, help, documentation, etc
Minimal emphasis is given to the email subscription inbox section; almost goes unnoticed

Side note: The cover, stake, and earn section graphics are well made, kudos to that :)

Solution

First Fold is the most crucial area of the website; if we capture the user here, they will consider scrolling beyond. On average a user stays for less than 5-7 seconds on this frame. Making it very crucial to grab their attention
Highlighting some numbers right up top helps build trust and credibility (I’m aware the app isn’t launched for public access - these changes can be done post-launch)
Added a nav bar that shall aid with efficient navigation
Cleaned up the entire typography of the website - more legible font weights, used one typeface throughout to maintain consistency
Included CTAs to each of the sections
Redesigned the email subscription inbox section
Visually cleaned up the footer section layout. Also added links to relevant sources like Documentation and Litepaper
Used micro-interactions throughout to keep the user interested

Redesign

Untitled

User Goal: Signup/Login to the app as quickly as possible

Untitled

Issues

First impression: AmuNation visually feels like a separate page and not a product of Amulet because of the styling and typeface mismatch
Lacks top margin
The signup screen has too many options to choose from which may be overwhelming for the user
The sub-headline text (”Login using your XYZ account”) is not really needed; users are already familiar with such patterns and know what exactly happens
The section title is a mismatch - connecting a wallet isn’t the only option hence using a more generic term like signup would be better
The copy can be simplified
The spacing system is all over the place
The CTA (’Start earning points’) is in the harder-to-reach area of the phone screen

Side note: Using one kind of illustration (either only 2D or only 3D) would be a better design choice to maintain visual consistency, but okay.

Solution

Used colors and styling that match the overall branding to maintain visual consistency throughout
Reduced the signup options down to 4 from 8, with maximum emphasis on what's ideal (Connecting a wallet)
Placed all the CTA buttons in easily reachable areas
Fixed the typography and spacing system
Simplified the copy for easier understanding

<aside> 👈🏻 Play the video to see the redesigned onboarding flow in action!

</aside>

Static pages:

Untitled