Interactive Design/Project 1

on
1.5.2023 - 15.5.2023/Week 4 - Week 6
Sim Jian Xiong (0356498)
Bachelor Design (Hons) in Creative Media
Project 1
LECTURES 

Week 5 - Organizing a Website
  • Organize information logically, so that users can easily locate the information they're looking for
  • "Chunking" is to divide the site's content into manageable chunks of information, with all chunks related conceptually to one another
  • The most important topics within a chunk should appear first in a navigational system
Site Structure
  • When confronted with a new and complex information system, users build mental models to asses relations among topics and to guess where to find things they haven't seen before
  • A logical, consistently named site organization allows users to make successful predictions about where to find things
Fig 1.1 Landing Page Example

INSTRUCTIONS
 
Project 1 - Landing Page Design Prototype
Our task for today is to create a landing page for an existing website that we feel that has a design problem. I've noted down three websites and chosen the one that I think needs the most improving.

ORIGINAL WEBSITE
Fig 1.2 Original Website, Week 4 (1.5.2023)

Purpose: To get consumers to buy rights to use the film "The Room"

Problems:
  • Navigation bar should be at the top left
  • No CTA button
  • Cluster and unorganized hyperlinks, most doesn't work
  • Inconsistent style
  • Poor Layout
  • Very long landing page (because of all the links)
  • Distracting images and GIFS
REFERENCES
I don't know the proper layout of a website that sell movie rights so I looked at two related websites that has good layout.

WIREFRAMES
Fig 1.3 Five Wireframes, Week 4 (1.5.2023)

After looking at the two references, I feel that all the hyperlinks to tours and events are unrelated to the website. That removes a huge chunk off the website, which make my wireframes more simpler. For the first three wireframes, I created trailers, featured movies and reviews so users can have a basis of the value of a movie before they buy/sell rights to it. I like the layout of my fifth wireframe where I placed the buy/sell button on the top, featured movies in the middle and a featured catalog at the bottom. It has one smooth hierarchy.

WEB DESIGN
I'll be using Figma for this task as I'm unable to download Adobe XD on my device.

Fig 1.4 Original Website Navigation Bar, Week 5 (5.5.2023)

One feature I like in the original website is the navigation bar. The font reflects a typewriter, a traditional tool of screenwriters.

Fig 1.5 Landing Page Redesign Progress, Week 5 (5.5.2023)

To replicate the navigation bar, I used Courier Prime as my font. I decided to have "Sign In" as my primary call-to-action button. I adjusted the temperature of the iconic movie scene so it look like a television resolution. I then copied the headline from one of my references and aligned it to his head. I thought of creating a general marketplace website of Tommy Wiseau's films instead of just one specific film.

FIRST SUBMISSION
Fig 1.6 First Submission, Week 6 (8.5.2022)

I've added featured movies and catalog. I copied text and mimic layouts from my references, only editing them when necessary. 

WEB DESIGN - REFINEMENT
Fig 1.6 Landing Page Redesign Progress

After a feedback session, I use layout grids to adjust images and text accordingly.

Layout Grid Settings
240 rows (20px)
12 columns (80px)

FINAL SUBMISSION
Fig 1.7 Project 1 Final Submission, Week 6 (8.5.2023)
FEEDBACK

Week 6
General Feedback: None
Specific Feedback: Your wireframes have no right flow, arrangement have to be from left to right. Body text should be in sans serif. Featured layout not professional, should be same size. Arrows should be like "<". Remove the lines from navigation bar.
REFLECTIONS

Experience
Like the website replication, I enjoyed this task. Maybe because I have references to make my work easier.

Observation
Because this task is similar and sequel to the previous one, my mind is still fresh on their website structure. I noticed I'm able to pass on what I've seen to this task, such as the logo should be on the left, aligned with the primary CTA button on the right.

Findings
At first, I thought by mimicking existing websites, my replication will be perfect. I then realised there's still room for improvement, such as the images not aligned makes the layout look unprofessional.
 
FURTHER READING

Week 4

This week's reading resource is a link to a website on "The Anatomy of a Landing Page" by unbounce. I read the part where it describes the components of a landing page.

 Components of a Landing Page
Five Core Components:
  1. Unique Selling Proposition - "What makes this offer so special?" Describe in the main and supporting headline
  2. Hero Image - First impressions are important as the hero image or video is the first visual users will see
  3. Benefits - Support your selling point with benefits, along with features
  4. Social Proof - Arguably the most powerful tool at your disposal. Reviews, case studies and testimonials can influence a user to buy your product. But never fake it!
  5. Call-to-Action - A landing page should be focused on one conversional goal. Should be short and specific so users know exactly what they're getting by clicking it.

Comments

Post a Comment