24/4/2025
ALTAIFI, LEEN MAAN A (0367698)
Bachelor of Design (Hons) in Creative Media, Taylor's University
Application Design 2
Table of Content
1. Instructions & Tasks
- Task 1: Identifying Strengths & Weaknesses
- Task 1: Improving the App Design
2. Class Exercises
3. Reflections
1. Instructions & Tasks
Module Information Booklet
Task 1: Identify design improvements/refinements of your App Design 1 project and write them in the blog.
In Application Design 1, our task was to choose an existing app and enhance its UI/UX design. My choice of app was Cara, an artist portfolio and social media app. The improvements I've made focused on 4 main features:
1. Portfolio Management
2. Discoverability tools
3. Community Building
4. Job Searching & Application
Application Design 1 Original Design: Cara App
Adobe Xd Prototype Link
Reflections: Identifying Design Strengths & Weaknesses
1. Joining a Community Flow
 |
Fig.1.0: Joining a Community Flow - Cara App
|
|
In this flow, it showcases the steps to join a community from the Communities section in the Home page.
Strengths:
1. These screens show a linear path with strongly defined actions (e.g. browse, view, join) which makes it have a clear hierarchy and flow.
2. There is also an overall friendly and emotionally engaging tone because of the descriptive microcopies.
3. There is instant 'Join' feedback which reassures the user that an action is completed.
Weaknesses:
1. There is very low contrast in the color scheme, the lilac color is too light for the background.
2. The search UX could be more informative; it doesn't show any error feedback if there were no search results, or how many results are found.
3. The modal pop-up is barely distinct from the background; it needs more clarity.
2. Applying for a Job Flow |
| Fig.1.0: Applying for a Job Flow - Cara App |
In this flow, it showcases the steps to apply for a job from the Jobs section in the Explore page.
Strengths:
1. Buttons like “Apply Now”, “Submit”, and “Save” stand out visually with clear CTA hierarchy
2. Confirmation that “Application Sent” is visible with an icon and step progression
3. Fields are minimal and grouped logically: selection > personal info > portfolio > message.
Weaknesses:
1. Tabs for “In Progress”, “Applied For”, and “Saved” are subtle. Users might overlook them.
2. Though visually calm, it lacks personalization or next steps (“What’s next?”). results, or how many results are found.
3. It needs more focus on micro-interaction, improving informational clarity, and supporting accessible decision-making
3. Uploading a Post Flow |
Fig.1.0: Uploading a Post Flow - Cara App
|
|
In this flow, it showcases the steps to upload a post from the Create 'plus' Button in the Home page.
Strengths:
1. The process follows a logical, step-by-step user journey.
2. It has placeholder texts “What’s on your mind?” and “Add Categories to your Post” which are conversational and motivating, causing more natural engagement.
3. After posting, the newly published post appears at the top of the feed.
Weaknesses:
1. The Cancel button is visually equally strong as the Post button at the top.
2. Category Tagging Could Be More Dynamic
3. Between Post tap and seeing it live, no loading indicator is shown.
4. Profile Page
The profile page serves as a personal creative space, showcasing users' artworks, bio, and posts.
Strengths:
1. The top section includes avatar, username, bio stats, and an Edit Profile button — this follows expected social UI conventions (Jakob’s Law).
2. Section tabs ("Portfolio", "All Posts", "About", "QR") are separated clearly and are consistently styled across screens.
3. Tabs like All, 2024, 2023, Deep Series, are implemented as bubble filters, supporting intuitive content segmentation in the “Portfolio” view
Weaknesses:
1. The bubble filter tabs use lavender on white, which may not meet WCAG AA contrast standards.
2. Portfolio” appears both as a tab and a filter within “All Posts”, which introduces semantic confusion.
3. The list view post cards feel slightly compressed vertically — especially with captioned posts.
Solutions: Improving the UI/UX Design
1. Landing & Home Page
One of the most obvious changes that needed improving was the lack of contrast in the UI design, the lavender gradient colors I used were far too light on the background and against white text, making it hard to see, and does not meet the WCAG AA standards. Below are examples of the primary buttons with the changed color difference, with the original old version on the left, and the new modified version on the right.
 |
Fig.1.0: Log in/Sign up Pages (After)
|
 |
| Fig.1.0: Log in/Sign up Pages (Before) |
Instead of light lavender, I used a darker shade, Indigo, for maintaining the color scheme, and to have higher contrast. I had to modify it throughout all the screens;
 |
| Fig.1.0: Home page (Before) |
 |
