Labels

Application Design Ⅱ / Exercises & Task 1: App Design 1 Self-Evaluation and Reflection

29.8.2023 - 26.9.2023 (Week 1 - Week 5)
Takuto Hozumi / 0354047 / Bachelor Of Design (Hons) In Creative Media
Application Design Ⅱ
Exercises (In-class lecture)
Task 1: App Design 1 Self-Evaluation and Reflection

LECTURE

W1 Module Briefing

The goal of this module is to code and complete the design created in Application Design I and Final Project: Hight Fidelity Prototype in a way that actually works. Therefore, every assignment is a series of ongoing projects.


This time, the design will be HTML, CSS, and JavaScript-based. First, as an exercise, brush up on the final design for Application Design I. Subsequent tasks include designing the animations and other features needed for the application. Then, the final task is to complete the application in an actual working form. No back-end system is required. Only the front end creates the appearance.

W2 HTML/CSS Recap Exercise 1

Before we started designing the app, we did an exercise within the W2 class to recap HTML and CSS.

Requirements
  • Create a website using HTML and CSS
  • Total 2 pages in a single HTML file (scroll to switch between 2 pages)
  • Logo on the first page (centered vertically and horizontally)
  • The second page should have 2 columns.
  • The left column should have an image background and the right column should have elements.
  • Click on the logo to go to the second page, and click on the back button to go back to the first page.
Fig.1-1: Recap Exercise 1 Screen Shot (5/9/2023)

Outcome:

W3 HTML/CSS Recap Exercise 2

Week 3 began with an exercise to create the application design provided by the lecturer in a working form using coding. The first step is to design just the appearance on a web browser using HTML and CSS.

Fig.1-2: Given App Design

Key Points of this Exercise
  • Align the hierarchical structure of the overall div element
  • Overlap the div element to the image
  • vh to specify a width calculated from the screen

Feedback given;
By using units such as "em", whose size is calculated from the screen as a ratio, it is possible to accommodate devices of various sizes.

Outcome:

W4 JavaScript Exercise 1

Unfortunately, I had to miss this week because I caught a cold, so I recapped the class myself by hearing about it from a friend.

The content of the class was an exercise in introducing JavaScript into an HTML file and giving it the ability to change some displays when the play button is pressed.

Fig.1-3: After Pressing the Play Button
  • Now Playing text appears (text change by JS)
  • The play button changes to a stop button (image replacement by JS)
  • The background color of the box turns light gray (CSS rewriting by JS)
Basically, JavaScript is able to create a function that rewrites an existing code.

Outcome:

JavaScript can be filled in inside the <Script> tag and built directly into the HTML.
  • document.getElementById("ID").innerHTML = "ALTERATION"
    To change elements written in HTML
  • document.getElementById("ID").style.CSS HERE = "ALTERATION"
    To change CSS

W5 JavaScript Exercise 2

This was an exercise in introducing GSAP and adding animations using JS to further complete the look and feel of the application on week 5.


1. Add logo screen animation, then automatically transition to main page (Moving the logo, applying ease)

Example;
  • gsap.from("#logo", { y: -900, duration:1, ease: "bounce.out" delay: 2, onComplete: hideLogo })
gsap.to / gsap.from / gsap.fromto = Selection of starting direction
y: NUMBER = Moving distance
duration: NUMBER = Overall movement period
ease: "-----" = Refer to the GSAP website for EASE Type
delay: NUMBER = Delay animation start time
onComplete: FUNCTION NAME = After the animation is finished, the function will be activated

2. Opening and closing the hamburger menu
Create side panels with HTML, CSS, and set the movement with JS.

It consists of the following three codes;
  • var openAnim = gsap.from("#sidePanel", { x: -400, duration: 0.5, ease: "power2.inout" });
  • function openSidePanel(){
    document.getElementById("sidePanel").style.display = "flex"; openAnim.restart();
    }
  • function closeSidePanel(){
    openAnim.reverse();
    }
The animation movement is unified with var, and the closing is a reverse playback. Therefore, Ease should use "inout" not to move differently when in and out.

Outcome:

W6&7 JavaScript Exercise 3&4

The menu window, profile window, and search window, which appear from left to right when the hamburger menu is tapped, were then set up.


INSTRUCTION

Task 1: App Design 1 Self-Evaluation and Reflection

The purpose of the exercise is to brush up on previously created designs. Identify design problems and make design modifications before coding.

Fig.2-1: Final Design in Previous Module (App Design Ⅰ)


Fig.2-2: Prototype in Previous Module (App Design Ⅰ)


W1 Feedback from the lecturer is as follows;

1. Font size
There are too many different font sizes used: 10, 11, 13, 14, 16, 18 pt, and even more for emphasized characters. So, I will unify to about 3~4 types.

Fig.2-3: Regulation (Too Many Fonts)

