Interactive Design - Project 1

-

 08/05/2023 - Week 6

Jason Antony / 0356335

Interactive Design / Bachelor of Design (Hons) in Creative Media

Project 1

Instructions
Your task is to create a landing page for an existing website of your choice that you feel has a design problem. A landing page is the first page that visitors see when they arrive at a website, and it is crucial for making a good first impression. Your landing page should be designed to improve the user experience and address the design issues you have identified on the original website.

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. Develop a concept for your landing page that addresses the design issues and improves the user experience. 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).

Deliverables:
 A one-page design concept that describes your landing page and the design issues you are addressing.
 
Your landing page will be assessed based on the following criteria:
The creativity and effectiveness of your design concept.
The quality of your wireframe or mock-up.
The overall user experience of your landing page.
Reflection on your e-portfolio.

Requirements:

Your landing page should include a clear and concise headline that describes the purpose of the website. The landing page size width is 1366 pixels. Follow the preset in Figma or Adobe XD. The landing page should include a call-to-action (CTA) button that directs users to the most important part of the website. It should be visually appealing and easy to navigate. The landing page should adhere to web design best practices, including accessibility and usability.


Process

Chosen Website: Lazada.com

The Lazada website is functional; however, there can be many improvements to the design.
  • Too many bright colors make the website feel cheap.
  • The ad banner doesn't have navigation buttons.
  • There is no menu to show all categories, instead, they put categories on the landing page itself, which makes it cluttered. 
  • Inconsistent hover animations.
  • Inconsistent rounding with rectangles. 
  • Spacing and padding look and feel cramped. 
  • The messages floating button is not in an optimal position. 
  • No back to top button. 
  • The login and sign-up button is not a button and is placed with other text.
  • Text hierarchy could be improved. 
  • The aesthetic of the page could be more consistent. Cards and buttons have different styles. 
  • No drop shadow for buttons and cards. 
Wireframes

 Wireframe in Figma

For the wireframes, I used filler text and rectangles for images. I focused on layouts and experimented with different positions of cards and carousels. 

Final Design

I used a 12-column grid for the working frame. I also used the 8 pt system for my work. this means that the padding and spacing are almost all increments of 8 pt, or close to 8pt. For rectangle rounding in cards, banners, and carousels, I used the double system. This means large rectangles will have to double the rounding of smaller rectangles. For example, I used 12 pt for the large ad banner and product cards. Icons are kept at 6 pt rounding.  Drop shadow settings are 0x 4y 9blur 0spread #000000 10%.  

Figma Workspace

Final Website Design


Feedback

Sir Shamsul advised me to actually use product pictures on the mockup. This makes the design look and feel more professional. He also suggested I make the buttons more consistent and decrease the drop shadow intensity. 

Reflection

Through this project, I have learned many things. I have never touched Figma before this project and I am grateful that I get to learn this software in this module. Initially, finding a website to improve was hard, because of the many factors to be considered. The first wireframe was the most difficult part of my process of doing this project. I just started fiddling around and learning how to use this software. Though, after I finished the first wireframe, I began to enjoy using the software. 

I have learned a lot from this project. I learned what makes good and bad websites. Not just that, but I implemented that knowledge and created a successful design. I am grateful for this project because it helps jumpstarted my design path in UI/UX, which is the specialization I am going to take. 

Comments

Post a Comment

Popular posts from this blog

Final Eportfolio - Games Development

-
Image
 Exercise Week 1 Adam's Nightmare  The concept of this game is similar to Limbo, by using silhouettes, and dreamlike design elements. The game is designed so that the users interpret their own stories. This creates a mystery that can be a profound experience for gamers. However, the gameplay could be drastically improved. For instance, the game basically revolves around jumping over obstacles and pushing or dragging different elements to progress within the "nightmare". However, the physics of the jumping is not responsive enough for the obstacle courses within the levels. the dragging and pushing are also designed in a way that causes the game to feel unrealistic. for instance, when the user tries to pull a box, the character seems to have the "force", so it could pull objects without actually touching them. The difficulty of the game is also a problem. Usually, difficulty levels scale within the game in a way where easier levels are
Read more

EXPERIENTIAL DESIGN - TASK 3 : CREATIVE EXPERIENCE DESIGN PROJECT PROTOTYPE

-
Image
EXPERIENTIAL DESIGN - TASK 3 : CREATIVE EXPERIENCE DESIGN PROJECT PROTOTYPE Jason Antony / 0356335 / Bachelor of Design in Creative Media Experiential Design Task 3 : Creative Experience Design Project Prototype November 5, 2023 TASK Instructions The prototype will enable the students to discover certain limitations that they might not have learnt about before. They’ll have to creatively think about how to overcome the limitations to materialize their proposed ideas. The objective of this task is for the students to test out the key functionality of their project. The output may not necessarily be a finished visually designed project. The students will be gauged on their prototype functionality and their ability to creatively think of alternatives to achieve the desired outcome.  Progression I started the project by looking at some 3D models for the cells on sketchfab, but then I found out there is a sketchfab plugin on unity. I then exported the 3d model into the AR Scene.  Once I exp
Read more

EXPERIENTIAL DESIGN - Final Task

-
Image
EXPERIENTIAL DESIGN - Final Task Jason Antony / 0356335 / Bachelor of Design in Creative Media Experiential Design Task 4: Creative Experience Design Project December 15, 2023 Coming from the prototype I've improved several parts of the app. **1. AR Scene:**    - In the AR scene, I experienced the heart of our educational AR app. Here, I harnessed the incredible capabilities of Unity's AR Foundation to bring cell biology to life. By simply tapping on the screen of my mobile device, I was able to place a 3D model of a cell into my real-world environment. It was awe-inspiring to see the cell model seamlessly blend with my surroundings. I used Sketchfab to import the 3d model and create the labels. Then I made the object able to rotate, zoom, and move using a plugin called Lean Touch.  **2. Notebook Scene:**    - The Notebook scene was like opening a digital textbook on my mobile device. It was designed to be viewed in portrait mode, offering a comfortable reading experience. The
Read more