Week 04 - Week 06
Ahmad Firas Bin Ahmad Fisal | 0345121
Interactive Design (GCD60904) | Bachelor of Design (Hons) in Creative Media
Project 01: Prototype Design - Landing Page Design Prototype
INFORMATION
PROJECT 01 - LANDING PAGE DESIGN PROTOTYPE
It was a Public Holiday when this particular project starts. We were linked to
an article for further reading to give us an overview of the Landing Page and
how it works anatomically. The project brief was also given to us online via
Google Classroom.
Project Requirements:
Your task is to create a one-page design that describes the landing page for
an existing website of your choice that you feel has a design problem. A
landing page is the first page that visitors see when they arrive at a
website, and it is crucial for making a good first impression. Your landing
page should be designed to improve the user experience and address the design
issues you have identified on the original website.
Further Reading link:
The Anatomy of a Landing Page
1) Identifying the Design Issue
Chosen Website:
M Cake Boutique
Main design issue:
Bad Navigation with cluttered and unorganised products.
Reason:
Customers tend to go to a cake website with a clear intention to buy a certain
type of cake. Having them organised into categories will give them familiar
navigation that will lead them to the right page for the right product.
Having the categories in image form is also a good way to portray your
business in a more engaging and attractive way because beautiful cakes could
be an attention grabber for customers.
|
| Figure 1.1 - Main Design Issue #1 |
For someone who owns a small-medium business like this baker, incorporating details about the birth of your business/ "About Us" section in between scrolling is a great initiative to get people to know you for better networking. Unfortunately this particular site, users need to go to the footer of the page and in small font, write 'about us' for more information about the business.
|
| Figure 1.2 - Main Design Issue #2 |
2) Wireframing
Components of a Landing Page: (Source:
The Anatomy of a Landing Page)
- A unique selling proposition (USP)
- A hero image or video
- The benefits of your offering
- Some form of social proof
- A single conversion goal (or your call to action)
The first wireframe was made after I read about how to properly wireframed a
landing page or a website in general. I wasn't putting any thought into it in
an orderly or detailed manner to the Information Architecture or the Site
Structure form. However, I made sure that I have those sections that I intend
to have based on the site that I'm going to be redesigning.
|
| Figure 2.1 - Wireframe #1 |
This #2 Wireframe is my choice because of the hidden drop-down menu bar which is optional navigation action for people who intend to directly go to what they need. Alternatively, they would have to scroll a small amount and they would reach the clickable categories of their liking. Having a site that sells different types of cakes and their delivery conditions, As a User, I would want a site that fully categorises its products to make it easier for customers to select and order.
The About Us is in between the main highlight of the page with the hero image
and the products of the site, So, customers will most definitely pass through
the section and read it before getting to the products.
After rearranging those, each section feels like in the right place, to have
the final section that promotes the final call-to-action button really ties up
the whole landing page as a whole.
The one thing that I don't prefer in this third variation is to have that drop-down menu bar under the logo because it will distract the Hero Image and the subsequent information nearby.
|
| Figure 2.2 - Wireframe #2 |
The one thing that I don't prefer in this third variation is to have that drop-down menu bar under the logo because it will distract the Hero Image and the subsequent information nearby.
The 'About Us' section in this variant is at the very bottom and I wasn't
liking it from a user's perspective because If I were to land on this page,
I would've skipped that particular section due to it being 'unnecessary' to
the main motive of going to that site; which is to shop for cakes.
This wireframe was one of my shortlisted variants besides #2, However for the same reason of having a hovering drop-down menu bar that will distract the main highlight of the landing page which is the hero image and the initial call-to-action button is the reason why I decided to stray away from this variant.
|
| Figure 2.3 - Wireframe #3 |
This wireframe was one of my shortlisted variants besides #2, However for the same reason of having a hovering drop-down menu bar that will distract the main highlight of the landing page which is the hero image and the initial call-to-action button is the reason why I decided to stray away from this variant.
Though, one of the things that I love about this is the inclusion of FAQs
combined with About Us at the very bottom. But seeing that my choice of
website is a local baker trying to sell their products rather than big and
reputable companies like CakeRush or CakeTogether, where 'About Us' is
rather not really necessary to be on the landing page because of its
exposure and level of familiarity they have over the community. For this
local baker's site, having an about us to be highlighted will give them the
chance to further highlight themselves in the community.
Figures 3.7 and 3.8 also show the comparison between my original attempt and the final prototype after going through amendment processes based on the feedback given by my lecturer. Based on my lecturer, it is now looking more professional than amateur by using those gradients instead of changing the transparency level of the rectangle bars.
It was my decision to include a section for Social Proofing. It is important based even on my personal experiences. I feel better when a shopping site I visit that have social proof like reviews to be read so that I'm more confident to continue shopping at the respective site. My lecturer mentioned that it's better for us to put the dots and not show the full review as that might instil a draggy first impression from the users. To combine that feedback with my initial idea to make the pictures clickable to read more of the reviews are in-line.
These floating icons are scrollable across the outside margin of my page on the right side. It was an idea from the original website that I wanted to maintain because it is efficient to have these rather than having to search for them somewhere. It creates familiarity with users out there.
|
| Figure 2.4 - Wireframe #4 |
To ensure that I've carefully planned out my wireframes before proceeding
with prototyping in Figma,
Aligning my wireframes and planning to several
Nielson's Heuristics: Usability Principles in UI Design:
Visibility: When a design is predictable, it builds trust in
the product.
Consistency: Keeping the same language and font throughout the
system to avoid confusing the user.
Simplicity: Create interactions that contain only essential
information. Avoid unnecessary visual elements that can overwhelm and
distract users.
3) Prototyping
Figures attached below this text will show rough sections of my Final
Prototype, for the full look at my work, it's attached at the very end of
this section.
Figure 3.1 is showing my layout grid to ensure that I have a constant
margin at both ends of my landing page. This also acts as a guide for the
alignment of my body texts.
Having the "About Us" right after the first main highlight of the landing
page is one of my initial solutions in the Wireframing stage to highlight
the history of this local baker that is trying to grow even more in their
field for networking purposes. Users are more likely to read it now
because it's right above compared to having it like the original site
which is at the very bottom which will make users lose interest in it.
|
| Figure 3.1 - Layout Grid (Column) |
Figure 3.2 is an attempt that I did after my first feedback that shows
my hero image, main header and subtexts that users will see after
landing on this web page.
|
|
|
Figure 3.3 is my final prototype and an upgrade from the work that I did
in Figure 3.2. The reason why I changed the image is because of the
contrasting colours. It makes my texts pop even more with the dark grey
texts and the call-to-action button. This hero image is also the baker's
bestseller cake that uses air-flown ingredients from Japan!
|
|
|
Originally, I used the Hamburger Menu style not taking into
consideration that this menu type is more suitable for smaller viewing
devices. This project is mainly designed for web view. So after the
feedback session, I thought the Horizontal Bar Menu is more suitable for
me and the aesthetic style that I am going for that doesn't jeopardise
the form and functionality of my layout design as a whole.
|
|
|
|
|
|
Before I started with my work, I already have an idea to separate
sections between two colours which were originally this grey that you
could see on the top side and also the colour white. The reason why I
chose dark grey is because of the high contrast between the usage of
black and white in UI/UX. However, I overlooked that this principle
applies to white as well, so a friend of mine reminded me that I should
use off-white colours instead of pure white. This is why I used the
colour on the bottom side of Figure 3.6.
Hex Codes:
Grey: #F4F4F4
Off-white: #FAF9F6
|
|
|
Figures 3.7 and 3.8 also show the comparison between my original attempt and the final prototype after going through amendment processes based on the feedback given by my lecturer. Based on my lecturer, it is now looking more professional than amateur by using those gradients instead of changing the transparency level of the rectangle bars.
|
| Figure 3.7 - Categories Menu (without Gradient bars) |
|
|
|
It was my decision to include a section for Social Proofing. It is important based even on my personal experiences. I feel better when a shopping site I visit that have social proof like reviews to be read so that I'm more confident to continue shopping at the respective site. My lecturer mentioned that it's better for us to put the dots and not show the full review as that might instil a draggy first impression from the users. To combine that feedback with my initial idea to make the pictures clickable to read more of the reviews are in-line.
|
|
|
These floating icons are scrollable across the outside margin of my page on the right side. It was an idea from the original website that I wanted to maintain because it is efficient to have these rather than having to search for them somewhere. It creates familiarity with users out there.
The next and final figure also acts as a final and secondary
call-to-action button that grabs the attention of the users for the final
time. It was a recommendation from my lecturer to differentiate the
primary and secondary call-to-action buttons by making this one outlined
rather than a fully opaque rectangle as the primary version above.
FINAL DESIGN OUTCOME
|
|
|
|
|
|
FINAL DESIGN OUTCOME
Figma Link: Project 01: Landing Page Design Prototype
FEEDBACK
1st Feedback:
- The hamburger List Type is appropriate for smaller devices such as tablets and smartphones, but Menu Bar is still the most appropriate choice.
- USP Headings should be grouped and the font size must be able to differentiate between Headings and Sub-Headings.
- Headings to every section are absolutely needed.
- Categories into 6 is a great move however the execution needs a little touch-up with putting Heading text and subtext with diff font types in a gradient-boxes (gradient is better than using a box with lowered opacity.)
- Do not put a full-text review in the Social-Proof section. All texts need to be aligned to the left.
- Final CTA is a great idea as a secondary. However, instead of using a full rectangle, changing it to an outlined box is better to portray it as ‘secondary’
- Floating Icons should look like floating icons instead of vector image that is placed flatly in the layout.
2nd Feedback:
- The first call-to-action button ‘order now’ is now too small
- Ensure that your longer body texts are in regular rather than in bold.
- Drop Shadow behind the categories are not necessary, only the gradient in the box for the title suffices.
- Floating Icons are in good size and much better than before.
- The Claim Now button needs tweaking.
Comments
Post a Comment