2. Design in Plan details
Make the Best Seller more easily recognizable. Make the whole design less cluttered.

3. Payment Modal
The font on the payment page is also messed up.
Unify font size and overall style. Same issue as 1.

4. Line design
The line is too thin. Make it thicker, or color thicker, etc. to make it stronger.

W1 Updated Design
Fig.2-4: Main Page (OLD)

Fig.2-5: Main Page (NEW)

Fig.2-6: Plan Page (OLD)

Fig.2-7: Plan Page (NEW)

Fig.2-8: Purchase Page (OLD)

Fig.2-9: Purchase Page (NEW)

Fig.2-10: Top-up (OLD)

Fig.2-11: Top-up (NEW)

W2 Feedback from the lecturer is as follows;

1. Top-up Function
When determining the top-up amount, a new page should open to allow the numbers to be entered. In this case, it would enhance the UX if a button is created to allow users to do the most commonly used amounts such as 20, 30, 50, etc. with a single tap.

The font, bold or color of the card number and top-up amount may be changed.
Correction of minor typographical errors (Total > Balance, etc.)

2. Line design
Last time it was too thin, this time too thick. It should be adjusted a little thinner. In fact, on a smartphone screen, this would be thick.

W2 Updated Design

Fig.2-12: Top-Up Page 2

I have created a separate page from the top-up page that is opened by tapping on the top-up amount.

Fig.2-13: Line Thickness Design

The line design has been updated. As instructed by the lecturer, once the image was output, it was checked on the actual smartphone device to ensure that the lines were appropriate.

From W3 to W4, all pages were changed according to the design regulations improved in W1 and W2.

W5 Feedback from the lecturer is as follows;
The number buttons in Fig.12 are small, make them a little larger.
Adjust the margins to make it easier to tap.

Fig.2-14: Top-Up Page 2 (Revised)

W5 Final Brushed up Design
And the design in Figma, with all changes completed, is shown below.

Fig.2-15: New Design on Figma (26/9/2023)

FINAL OUTCOME

Task 1: App Design 1 Through Self-Evaluation and Reflection, how the design was improved is shown below.

Fig.3-1: Log in & Registration Page (26/9/2023)

These pages are unchanged.

Fig.3-2: Main Page Design (26/9/2023)

Basic formatting such as font size, line thickness, etc. was changed. This applies to all subsequent pages.
On the UX side, plan details have been added.

Fig.3-3: Plan Page Design (26/9/2023)

As with the main page, the design and content have been brushed up.

Fig.3-4: Purchase & Tools (26/9/2023)

Line thickness was changed according to the basic format. The purchase history section has a uniform font style.

Fig.3-5: Payment Window Design (26/9/2023)

The Purchasing Panel was reevaluated for necessary information and overall renovations were made. And the look and feel were significantly redesigned to be more appropriate for the mobile app design.

Fig.3-6: New Design of Top-up & Voucher System (26/9/2023)

Added a top-up amount input page for a better UX. Also added a voucher system that was missing in the previous design.

Fig.3-7: Pages with No Change (26/9/2023)

These pages are unchanged.

Fig.3-8: Payment Page Design (26/9/2023)

The lines have been modified according to the basic format.

Fig.3-9: New Pages Regarding Payment System (26/9/2023)

The loading screen was added because it was assumed that a loading screen would be needed in the actual working app design. In addition, a fictional QR code was made as a convenience store payment system.

Fig.3-10: Features in Tools (26/9/2023)

Added a line and a frame for setting the profile image that was missing.

Fig.3-11: Inquiry Form Design (26/9/2023)

A drop-down menu has been added, as well as a confirmation modal window before sending a message to prevent user operation errors.

Fig.3-12: New Components Design (26/9/2023)

The dropdown menu and loading circle were newly designed.

REFLECTIONS

Experiences
In this task, we recapped our previous knowledge of HTML, CSS, and improved on the design we created in the previous semester with exercises that expanded on it. We also learned new rudiments of JavaScript and got a general idea of what it is all about. About the visual design of the application, I researched again and refined it with the lecturer's feedback, and I believe that the final outcome is so much better than the previous design.
    Observation
    I learned the importance of designing with actual operation by a human in mind. In particular, I think that during the course of the project, I ignored the smartphone screen and only used the PC screen to design the site. After that, I made sure to display screenshots on my phone to make sure the button size and font size were appropriate. This made it easier to identify design issues.

    Findings
    In the Application Design 1 module, I thought I had redesigned, that was analyzed one app (in my case Celcom Life), conducted user research, and redesigned it with UX in mind. However, when I took some time to think about it again, I found that some pages that should have been necessary were missing, and the design did not look very good. It is difficult to do in a 14-week module, but it gave me an opportunity to reaffirm the importance of looking at my design objectively. I will try to design with a little more attention to detail.
    Labels:

    Comments

    Post a Comment

    Popular Posts