Task 1: Self-Evaluation and Reflection
24/09/2024 - 14/10/2024 / Week 1 - Week 4
DAVIES ANNIKA ANGELA / 0362108
Application Design II / Bachelor of Design (Hons) in Creative Media /
Taylor's University
Task 1: Self-Evaluation and Reflection
CONTENT
- Lectures
- Instructions
- Task 1:Self-evaluation and Reflection
- Feedback
- Reflection
LECTURES
WEEK 1: No class
WEEK 2: Revision on HTML and CSS
WEEK 3: Lecture on DOM
INSTRUCTIONS
Task 1: Self-Evaluation and Reflection
Students are required to perform a self-evaluation and reflection based on
their mobile application design I final project. This project aims to
document the issues, problems, and difficulties and propose solutions to
improve the mobile app design aesthetic and user flow. Mobile App design is
an iterative process, and this task will expose to students the constant
improvements one can make to their app. Students are required to submit the
documentation in Google Docs for ease of commenting and feedback by the
module coordinator.
First Design Iteration
This refers to the Final Project in Application Design 1. I chose to
redesign the EMGS app.
The user scenarios were as follows
- Check Application status
- check your most recent notification
- view digital ID
Below is the high fidelity prototype
link to
figma file
APP DESIGN ANALYSIS
1. login/sign up page
Fig 1.1 Login/ sign up page
Self reflection
Login in/ sign up page
- Clean and easy to navigate.
- Lacks register option
- Lacks animation and introduction to what EMGS is about.
- Quick to enter the app as a continue without signing in option is available
AI evaluation
Good Points:
- Simple Design: The page is clean and easy to navigate.
- Bold Colors: The red gradient makes the page visually striking.
- Multiple Login Options: Users can log in with Apple, Facebook, or Google.
- Guest Login: Users can explore the app without signing in.
- Easy to Read: White text and fields stand out against the red background.
Bad Points:
- No Password Toggle: Users can’t see what they’re typing in the password field.
- Large Logo: The logo is too big and distracts from the login options.
- No Error Messages: There's no indication of what happens if login info is incorrect.
- Sign-up Unclear: It’s not obvious how new users can sign up.
Suggested Improvements:
- Add Password Visibility: Let users toggle between showing and hiding their password.
- Reduce Logo Size: Make the logo smaller to focus more on login options.
- Add Error Feedback: Show clear messages for incorrect login details.
- Clarify Sign-up: Add a clear “Sign up” button for new users.
Argument:
I agree with majority of the AI evaluation for this section.
2. Home page
Fig 1.2 Home page
Self reflection
- Illustrations allow for easy navigations
- Illustrations could be more coherent and have colour when being hovered over
- Live chat needs to be more identifiable
AI evaluation
Good Points:
- Consistent Design: The red gradient background matches the login page, creating a cohesive look across the app.
- Clear Iconography: Each section is represented by clear, easily recognizable icons, making navigation intuitive.
- Logical Layout: The home screen options are laid out in an easy-to-follow grid, so users can quickly find what they need.
- Live Chat Option: The "Live Chat" button provides users with quick access to support, enhancing user experience.
- Bottom Navigation Bar: The icons at the bottom for home, media, digital ID, notifications, and profile ensure quick access to core features.
Bad Points:
- Cluttered Appearance: The page may feel a bit cramped due to the number of options and icons in close proximity.
- Unclear Text Hierarchy: All section titles are in lowercase, making it harder for important sections to stand out.
- No Visual Feedback: It’s unclear if there’s any hover or tap feedback when selecting an icon, which can affect usability.
- No Labels for Bottom Icons: The icons in the bottom navigation bar don’t have visible labels, making it harder for new users to understand what they represent.
- Limited Color Variance: Everything follows a red and white color scheme, which can make the icons blend into the background, reducing visibility.
Suggested Improvements:
- Increase Spacing: Add more padding between the icons to reduce the feeling of clutter and improve readability.
- Highlight Important Sections: Use text hierarchy (like bold or larger fonts) to make key sections stand out more, such as "My Application Status" or "Profile."
- Add Visual Feedback: Include hover or tap animations when selecting icons, providing users with clear interaction feedback.
- Add Labels to Bottom Navigation: Include text labels under the bottom navigation icons (e.g., “Home,” “Media”) to clarify what each icon represents.
- Use Different Colors for Icons: Adding subtle color differences to the icons could help them stand out from the background, improving visual clarity.
Argument
- The labels are quite visible for the bottom navigation
- Live chat needs to be more visible
3. Application status
Fig 1.3 application status
Self reflection
- Lack of good visual hierachy
- Percentage is not centrally aligned
AI Evaluation
Good Points:
- Clear layout: Information is neatly organized and easy to read.
- Progress indicator: The circular progress bar effectively shows application progress.
- Minimalist design: Clean and professional, reducing clutter.
- Easy navigation: Back button and bottom navigation bar make it user-friendly.
- Detailed information: Provides all relevant application details at a glance.
Bad Points:
- No progress stages: Lacks details about specific stages of the application.
- Static interface: Limited interactivity or feedback options.
- Few visual cues: No milestones or additional indicators besides the progress percentage.
- No call to action: Missing guidance on what the user should do next.
- Lack of color: Mostly monochrome, making it visually less engaging.
Suggested Improvements:
- Add clear application stages below the progress bar.
- Make the progress bar interactive to show more details.
- Include a refresh/update button for status updates.
- Use color coding for different statuses (e.g., green for completion).
- Provide call-to-action (CTA) buttons for next steps or support.
- Show an estimated completion time for user expectations.
Argument
- I do not feel the need to add too much colour. Users can easily check their application status without too much distracting them.
- More Visual hierarchy is required.
4. Pre-Entry Checklist and Post-Arrival Check in
Fig 1.4 Pre-entry checklist and Post-Arrival Check in
Self reflection
- Make labels bolder
- add checks to show what student has completed
- make pages more consistent with each other
AI Evaluation
Good Points:
- Clear layout and structure: Both pages are organized well with distinct sections.
- Engaging icons: Icons make navigation easy and visually appealing.
- Minimalist design: Simple, clean design with easy navigation.
Bad Points:
- No progress tracking: There's no way for users to mark steps as complete or see progress.
- Limited interactivity: The pages feel static and lack clickable elements for more details.
Suggested Improvements:
- Add progress indicators (e.g., checkmarks or progress bars).
- Make sections interactive with more detailed information.
- Include guidance or tooltips for each step/task.
- Use color coding for priority or task differentiation.
Argument
I agree with most of the points here
5. Access Digital ID
Fig 1.5 Accessing Digital ID
Self reflection
- needs improvement on Hierachy
- Simple design
- Need to make pages for other cards
AI Evaluation
Good Points:
- Intuitive Flow: Clear progression from selecting an ID card to viewing detailed information.
- Consistent Design: Cohesive visual style across screens.
- Security Feature: Access code adds a layer of protection.
- Detailed Profile View: Final screen displays personal details concisely.
Bad Points:
- Limited Guidance: No support if users forget the access code.
- Static Design: Limited interactivity, such as editing profile details.
- No Error Feedback: No prompt for incorrect access code input.
- Visual Simplicity: Access code screen could be more engaging.
Improvements:
- Add Access Code Help: Include a “Forgot Access Code?” option.
- Interactive Profile: Enable profile editing directly from the details screen.
- Error Messaging: Display feedback for incorrect access codes.
- Enhance Engagement: Use animations to make the flow more dynamic.
Argument
6. Media Page
Fig 1.6 Media page emgs
Self reflection
- Lack of consistency in headings
- clear read more buttons
- No indication to swipe down
AI Evaluation
Good Points:
- Clear Layout and Engaging Visuals make the page easy to browse and attractive.
- Consistent Design aligns with the rest of the app.
- Read More Button provides a clear action for viewing full articles.
Bad Points:
- Lacks Interactivity and Sorting Options for a dynamic, personalized experience.
- Minimal Content Preview may not fully engage users.
- No Visual Hierarchy to make key articles stand out.
Improvements:
- Add interactive animations.
- Highlight featured articles to create a visual hierarchy.
Argument
7. Notification page
Fig 1.7 Notification page emgs
Self reflection
Make text bigger and bolder
AI Evaluation
Good Points
- Clear Information: Concise updates with status and dates.
- Icons: Visual cues differentiate completed and pending tasks.
- Detailed Notifications: Individual screens provide clarity.
- Engaging Visuals: Fun illustrations enhance appeal.
- Consistent Navigation: Bottom navigation bar ensures easy access.
Bad Points
- Cluttered Screen: Dense layout on the main page.
- Overuse of Red: Red background reduces readability.
- No Actions: No options to mark, delete, or filter notifications.
- Inconsistent Visuals: Main screen lacks engaging illustrations.
- Small Text: Dates and details are hard to read.
Argument
- Make text bolder and notifications have more contrast by changing the colour
Comments
Post a Comment