Application Design 2 - Task 1: App Design 1 Self-Evaluation and Reflection

24/4/2025 - 29/5/2024 / Week 1 - Week 4
Cindy Clarissa Leslie / 0367677
Application Design 2 / Bachelor of Design (Hons) in Creative Media
Task 1: App Design 1 Self-Evaluation and Reflection  


INSTRUCTIONS

 

In this task, students are required to do a self reflection and analyze their previous design created in Application Design 1. Students are then required to create solutions and make improvements on both aesthetic and user flow.



Task 1: App Design 1 Self-Evaluation and Reflection  

Reflection




Launching/Onboarding Page:

Figure 1.1 Launch page design

This will be the first screen that users see when they access the app, wherein they could either choose to log in an existing account or create a new one. The log in screen has a moving background of rotating different pictures submitted by users on the app. When new users create an account, they will be given a choice to choose their interests so that the app is able to show content tailored for them.

Strengths:
  • Clear contrast in CTA buttons, makes it accessible while guiding users which actions to do.
  • Visually engaging, community submitted images in the background shows emotional connection and trust between users and the brand.
  • Personalize options in choosing interests.
General Improvements:
  • Colours in the background may hinder readability of text, reducing accessibility. Consider dimming the background pictures.
  • Add in micro animations when users choose their interest for clear feedback.
  • Visibility in skip button.
  • Further error prevention especially when inputting email and password.


After


Figure 1.2 Changes made to launch page



Home Page:

Figure 1.2 Home page design

Homepage UI design is mostly taken up by user's uploaded pictures, where it is properly categorized into two main tabs: For you and Following. There are additional functions on the top right of the screen where users can access their notifications and messages. Navigation bar is on the bottom on every screen. Each posts has user interactions including, like, comment and share.

Strengths:
  • Clear visual hierarchy and layout, the segmentation of different tabs is clear which also further allows user to personalize their homepage. Padding and spacing between posts are separated enough.
  • Dark mode aesthetic; allows for more accessibility with high contrast between colours.
General Improvements:
  • Iconography is inconsistent. tap target icons should be minimal 48x48dp for accessibility and generally easy use.
  • Accessibility issues; ensure that high colour contrast meets WCAG 2.1 AA standards. Make the underline of each tab thicker as it is currently subtle (furthermore consider adding a microanimation). 
  • Weak notification page; consider adding segmentation options (sort by recent, notification types) by using a collapsable section.
  • Consider changing into a Floating Action Button to encourage easy post uploads especially for a mobile app.


Profile Page:

Figure 1.3 Profile page design

Profile page consists of users being able to view on the pictures they have posted on the app. Accessibility features, help center and additional features are available on the drop down menu.  Furthermore, one of the main features in this page is photo album organization that users can freely customize.

Strengths:
  • Huge personalization and profile customization option, header and profile picture is large

General Improvements:
  • Inconsistent image aspect ratio, though it is for stylistic choices consider adding an option to change layout viewing. (ex 1:1 image aspect ratio viewing)
  • Add more confirmation for save and especially for delete to ensure error prevention, additionally for the logout function.
  • Album display design also shows inconsistent spacing and positioning, consider changing it.


Explore Page:

Figure 1.4 Explore page design

The explore page features a section full of pictures submitted by other users categorized based on interests/popularity. Trending pictures and categories are shown while refreshed daily therefore users are able to find new content every time they access the app. Furthermore, the explore page includes a search bar where users can search for other profiles or keywords.

Strengths:
  • Content categorization works well, aligns with users interest which adds engagement and retention. Despite having large volumes of images, the categorization makes the content easy to explore.
  • Effective visual hierarchy seen in search bar and posts itself. Suggested keywords and autocomplete in search bar enhances learnability. Clear path to engagement actions (likes, comment etc)
General Improvements:
  • Lack of visual contrast in certain areas especially on search bar. Search bar may blend in with the background colour easily, suggesting the use of a lighter shade or border to differenciate better.
  • Minimal separation between different tools, seen in the features when viewing post. Use different shades to make navigation easier.
  • Lack of visual weight in engagement actions, icons are rather small, consider using bolder or larger sizes to make it more visible/accessible.


Group Page:

Figure 1.5 Group page design

The group page is the area to which users can join different kinds of communities and interact with other users. The home screen for the group displays posts from groups users have joined, these posts include text-only posts or additional medias. When viewing a group, users can switch between viewing all posts or only medias. Additionally, there's an option for users to view these posts based on recent or trending.

