06 Feb Building A Legacy For Dr. Azi
Part of why the journey was been so rewarding is due to the absolute trust she had in my capabilities as a ‘UXer’. With the boundaries undefined, it allowed not only for creativity to flow freely, but it actually also resulted in the project being completed dramatically faster, since there is a clearly defined vision and the freedom to run with it, as I saw fit based on my experience in the industry.
Azi came to me with a landing page for her Legacy Program that needed some, let’s call it, cosmetic surgery, to help deliver the course details to her users in an easy-to-digest way, be visually appealing, as well as a good conversion percentage (number of signups per visitation to the site).
Her initial reaction to the site after the first presentation of the new design was…
I am literally crying this is so ridiculously good. You are a gift!
Let’s dive into what the landing page looked like before the surgery and I will go step-by-step to identify the problem areas, with solutions from a UI/UX perspective that will not only improve the usability for the user, but also drive more conversions / signups to the program itself.
Before:
- There is a disconnect with the title and the photo of Azi. This is a course, not an about me (not at this point anyway).
- The hand-drawn arrow does not add anything to the user flow.
- The mobile phone is not relevant to the program or to the text that sits alongside it
After:
- An image that reflects what is being offered i.e. an online course is better suited in this location and hence, appears in the new version.
- Hand drawn arrow was removed
- A series of illustrations were incorporated into the page to convey a sense of fun, yet professionalism that also connected to the text alongside it.
Before:
- Mix of center-aligned and left-aligned text gives a sense of inconsistency
- Irrelevant images
- Inconsistent text sizes, testimonials dotted around the page in various styles and sizes.
After:
- The site was broken down into a number of rows that contained piece-meal bites of information, with an alternation of text & image as the user scrolls down the site.
- Heading, sub-heading and body text was unified into specific styles. In addition, a testimonial slider was added in a key location to divide the rows and give the user a 'breather' before they continue on their journey down the page.
Before:
- Impossible to really understand or see visually how the program breaks down
- A mix of testimonials in various styles are thrown in-between the program break-down
- Left or right aligned text make it difficult for the user to read the content and does not 'flow' well for the user
After:
- A simple 3 column approach to visually deliver to the user the exact break-down, how many parts, what are the parts and finally, what each part is comprised of.
Before:
- Irrelevant icons for the associated text
- Inconsistent heading styles
- Difficult to understand what is contained in each of the two pricing tracks.
After:
- Modern, clean and relevant icons instituted
- Added a cursive font (which also appears in other places on the page) to break up the section titles and give a sense of fun & creativity
- Clear bullet points and pricing to outline exactly what is contained in each pricing track.
Before:
- Each of the pink squares contain photos that have varying padding amounts.
- Yellow background used was not part of the core brand colour assets.
After:
- Photos were recreated with a fun, playful design that still kept within the brand style and colours.
- A pink background was used to define this bonus section and clearly define what would be available to those registering to the program.
Before:
- 'Pasted-on', out-of place photo placed alongside the text that ran over columns.
- Random testimonials and a new style of shadowed box appears that once again gives the impression of discontinuity on the page.
After:
- 'Hello there!' font is fun and welcoming alongside a great photo of who the user is going to be 'meeting' on the program.
- Final sales pitch before the pricing (not shown in this screenshot) gives a sense or urgency to help improve conversions.
To summarize:
Design of a landing page should not be solely from the perspective of how it looks visually (styles, colors, fonts and so forth), but also how the user might interact with the design itself. This is at the very core of UX & UI design, whereby user research is undertaken before the pencil even hits the sketchbook.
Typical questions like “Who is the user?”, “What is the demographic?”, “Who is the perfect user to subscribe?” and others are questions that should be asked from the outset, because this is ultimately going to effect the design approach later on.
Break the content into digestable chunks with a logical flow that goes from briefly describing what is offered, followed by why it would be perfect for that intended user, then onto the highlights of the course or program and so forth.
Once this has all been taken into consideration it’s finally time to start designing the page and adding that creative flare that will wow the user and give them no option but to register, or subscribe to the program.
Need a UX website audit?
With this being said, I work on projects like this day-in-day-out and have over a decades worth of experience working on landing pages and websites exactly like these.
If you would like to have an audit undertaken – book me for a 30 minute consultation to discuss how I can transform your website.
Sorry, the comment form is closed at this time.