LECTURES
Week 2:
During class, we were required to redesign an Air Asia boarding pass as a group to improve it. It has to convey important information to the targeted audience.
|
| Image given to us |
We set a hierarchy of the information that is the most important and start to improve on the design.
After some discussion, we came out with this as our final design
|
| Final Redesign |
INSTRUCTIONS
TASK 1 - Self-Evaluation and Reflection
We are required to perform a self-evaluation and reflection based on their mobile application design 1 final project. We have to submit a self-reflection blog post on the app design refining process with a clear comparison between the old and new designs. By asking AI for feedback, we have to improve from the older design and defend our design if there is any disagreement.
Old Design (Steam):
Final Proposal of Steam App
|
|
Old Design of the App
|
App Design Refinement:
Self-Reflection
For the old design, I think the layout of the things users need is clear and easy to navigate. But looking at it the visual does fall flat and dull, I could really improve the visuals to make it more interesting and appealing.
There are many of the same weaknesses that are all throughout the Old Design such as:
- Colour Contrast
- Text Size
Sign In Screen
Solutions/Improvements:
- The sign-in screen has simple changes, mainly improving the visual to make it more appealing to the users. There was a debate on whether I should add a repeating pattern as the background but thought against it because it would be too distracting.
|
| Old and New Design Comparison |
Home Page
- Clear Visual Hierarchy
- Strong Visuals Branding
- Logical Navigation
- Call to Action Buttons
The visuals clearly present what the brand's audiences are and have straightforward navigation. Everything you see does what it is assigned to do clearly.
Weakness:
- Spacing and Padding
- Typography Hierarchy
- Contrast and Visibility
- (Spelling errors)
The major problem here is the visibility of the contents. Each section is too close to the other, the size of the heading and body text are similar, the contrast was not enough, and my... spelling mistakes... (I only misspelled one word here but was called out three times from the feedback, thanks, I know...)
Solutions/Improvements:
- The first thing I did was to make it more visually appealing and interesting to the user's eyes. I added a gradient and a pattern for the background.
- With the background change, I start to rearrange the sections and give them some glow-up to stand out more.
- Mainly change the colour to brighten them up more from the background, but not too bright that it looks off.
- Then finally I adjusted the text size to show a better hierarchy within the texts. And yes I did correct my spelling error.
- Additional things I changed are Putting the search icon into the search bar (no clue why I didn't do it for this along some other page only), and changing the colour of the buttons.
Game Category Page
Strengths:
- Good Visual Hierarchy
- Effective Use of Cards
- Smart Grouping
- Use of Visuals
Overall a good use of images and sections for the visual, it is simple and straightforward. Hierarchy is presented well with the way the size of the sections are used.
Weakness:
- Spacing & Padding Feel Tight
- Title Truncation Issue
- Tags Visibility
- Colour Contrast
Identical issues with almost every page previously (and the ones after). However one issue that I will admit that I didn't realise was my overuse of "..." which does makes everything look more compress than it actually is.
Solutions/Improvements:
- I decided to add more colour for contrast and make each section pop out more from the background, in this case I chose a more vibrant blue
- After that I start fixing the spacing between text and sections. I provide two lines for the text of the game name for a cleaner presentation along with the tags.
- Improved the visual of the section for More Games. Make the box wider to hold more text for games with longer names, and also made the text lighter to be more visible.
Game Page
Strengths:
- Clear Information Hierarchy
- Strong Visual Emphasis
- Interactive Tags
This page is one of the more interactive pages where the user can toggle from one information window to another, with the option to add the game to a Wishlist or Shopping Cart, and to purchase the game.
Weakness:
- Spacing & Density
- Icon Clarity and Size
- Tab Interaction Visibility
- Accessibility: Colour Contrast
Solutions/Improvements:
- It is the same thing throughout the redesign. Add more colour contrast, adjust the spacing, and the visibility of the text.
- One major change was to the visual for the Information window. I added a more noticeable indicator of which window the users are looking at currently.
Purchase Page
Solutions/Improvements:
- The original design is already decent, it contains the information the user needs. The only improvement I did make is the colour contrast. Tha same applies to the Shopping Cart Page.
Shopping Cart Page
Notice Page
Strengths:
- Clear Visual Hierarchy
- Consistent Layout
- Dark Theme Contrast
- Touch-Friendly Cards
Weakness:
- Lack of Section Spacing or Headings
- Text Format & Visibility
- Visual Overlap Risk
Solutions/Improvements:
- The changes made here are around the same as any other pages, adjust spacings and make it more visually appealing to the eyes.
- One thing I added is the game's icons for a better indicator of which game was the notice from. Most effective for the ones that only announce with just text.
Chat Page
Strengths:
- Clear Navigation
- Group Avatars at the top
- Visual Consistency
- Call-to-Action Button
Have the typical thing you'd see in messaging platforms.
Weakness:
- Visual Clarity Between Sections (Group and Message)
- Less Spacing Between Messages
- Visibility of Text
- Lack of Visual Difference between Username and Message
The box for the messages doesn't stand out much from the background. Spacing between Groups and Messages should be more to better differentiate them. Not much visual difference between the user name at the text from the user which can be confusing.
Solutions/Improvements:
- Make the message box of the user stand out more from the background, gradient is added to them to match the overall theme of the app. (To be real once I found out about gradients I be using them everywhere, AND it does work out well).
- Time stamps are also added because it is common on texting platforms.
- The UI of the "Add" button didn't change much but did add a shadow to separate it from the Messages.
Chat Page
Solutions/Improvements:
- The changes I made for the chat are the spacing for each message, added text bubble, added time stamp, removed navigation bar for more chat space, and a "More" icon.
Profile Page
Strengths:
- Clear Structure & Hierarchy
- Consistent Visual Language
Weakness:
- Spacing & Visual Balance
- Accessibility of Font Contrast
Solutions/Improvements:
- I looked through some profile page references and noticed that most profile page on mobile have their profile picture and user name centred, so I made a change to that.
- Made the buttons like "Activity" the colour of the rest of the buttons from other pages, it is a light colour which encourages users to interact with them more often.
- While the buttons like "Account Detail" are a darker colour, they are usually used the least, only when the user encounter problem with their account.
Wishlist Page
Strengths:
- Consistent Visual Structure
- Clear & Recognisable CTSs
- Sorting & Filtering
- Colour Usage
Weakness:
- Truncated Titles
- Visual Density
- Unclear Name of Button (Option)
- Hierarchy of Information
Again the overuse of "..." can be represented here most. The size of the game name and price are too similar which is uncomfortable to look at. The "Option" button is vague on what it does, new users may not know the function or get confused by it.
Solutions/Improvements:
- I changed the text from "Option" to "Filter" instead since it is more commonly known and straightforward.
- Adjusted the size of the price button and the colours. Added a slide bar to indicate how far down the user had scrolled.
Final Submission of New Design:
|
| App Design After Improvement |
Figma link click HERE
Presentation Video: HERE