Strengths: 
  • Clear navigation, completely shows user-generated posts from joined groups. Filter from trending or most recent adds more user control.
  • Posts has consistent visual hierarchy.
  • Good feedback loop (buttons, from join to joined), tap targets are well sized and spaced.
  • Exploration is intuitive and mobile friendly with strong CTA found in the buttons, encouraging more interactions for touch targets.
General Improvements:
  • Drop down for sorting (recent and trending) is easily missed, consider segmenting it better and show the active sort criteria.
  • Add more spacing between images to avoid clutters.
  • Add more details such as the option to report someone in the prototype.
  • Consider adding a group notification tab

Uploading Page:

Figure 1.6 Upload page design

The upload page includes access to in device files and directly posting pictures from user's mobile phones, furthermore editing tools are available for users seeking to enhance their portraits. Lastly, users can input information and tags for more discoverability, taking them to the loading screen when they press the upload button before it shows up on their profile page.

Strengths:
  • There's a clear flow where the users would understand to follow, the uploading process has been broken down into: select image > edit > add information > upload. This provides clarity and user friendliness especially to those who are new to the app.
  • Encourages content discoverability in the edit info section with features such as location and tags.
  • Feedback state is visible from the uploading screen, assuring users that their actions are in progress.
General Improvements:
    • For adding info section, add in a placeholder text to ensure user friendliness, guide the users to add in their input into the text box.
    • Loading screen may seem to be ineffective in certain situations, add in a progress bar to be more informative with uploading process.

      Comments

      Post a Comment

      Popular posts from this blog

      Advanced Typography - Task 3: Type Exploration and Application

      Image
      16/6/2024 - 22 /7/2024  / Week 9 - Week 14 Cindy Clarissa Leslie / 0367677 Advanced Typography / Bachelor of Design (Hons) in Creative Media Task 3: Type Exploration and Application LECTURES Link to  lectures 1 to 4 Link to lecture 5 INSTRUCTIONS In this task, we were required to propose specific problems and how we could design a font in order to solve them. These proposals were collected in slides format and proposed to the lecturer in order to decide which ones were good enough to do. Research Figure 1.1 Slides for proposal. Week 9, 16/6/2024 In the end, I chose to create an extension based on my old font and go with the final idea of creating a font for a band, I wanted to be able to present their metalcore music that showcases how different songs in the album is able to be loud and sharp, while some of their songs are on the softer side. Figure 1.2 Original logo/typeface for the band. Week 9, 16/6/2024 Setting the original typeface as a reference itself, I wanted to be ab...
      Read more

      Advanced Typography - Task 2: Key Artwork

      Image
      20/5/2024 -  14/6/2024  / Week 5 - Week 7 Cindy Clarissa Leslie / 0367677 Advanced Typography / Bachelor of Design (Hons) in Creative Media Task 2: Key Artwork LECTURES Link to lectures 1 to 4 Week 5: Lecture 5 Perception and Organisation Contrast Figure 1.1 Different ways to create contrast in typography. Week 5, 20/5/2024 Contrast - there are different methods that can be done to create contrast: Size: provides a point where the reader's attention should be at, ex, bigger letters will be seen first before the small ones. Weight: Using bold type to make it stand out in comparison to the lighter type of the same typeface, using rules, spot and square. Form: distinction between capital letter and its lowercase, roman letter and italic, condensed and expanded. Structure: Different letterforms of different typefaces. Texture: the way the lines of a type look as a whole up close and from a distance, depending on how they are arranged. Colour: second colour is less emphatic in valu...
      Read more

      Application Design - Final Project: High Fidelity App Design Prototype

      Image
      2 /12/2024 - 7/1/ 2025  / Week 11 - Week 14 Cindy Clarissa Leslie / 0367677 Application Design / Bachelor of Design (Hons) in Creative Media Final Project: High Fidelity App Design Prototype LECTURES   PROJECT 1: MOBILE APP PROPOSAL PROJECT 2: UI/UX DESIGN DOCUMENT PROJECT 3: LOW FIDELITY APP DESIGN PROTOTYPE INSTRUCTIONS Project 3: Lo-Fi App Design Prototype Design process Figure 1.1 Deciding on the final colour scheme At first, I was struggling a lot in deciding on the final colour scheme. I had a lot of different experiments switching from dark to light mode. Since there are 3 official brand colours, I had to choose one of the colours instead as I figured that the purple that I initially planned on using wasn't able to reflect on the brand. At the end, to ensure a strong branding, I eventually chose blue as the accents with additional pink from the logo as the numbered notifications and other interactive elements especially in liking posts that could add to the design in a ...
      Read more