Fig.1.0: Home page (After)
|
Apart from changing the button color to increase contrast, I changed the search bar design from to grey to increase visibility. I realized a mistake I've made while designing this the first time was that i didn't take in consideration of the information visibility at a distance, or people with eyesight difficulties, so now I'm trying to make the design more accessible to all people. And I increase the width of the line underneath each active tab and changed the color into the darker indigo shade for more clarity and consistency.
 |
Fig.1.0: Communities Tab (Before)
|
 |
| Fig.1.0: Communities Tab (After) |
Another area of improvement I've noticed is the lack of distinction between the pop-up 'Join group' modal tab and the background. The shadows in the first design were very miniscule and is easily missed, so to improve that, I dimmed the whole background to emphasize the modal tab.
 |
Fig.1.0: Communities - 'Join a group' Modal Tab
(Before) |
 |
Fig.1.0: Communities - 'Join a group' Modal Tab
(After) |
2. Explore Page
I also changed the search bar design from to grey to increase visibility in the explore page. As well as enhance readability in the search categories; I change the font text from white to dark indigo to increase the contrast.
 |
Fig.1.0: Explore Page (After)
|
 |
| Fig.1.0: Explore Page (Before) |
3. Jobs Section
I also realized there was lack of consistency in the color scheme and clarity between the toggle on/off states. In the first design, it's not exactly clear which toggle state is on and which is off, due to the supposed 'off' state having high contrast compared to 'on'. So I made the button design more consistent with the rest of the app, a faded out grey to indicate 'off, and a higher contrast indigo to indicate 'on'.
 |
Fig.1.0: Job Filter Search- Toggle Button On/Off
(After) |
 |
Fig.1.0: Job Filter Search- Toggle Button On/Off
(Before) |
The tabs for "in progress", "applied for", and "saved" in the original design were very subtle and user might also overlook them, and the distance between the tabs was too narrow that could get in the way of clicking and navigating between the tabs. Thus, I distanced the tabs from each other and enhanced the readability. And the screen on the left is the feedback pop-up message for submitting a job application form, which also lacked contrast, so I changed the colors of that too.
 |
Fig.1.0 'Your Jobs' Page (After)
|
 |
| Fig.1.0 'Your Jobs' Page (Before) |
The same is applied in the other screens under 'Your Jobs'. Prior to the changes, the contrast of the UI colors was far too lacking, making it very hard to read. This includes the "in progress", "applied for", and "saved" tabs, icons, and textual information in the application progress bar.
 |
Fig.1.0 'Your Jobs' Page (Before)
|
 |
Fig.1.0 'Your Jobs' Page (After)
|
4. Sharing a Post & Profile Page
the same readability issue here is addressed by changing the primary buttons' colors to increase contrast, and the search bar from white into grey for consistency across the app.
 |
| Fig.1.0: Adding Category to Post Flow (After) |
|
 |
| Fig.1.0: Adding Category to Post Flow (Before) |
The same changes are also applied in the profile page, especially in the tabs and sub tabs. The line under the tabs 'portfolio' and 'all posts' is thickened and darkened. And the bubble tabs 'All', '2024', '2023'...etc. are changed from white text to dark indigo color for higher contrast. Additionally, under the 'All posts' tab, in the before version, it consisted of 'All', 'Portfolio', 'Text', and 'Reposts'. I replaced 'Portfolio' to 'Media', because portfolio is already an existing separate tab, to have it appear twice is redundant. Thus, 'media' is more of a suitable tab name, meaning it filters the content just to images/videos, as opposed to all posts or just text.
 |
| Fig.1.0: Profile Page (Before) |
 |
| Fig.1.0: Profile Page (After) |
5. Notifications & Messages Page
And finally, I've applied the same changes across the notifications and messages pages to maintain consistency.
 |
| Fig.1.0: Notifications & Messages Page (Before) |
 |
