Interactive Design - Project 1: Prototype Design

24.4.2023 - 8.5.2023 (Week 4 - Week 6)
Tan Yi-Tyng (0353327)
Bachelor of Design (Hons) in Creative Media
Interactive Design
Project 1: Landing Page Design Prototype

LECTURE

WEEK 5 (3.5.2023): Information Architecture, Site Structure & Wireframe

Keynote:

Organizing a Website

Organize the information logically, so that users can easily locate the information they're looking for.

First step: Chunking

Dividing the site's content into manageable chunks of information, with all chunks related conceptually to one another.
Content within each chunk can then be arranged hierarchically, so that the most important topics within a chunk will appear first in a navigational system.

-Information architecture describes the overall conceptual models.
-General designs used to plan, structure, and assemble a site.

Site Structure

Users build mental models when confronted with a new and complex information system to assess relations among topics and to guess where to find things they haven’t seen before.

The success of the organization of your web site will be determined largely by how well your site’s information architecture matches your users’ expectations.

The browse functionality of your site

Efficient web site design is largely a matter of balancing the relation of major menu or home pages with individual content pages.
If your web site is actively growing, the proper balance of menus and content pages is a moving target (feedback from users).
Complex document structures require deeper menu hierarchies, but users should never be forced into page after page of menus if direct access is possible.

Three essential structures

1. Sequences

Place it in a sequence - simplest and most familiar way to organize information.
Chronological, a logical series of topics progressing from the general to the specific, or alphabetical, as in indexes, encyclopedias, and glossaries.
Straight sequences are the most appropriate organization for training or education sites.

2. Hierarchies

The best way to organize most complex bodies of information.
For corporate and institutional life, users find this structure easy to understand.
Simplest form of hierarchical site structure - a star, or hub and spoke, set of pages arrayed off a central home page.
The site is essentially a single-tier hierarchy.
Navigation tends to be a simple list of subpages, plus a link for the home page.
Multitiered hierarchical or tree architecture - this arrangement of major categories and subcategories has advantage for complex site organization in that most people are familiar with hierarchical organizations, and can readily form mental models of the site structure.

Site files and directory structure

Site diagrams - when project moves from planning to web page production.
The site diagram is often the first place programmers look to gain an understanding of how the site files should be subdivided into directories (folders) on the server.
The pattern of directories and subdirectories of the site files should mirror the major content divisions and structures as shown on the site diagram.

Wireframes

The rough two-dimensional guides to where the major navigation and content elements of your site might appear on the page.

INSTRUCTIONS

PROJECT 1

Landing Page Design Prototype

For this project 1, we are tasked to create a landing page for an existing website with identified design problems to improve the user experience. A landing page is the first page visitors see when they arrive at a website, and it is crucial for making a good first impression.

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.
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).
Your landing page should include a clear and concise headline describing the website's purpose.
The landing page size width is 1366 pixels.
The landing page should include a call-to-action (CTA) a button that directs users to the most important part of the website.

Choose a website with design problems

In week 4, we are instructed to come up with 3 website choices to think about their design problems that we can improve and decide on one website to redesign for this project. Before starting, I went online and read some articles to study how to analyze a website's interface and user experience, which gave me a better understanding of how to redesign a website for this project.

Here are the 3 options for websites:

1. https://www.zara.com/us/ (Unconventional navigation)

Problem:

Landing page making like an editorial magazine will cause users difficulty in navigating.
Poor usability as the small text size and hidden navigation menu behind a hamburger button can confuse visitors.
Browsing products is not a straightforward experience on the Zara website.
With no explicit CTA, visitors can easily become confused or frustrated.

2. https://www.wayfair.com/ (Lack of visual hierarchy)

The landing page offers a plentiful amount of choices, but the lack of visual hierarchy can be overwhelming for users.
The landing page features elements that are almost identical in size, color, and copy, making it difficult for users to prioritize their choices.
Without visual hierarchy, it can be challenging for users to determine the desired action or where to click next.

3. https://torontocupcake.com/index.html# (Lack of credibility)

Low-resolution images can make the website look unprofessional and cheap and may not accurately represent the actual product being sold.
Inefficient menu navigation as the main menu is hidden behind the hamburger icon, making it harder for visitors to find what they are looking for and potentially leading to a confusing user experience.
The content on the landing page is cluttered and lacks a clear hierarchy of information. The text and images are poorly organized, making it difficult for users to understand the website's purpose and find the necessary information.

Then, I decided to choose the third option website (Toronto Cupcake) for this project as I found out that there are many design problems that gave me the opportunity to redesign the website and improve the user experience. For this project, I used Figma to create the wireframes and the landing page design. As I'm unfamiliar with this software, I watched some youtube tutorials on how to use Figma to get familiar with all the function tools and the workflow.

Identify and analyze the website

Overview of the website:

Toronto Cupcake is a Toronto-based business that delivers delicious gourmet cupcakes. They've been operating for 11 years and mainly target business meetings, birthdays, and weddings.

Problems:

