Interactive Design: Project 1

24.4.2023 - 8.5.2023 / Week 4 - Week 6
Sylvia Lau / 0356130
Bachelor of Design in Creative Media
Interactive Design: Project 1 / Landing Page

---

INSTRUCTION

---

Project 1: Landing Page

For this task, we are to create a landing page for an existing website of your choice that you feel has a design problem. Your landing page should be designed to improve the user experience and address the design issues you have identified on the original website.

Instructions: 

• Choose an existing website with design problems that you would like to address.
• Analyze the website's design and identify the areas that need improvement. 
• Develop a concept for your landing page that addresses the design issues and improves the user experience. 
• Create a wireframe or a mock-up of your landing page design.
• Develop your landing page prototype using any prototype software of your choice (Figma or Adobe XD).

Deliverables:
A one-page design concept that describes your landing page and the design issues you are addressing.
 
Your landing page will be assessed based on the following criteria:
The creativity and effectiveness of your design concept.
The quality of your wireframe or mock-up.
The overall user experience of your landing page.
Reflection on your e-portfolio.

Requirements:

Your landing page should include a clear and concise headline that describes the purpose of the website. The landing page size width is 1366 pixels. Follow the preset in Figma or Adobe XD. The landing page should include a call-to-action (CTA) button that directs users to the most important part of the website. It should be visually appealing and easy to navigate. The landing page should adhere to web design best practices, including accessibility and usability.

Week 4

I found some websites that I thought were pretty bad for me:

• https://www.homebase.co.uk/
• https://www.wish.com/
• https://www.wayfair.com/

The websites that I found were e-commerce websites. 

Wireframes:

Figure 1.1

I created 5 wireframes for recreating the website. As the first website I found was about clothes, some wireframe was about online shopping for clothes. But since the final decision I chose was a furniture-selling website, I still could use the compositions for my prototype.

Week 5

The website that I decided to work on is Wayfair. The reason for choosing it is because of the lack of visual hierarchy. The problem with the landing page is that it offers a plentiful of choices and information which proves overwhelming. The furniture images that the website put in are not in the same color scheme, so the result that came out is a little messy.

Progression:

Figure 2.1 Original Website 

Figure 2.2 Recreated

From the original website, the first page showed different information in different blocks, so I think of putting them on one page to make it clean and clearer. I changed the search bar to a search icon so that there will be more spaces. With the spaces, I could place the website name in the middle. The information that I saw that day was about rug sales, so I found a related image and applied a low-opacity black rectangle to make a contrast with the text. I also added some small bars at the lower part of the image to show there are 4 pages in total.

Figure 2.3 Original Website

Figure 2.4 Recreated

The second page was categories, and I think there are too many selections and the color of the images is too messy. So, I picked a few categories to show and put an arrow button to let viewers know there are more selections.

Figure 2.5 Original Website

Figure 2.6 Recreated

I recreated this part by replacing a bigger image, but the image I found is in portrait size so I can only place the image on half a page. For the right spaces, I planned to put the text, after browsing the shop, there are more selections there, so I decided to place some of the categories to let people know more information about it. I searched for some furniture images from there that matched the color scheme and added a low-opacity rectangle to make a contrast with the words.

Figure 2.7 Original Website

Figure 2.8 Recreated

I listed this part as for sales. And again, I browsed the website and picked a related color scheme object. I didn't list the price like the original website because it was a bit distracting and the information I found there was not relatable.

Figure 2.9 Original Website

Figure 2.10 Recreated

There are two parts in this section, and I decided to use the same ways like the first page. I tried a different composition to place the context and add more information to fill up the spaces. I also added a rectangle with a blur effect.

Figure 2.11 Original Website

Figure 2.12 Recreated

While doing this section, I was not sure if I wanted to apply all the images to it or not, because I thought it would be too much and packed. So, I decided to place an image as a background by one of the brands and put a lower opacity black color shape to make the text can be seen.

Figure 2.13 Original Website

Figure 2.14 Recreated

I traced the icons according to the original website.

Figure 2.15 Original Website

Figure 2.16 Recreated

I didn't make many changes to the last part, I just increase the size of the emailing part so that the viewer can see it clearer. 

There is still some other information I didn't do because they had related information with the previous context above, which I don't think is important.

Font Used:

Bahnschrift, Anuphan for context. STIX Two Text for website name.

Week 6

Figure 3.1 Changes Made

Figure 3.2 Changes Made

Final Submission

---

FEEDBACK

Week 6

The website that was recreated is cleaner. For the first page, the "SHOP NOW" button could be under the text. The corner of the first big image on the third page could be the same as the other images with rounded corners.

---

Further Reading: Anatomy of a Landing Page

1. Your Unique Selling Proposition

Landing pages need to communicate this proposition in a succinct way so that your visitors immediately understand what makes your product or service appealing. A series of page elements tell the story of why your offering is unique:

a) Main Headline: The landing page headline is the first thing that visitors will read. Keep the headline punchy and be direct about your USP.

b) Supporting headline: Since headlines need to be short and sweet, sometimes you'll use a subheading to provide a touch of extra info. 

c) Reinforcing statement (optional): If the landing page runs long, it makes sense to remind visitors of your USP with a reinforcing statement toward the middle of the page.

d) A closing statement (optional): A strong closing statement might provide a little urgency or it could remind the visitor why they're there in the first place. For a clickthrough page, it should also repeat the call-to-action to eliminate the need to scroll back up.

2. The Hero Image

A hero image is likely the first visual element of your landing page that visitors will see. Ideally, the image should show the context of use. If can convey emotion by using real people, all the better, but avoid using goofy stock images that'll ring false.

3. Benefits

The landing page needs supporting copy beyond the headline to persuade most people. The key here is to describe specific benefits along with features. A feature is a specific quality of your product or service, while a benefit describes a positive impact that the feature has.

4. Social Proof

Simply put, social proof is the influence that people around us have on the decisions we make. Social proof is the most powerful tool at the disposal. First, can't fake it. Second, be specific. 

5. A Conversion Goal ( Your Call-to-Action )

A landing page should be focused on just one conversion goal. To your visitor, this is presented as a call-to-action, which can be either a standalone button on a clickthrough page or a form on a landing page designed for lead generation.