| Fig.1.0: Notifications & Messages Page (After) |
Conclusions
Overall, the changes I've made improved the app’s accessibility, clarity, and user experience. By addressing contrast, spacing, and information hierarchy, I’ve made the interface more inclusive and visually coherent, specifically aligning with WCAG standards. To summarize, these changes include:
1. Enhancing Color Contrast for Accessibility:
One of the most significant changes I made was addressing the lack of visual contrast in the original UI. The use of light lavender gradients on white backgrounds, especially with white text, made key elements difficult to see and failed to meet WCAG AA standards. To resolve this, I replaced the pale lavender with a deeper indigo tone that maintains the app's artistic identity while improving legibility. These changes were applied consistently across primary buttons and interface elements throughout all screens, including the login, signup, and home pages.
2. Improving Search Visibility and Active Tab Indicators:
The initial search bar design lacked contrast and blended into the background, making it hard to distinguish. To improve this, I updated the search bar color to a neutral grey, which stands out more clearly against the background. I also enhanced the visibility of active tabs by thickening the underline and darkening its color to match the updated indigo theme. These refinements support better content discoverability and help users with visual impairments navigate the interface more easily.
3. Increasing Modal Pop-Up Clarity:
Previously, modal elements such as the 'Join Group' pop-up were difficult to differentiate from the background due to subtle shadowing. To fix this, I introduced a dimmed background behind the modal, which brings more visual focus to the pop-up and makes it more obvious that it is an interactive overlay. This small but important change helps improve user attention and interaction clarity during critical moments like joining a community.
4. Clarifying Toggle States and Job Navigation Tabs:
In the jobs section, I noticed the toggle switch design lacked visual consistency, making it hard for users to distinguish between “on” and “off” states. The updated toggle uses a faded grey for the off state and a vibrant indigo for the on state, aligning with the rest of the app's color system. Additionally, I improved the spacing and appearance of the job navigation tabs (“In Progress,” “Applied For,” “Saved”) to reduce crowding and enhance clickability. I also redesigned the job application confirmation message with stronger contrast to ensure users receive clear, readable feedback.
5. Refining Post Flow and Profile Tabs:
The same contrast improvements were carried over into the post creation flow, especially for buttons and category selection tags. The search bar used in this flow was also updated for consistency. In the profile section, I made several updates for clarity: I thickened and darkened the line beneath the active tabs (“Portfolio” and “All Posts”) and updated the year-based filter bubbles from white text to indigo for better visibility. I also renamed the “Portfolio” tab under “All Posts” to “Media” to eliminate redundancy, since a separate Portfolio tab already exists. This change improves the overall structure and naming logic within the profile screen.
 |
Fig.1.0: Cara App Redesign - All Screens
(After Modifications) |
 |
Fig.1.0: Cara App Redesign - All Screens
(Before Modifications) |
Video Presentation Submission
Week 3 Class Exercise: Information Architecture
In this week's class, we were asked to reorganize the information architecture of a given boarding pass based on primary and secondary target audiences, having their user journey experience in mind. Cindy and I decided to turn the traditional boarding pass into an e-boarding pass.
 |
| Fig.1.0: Boarding Pass Reference |
 |
Fig.1.1: Class Exercise in Process
|
 |
Fig.1.0: Boarding Pass Redesign Exercise
|
Feedback: After finishing up the design in class, we presented it and received feedback. We only worked with passengers in mind, while we should have also had the airplane staff's user experience to consider. We needed to arrange the information in a way that is beneficial to both the primary and secondary target audiences. Hence, the optimal way to solve this is by adding a bottom section specifically for air plane staffs to see, so that the information they're looking for is grouped together. (Gestalt's law of grouping)
Week 4 Class Exercise: Wire-Flow
This week we explored Wire-flow and how it can be beneficial to our design process. We were separated into groups and were assigned to create a wire flow to further better our understanding of how wire-flows are made.
We chose to create a wire-flow for the movie booking app TGV. We first created the wireframe on figma, then imported it into figjam and added the flow chart elements.
 |
Fig.1.0: Class Wire-flow Exercise - Figma
|
We used the combination of wireframes and flowcharts to create the wire-flow; instead of having each step be presented by a whole screen, it is simplified into a simple visualization (i.e. a button or pop-up window)
 |
Fig.1.0: Class Wire-flow Exercise - FigJam
|
|
After presenting, the lecturer told us our wire-flow resembles more of the wire-flows done at the later stages of the design, while he was aiming for a simplified early stage wire-flow. While it isn't wrong, it just needs to simplified more and the onboarding flow could be way simplified using screen visualizations instead of all flow chart elements. We attempted to simplify our wire-flow, shown below, but didn't have the time to complete it. Nevertheless, we understood where our weaknesses were and aim to improve it.
 |
Fig.1.0: Class Wire-flow Exercise - FigJam
|
|
Week 5 Class Exercise: Lottie Files
In this class, we were introduced to lottie files and explored the tool. We animated a logo using exported SVGs to get familiar with the interface, which is like a very simplified after effects.
 |
| Fig.1.0: Class Lottie Files Exercise |
|
I exported the google drive logo and created a simple logo animation using position keyframes and ease in-out. Below is the output.
 |
Fig.1.0: Class Lottie Files Exercise Animation Output
|
3. Reflections
Comments
Post a Comment