Poor usability as the navigation menu is located at the bottom of the homepage, with a tiny burger menu and no CTA button on the main page.
Low image quality will hurt credibility as users assume that the quality of digital presence is directly proportional.
On the home page, only a close-up shot showing the packaging instead of their product cupcake.
No general structure on different web pages or a consistent color palette throughout.
Too many white spaces on the homepage will also lead to showing too plain and simple.
Irrelevant and unattractive content on the main page.
The first glace of the homepage design looks outdated, and customers might think the products and overall brand are obsolete and opt for a newer or trendier brand.

Solutions:

Redesign the landing page and give users an experience that lets them quickly see and buy cupcakes while enhancing their entire experience with the Toronto Cupcake website.
Make access to the cupcakes visually prominent.
Improve the color palette to create more contrast.
Delivery info on the landing page makes it more visible and easier to find.
Higher quality prominent imagery of the products.

Competitive Analysis

In order to understand deeper what are the essential design components should include on the landing page of a cupcake website. I started to research and analyze their competitor websites and bakery websites.

Design & Mood Board

To consider how I can properly represent Toronto Cupcake's unique brand identity through the landing page, I started the branding process by looking for various components (color, font, and images) that matched their brand attributes of simplicity, elegance, and joy. I decided to use their brand identity color pink as the dominant for the landing page, blue as the complementary, and black as the accent. Then, I created a mood board for me to refer to and maintain the design's consistency on the landing page.

Fig. 1.1 - Mood Board

Wireframe

Moving to the next part, I started working on the wireframes in Figma. I first create a 1366px width frame and set 12 column grid, making it easier for me to organize the design elements on the landing page. For the icons, I get them from plugins on Figma that can be customized in color and stroke thickness.

Fig. 1.2 - Create 12 column grid

Fig. 1.3- Used icons from plugins

Fig. 1.4 - Process of working on wireframes in Figma

Fig. 1.5 - Final Outcome of Four Wireframes (JPG)

Fig. 1.6 - Final Outcome of Four Wireframes (PDF)

Landing Page Design

After getting feedback from Mr. Shamsul, the third wireframe was selected for the landing page design. For the images, I was not taking from the original website. Instead, I looking for similar images with high resolution. As for some close-up cupcake images with transparent backgrounds, I took them from the Georgetown Cupcake website, which looks more professional and appealing.

Fig. 1.7 - Took product images from Georgetown Cupcake

Fig. 1.8 - Process of working on the landing page

Fig. 1.9 - Using guidelines to make sure they are all aligned

Fig. 1.10 - Organizing all layers

Fig. 1.11 - Grouped layers according to each section on the landing page

Fig. 1.12 - Landing Page Design Prototype (JPG)

Revised landing page design

In week 6, Mr Shamsul commented on our work during the class and after getting the feedback, I revised some of the parts.

Fig. 1.13 – Before (right) & After (left)

For the Popular Menu section (Fig. 1.13), Mr Shamsul mentioned that the button design must be consistent throughout the landing page. So, I adjust the shape of the three buttons on the top to be less roundish. I also change the arrow with a circle to match the other section.

Fig. 1.14 – Before (Top) & After (Bottom)

The same goes with the testimonial section (Fig. 1.14), I have also changed the arrow with a circle.

Fig. 1.15 – Before (Top) & After (Bottom)

For About Us section (Fig. 1.15), Mr Shamsul suggested that I change the Read More CTA button to a link as it not nesccary to emphasise that much.

Fig. 1.16 – Before (Top) & After (Bottom)

For the Shop By Category section (Fig. 1.16), I mentioned previously that the button design needs to be consistent, so I adjust their roundness to match with other buttons. Also, Mr Shamsul said I could try to make it less round for the images' edge.

Fig.1.17 – Before (Top) & After (Bottom)

Lastly, for the footer (Fig.1.17), I made some minor changes to the arrow button and the shape of the signup button.

Final Outcome

Click HERE to view Toronto Cupcake original website.

Click HERE to access the live prototype on Figma.

Fig. 1.18 - Landing Page Design Prototype (JPG)

Fig. 1.19 - Landing Page Design Prototype (PDF)

FEEDBACK

WEEK 5 - Project 1 (Landing Page Design Prototype)

5.5.2023 (Selected website with design problems & 4 Wireframes)

Looks like you've selected a very poorly designed website. Which is good and the problem is clearly stated.
And as for the wireframe, from a first glance, looks like idea 3 has a potential.
I would suggest you use AI to help you to come out with better text/copy to replace the lorem ipsum.
And I don't think you need to ask user to subscribe a newslettter.
And 'Our Policy' is not necessary for a cup cake website.

7.5.2023 (Final outcome landing page design)

It looks better than the original website.
The shop by category section, the drop shadow is too strong. Maybe you want to reduce the opacity a bit more.
Overall design looks okay.

8.5.2023 (Final outcome landing page design)

Make sure all the buttons design is consistent. For example, does all button need shadow or without shadow, the buttons shape rounded or square edged, rounded rectangle shape or circle?
For the About Us section, the button “Read More” doesn’t need to be so obvious, you can just change it into links.
For the Shop By Category section, the shape edges are all too rounded, maybe you could try to adjust it to be less rounded so that it would look consistent with the above section.

TAN YI-TYNG (0353327)