Interactive Design - Project 1: Prototype Design

17.04.2023 - 11.05.2023 / Week 3 - Week 6
Lim Rui Ying / 0358986
Interactive Design / Bachelor of Design (Hons) in Creative Media
Project 1: Prototype Design

LIST

Project 1: Prototype Design

Feedback

Reflection

INSTRUCTIONS

PROJECT 1: Prototype Design

We were assigned to choose an existing website with design problems, analyse the website's design and identify the areas that need to be improved. We have to develop a concept for the landing page that addresses the design issues and improves the user experience. Create 4-5 wireframes or mock-ups for the landing page design and finally produce the landing page prototype.

Task requirements:
- Software: Figma/Adobe XD

- Landing page width: 1366 px

- Include a clear and concise headline that describes the purpose of the website

- Include a call-to-action (CTA) button that directs users to the most important part of the website

- Visually appealing and easy to navigate

- Effective accessibility and usability

WEEK 3 | Identifying design issues

I have selected 3 websites to analyse their design issues on the landing page:

1. Paraller https://paraller.com.my/en/

2. Sweet Summer Cottage https://www.sweetsummercottage.com.my/

3. SOA Ceramics https://soaceramics.com/

Fig. 1.1 Evaluation of websites with design issues - PDF, Week 3 (22/4/2023)

WEEK 4 | Wireframing

After identifying the design issues of the websites, I decided to redesign the landing page of the SOA Ceramics website.

I created 4 wireframes for the website and included 5 sections for each wireframe:

1. Header section: headline, hero image, CTA button

2. Benefits & features section

3. Product series section

4. Social proof section: company facts, customer reviews

5. Footer section

Fig. 2.1 Wireframes, Week 4 (24/4/2023)

Fig. 2.2 Wireframes - PDF, Week 4 (24/4/2023)

WEEK 5 | Prototyping

I have chosen wireframe #2 to create my landing page in Figma. Before that, I first decided on the colours and fonts to be used throughout the landing page. While retaining the white and gold colour used by the original website, I substituted the black with a dark brown colour.

Fig. 3.1 Colour scheme and fonts, Week 5 (6/5/2023)

The logos in the navigation bar and the hero image overlap each other on the original website. Additionally, the header section lacks a headline and a call-to-action (CTA) button. To address these issues, I replaced the hero image with a new one and included a compelling headline along with supporting copy. I also added a prominent CTA button that says "Shop Now" to encourage user engagement.

Fig. 3.2 Section 1: Original (left); Redesign (right), Week 5 (6/5/2023)

Following that is the benefits and features section. The table presented below displays a comparison between the benefits and features of the original website and the rewritten version. Not all aspects were included, as I opted to select and rewrite four of the six benefits and features.

Fig. 3.3 Benefits and features from the original website and rewritten version, Week 5 (6/5/2023)

The benefits and features section on the original website appears disorderly and lacks proper alignment. Additionally, the icons utilized are inconsistent and unrelated to the content. To fix this, I have selected relevant and consistent icons and organized the content based on column grids, ensuring a more cohesive and visually appealing presentation.

Fig. 3.4 Section 2: Original (left); Redesign (right), Week 5 (6/5/2023)

The original landing page displayed the product series in two separate sections, with different subheadings for each series. This might lead to confusion among the users. To address this issue, I combined both sections into a single section, featuring product descriptions and clear CTA buttons for users to explore the product series.

Fig. 3.5 Section 3: Original (left); Redesign (right), Week 5 (6/5/2023)

The original landing page lacked a social proof section. I discovered such a section on the "About Us" page of the original website. Unfortunately, the text within the "Why Our Customers Love Us?" portion was illegible due to a messy background image. Therefore, I opted to integrate this section into my redesigned landing page. However, I made minimal changes to the layout and content, simply removing the background image and adding a woman icon in the customer review section.

Fig. 3.6 Section 4: Original (left); Redesign (right), Week 5 (6/5/2023)

Upon scrolling to the bottom, I observed two sizable location maps preceding the footer section. However, these maps are redundant since the location information is already presented twice in the footer. Thus, I did not include the location maps and I reorganised the links that were originally present on the website. Moreover, I incorporated a Facebook icon to represent the company's social media connection.

Fig. 3.7 Location maps

Fig. 3.8 Section 5: Original (left); Redesign (right), Week 5 (6/5/2023)

WEEK 6 | Prototype design after feedback

After receiving feedback from Mr Shamsul, I understand the issues in my landing page design. Below are the amendments I made:

Fig. 4.1 Resize the header section to fit a desktop screen, Week 6 (8/5/2023)

Fig. 4.2 Adjust the layout alignment, Week 6 (8/5/2023)

Fig. 4.3 Inconsistent font size, Week 6 (8/5/2023)

Fig. 4.4 Set the font sizes, Week 6 (8/5/2023)

Fig. 4.5 Adjusted font sizes for text hierarchy, Week 6 (8/5/2023)

Fig. 4.6 Adjust the lines of text for consistency, Week 6 (8/5/2023)

However, I was not satisfied with the layout of the product series section so I decided to redesign it according to wireframe #3 (Fig. 2.1 3rd from the left). Furthermore, I added a new section which is the "Promotion Set" section under the product series section.

Fig. 4.7 Redesigned layout, Week 6 (8/5/2023)

Fig. 4.8 Hovering effect to display the series name and CTA button, Week 6 (8/5/2023)

A comparison between the original landing page, attempt #1, attempt #2 and the final landing page:

Fig. 4.9 Comparison between the original landing page, attempt #1, attempt #2 and the final landing page - PDF, Week 6 (8/5/2023)

Final Project 1: Prototype Design

Fig. 5.1 Final Project 1: Prototype Design - JPEG, Week 6 (8/5/2023)

Fig. 5.2 Final Project 1: Prototype Design - PDF, Week 6 (8/5/2023)

Fig. 5.3 Final Project 1: Prototype Design - FIGMA PROTOTYPE, Week 6 (8/5/2023)

Click here to view the design file in Figma.

- Page 1: Attempts #1 and #2

- Page 2: Final Landing Page Design

FEEDBACK

WEEK 6

According to Mr Shamsul's feedback, he mentioned that my landing page design is satisfactory. However, it bears a resemblance to the original website's landing page. To address this, I have to adjust the header section to fit the entire desktop screen and align the image and text based on a three-column grid layout. Additionally, it is important to maintain consistency and a clear hierarchy by keeping all the description text in the same font size. Another aspect to consider is maintaining consistent spacing between each section.

REFLECTION

During the project, I realised that planning is very important in web design because a website represents the brand identity of a particular company. Before I started to redesign the landing page in Figma, I browse through the original website to learn about the company and its products. In addition, we also made plans such as creating wireframes and deciding on the colour scheme and typefaces.

Throughout the redesign process in Figma, I discovered that adhering to a grid system for each component was crucial in achieving an intuitive and visually appealing interface. Additionally, the careful choice of typefaces and font sizes played a vital role in maintaining consistency and establishing a clear text hierarchy. Overall, it was a great experience to undertake the process of redesigning a webpage.

QUICK LINKS

Exercises

Project 2: Working Web Page

Final Project: Design, Exploration & Application

Search This Blog

Lim Rui Ying (0358986)

Labels