Interactive Design: Project 1

00.00.2023 - 00.00.2023 / WEEK 1

ARWINDA NURUL IZZA / 0349913

INTERACTIVE DESIGN / BDCM

Project 1: Prototype Design

Project 1: Landing Page Design Prototype

In Project 1, We are tasked to create a landing page for an existing website of our choice that feel has a design problem. Analyse the website’s design and identify the areas that need improvement. Develop a concept to improve their user interface. Create a wireframe or mock up for the landing page and then develop the landing page using any chosen prototype software (Adobe XD or Figma) The width of the page is 1366 px. The CTA button should be present.

01: Choosing a Website

There was no selection process in this step because I didn’t show multiple websites that I considered has a bad landing page.

royalapothic.com

website about: The website sells a boutique fragrance products like candle, perfumes, body wash in a brand named Royal Apothic. The appeal they have to their customer is the high quality of fragrances in a beautiful packaging. The brand evokes a premium, old-style or classic feels, and scientific in a way.

This website was chosen because some issues indicated below:

Lack of use on Grid System. The option on the navigation was too near to the sides.
Lack of consistency. Some fonts sizes in a similar category/hierarchy presently not in a same size and irks the reader when to see the landing page. It looks sort of claustrophobic in a sense.
Hierarchy is barely present. The headlines like ‘They’re Back’ should be more emphasise more and being differentiate with other sub sections such as ‘Our Collections.’

02:References

Some study cases from a more renowned fragrances brand conducted on the three websites below. The chosen website as reference display a good website design with their consistency but still remain unique on their own way. To understand what’s are the usual thing included in a fragrance website.

- Aesop

- Diptyque

- Jo malone

03: Moodboard

For the moodboard, I don’t want to take it far away from the already existing page by means like the color palette which is purple that can display a feeling of luxury or premium can be kept in there as its the color of their logo as well. Looking at the referenced good website, they use just a minimal colours palette for their website which in turns enhance their images instead. I'll apply the same thing on my landing page and for the typeface I tried to utilise the san serif typeface on most of the layout to maintain the 'classic' or 'old vibe' it has. I use 'ITC New Baskerville' in this case. I also utilise san serif just for important details like price and notices.

fig.1.1 Royal's Apothic Landing Page Moodboard

04: Wireframe

Next step, I proceed to make the wireframes on Miro with the template they provided. The first four attempt was quiet messy as I didnt use any grid system when attempting. But, regardless the organisation for the landing page wireframe was (Headline, Brand’s motto, Our scent series, About Us, Our Collections, Footer)

fig.1.2 Miro's Wireframe library template

fig.1.3 Wireframe Attempt 1-4#

After the feedback provided indicating ‘more’ as the link button is not really good, too much white space and I have to make everthing more alligned and harmonious. That’s why I attempt another 2 wireframes which organisation goes (Headline, Brand’s motto, product line up 1#, product line up about 2#, product line up 2#, product line up about 1#, What’s New, product feedback, footer.) I’m adding ‘product feedback’ on the landing page’s wireframe as it was mentioned that good landing page will provide such that. Some organisation adjustment also met after further study on other similar websites.

fig. 1.4 Allignment using shape layer on Miro

fig.1.6 Wireframe's Attempt 5-6#

fig.1.7 Landing Page, Wireframe - pdf

05: Landing Page Design

For this step, I use Adobe XD on designing the actual website. The width of the website is 1366 px as required. I’m using the 12 grid systems more conciesly here hence more alignment in the contents. The pictures I use on my landing page are retrieved from the Royal Apothic’s website itself because they already have great product images. All the price and details also following the already existing content provided. But, most of the images has problem for them having no transparent background so I took all of the images to photoshop and removed them. I also taking some pluggins like the one for the payment details on internet link provided below.

All images source come from Royal Apothic HERE

Pluggins for the Payment Footer HERE

fig.1.8 Removing Image Background

fig.1.9 Using grid system

I choose to reduce the amount of products being shown from 4 to 3 per pages. This adjustment made to adjust the quantity of product actually being sold.