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
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
- 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.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) |
![]() |
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.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.3 Inconsistent font size, Week 6 (8/5/2023) |
![]() |
Fig. 4.5 Adjusted font sizes for text hierarchy, 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)
- 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.
FURTHER READING
The Anatomy of a Landing Page
![]() |
The anatomy of a landing page (Source: Moosend) |
1. A unique selling proposition (USP)
main headline + supporting copy
clearly describes what visitors stand to get from your product or service
2. A hero image or video
use a relevant image
using real people images as the hero image can convey emotions more
effectively
3. The benefits and features
feature: a specific quality of the product or service
benefit: the positive impact of a feature
describe specific benefits along with features
4. Some form of social proof
forms: direct quotes from customers, case studies, video
interviews/testimonials, logos of customer companies, review scores from
credible review sites
5. A single conversion goal (or your call to action)
presented as a call-to-action (CTA) to encourage the users to take action
form: clickthrough page or lead generation page (consists of a form)
Reference:
Unbounce. (n.d.). The Anatomy of a Landing Page. https://unbounce.com/landing-page-articles/the-anatomy-of-a-landing-page/
Comments
Post a Comment