Reema Arif Hamza / 0362792
Application Design II / Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 1: Self-Evaluation and Reflection
Content
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
The First Design Iteration refers to the Final Project in Application Design I. The app I redesigned was the Dulux Visualizer MY app. The user scenarios included the registration/login process, selecting a paint color and visualizing, and buying a product.
Below is High Fidelity Prototype from Application Design I.
Link to Figma File: Click Here
App Design Analysis
1. Login and Sign Up Page
Upon entering the app, users are given an option to log in/register or continue as a guest. They can create a new account, log in to an existing account, or use other social media login options.
Fig. 1.1 Login and Sign Up Page, Week 3 (13/10/2024)
Self Reflection
- The layout is clean and simple.
- The brand identity of Dulux is clearly shown through the logo and color scheme.
- Users have lots of Login options and can also choose to continue as a guest.
- High contrast buttons.
AI evaluation
Good Aspects:
- Consistent branding: The Dulux logo and color scheme are prominently featured, maintaining brand identity.
- Clear navigation: Each screen has a back arrow, allowing easy navigation between screens.
- Clean layout: The design is simple and uncluttered, making it easy to understand and use.
- Multiple login options
- Guest access
Areas for Improvement:
- Unclear functionality of the password visibility toggle icon.
- Lack of password requirements during registration.
- Potentially overlooked login/register links at the bottom of screens.
Proposed Solutions:
- Implement password strength indicators and display requirements.
-
Make login/register links more prominent or add them as secondary
buttons.
Argument
I disagree with the lack of functionality this is due to the AI evaluating an image so it can't see how it works. I don't think the login/register links need to be more prominent because their purpose is to be there as a backup option, users can still press the back button and continue from there.
2. Forgot your password
If users forget their password, they can request an email verification process allowing them to create a new password.
Fig. 1.2 Forgot your password, Week 3 (13/10/2024)
Self Reflection
- Layout is clean and intuitive.
- Clear step-by-step instructions are given.
-
There is feedback to let users know they were successful.
AI evaluation
Good Aspects:
- Clear step-by-step process: The design shows a logical flow from forgot password to password reset confirmation.
- Consistent design: The layout and styling remain consistent across all screens.
- Back navigation: Each screen includes a back arrow for easy navigation.
- OTP verification: Adds an extra layer of security to the password reset process.
- Password visibility toggle: Present in the new password creation screen.
- Confirmation screen: Provides clear feedback that the password has been changed successfully.
Areas for Improvement:
- Typos and grammatical errors in some text elements.
- Lack of password requirements or strength indicators.
- Limited guidance on OTP entry.
- Inconsistent button labeling across screens.
- Missing alternative contact methods for password reset.
- Lack of branding elements on these screens.
Proposed Solutions
-
Correct typos and grammatical errors:
- Change "Don't worry! It occurs." to "Don't worry! It happens."
- Fix "Didn't received code?" to "Didn't receive code?"
- Add password requirements and strength indicators.
- Standardize button labeling: Use consistent action verbs for buttons across all screens (e.g., "Send Code", "Verify Code", "Reset Password", "Return to Login").
-
Add progress indicators.
Argument
I disagree with the limited guidance on OTP entry because there was instructions given. Lack of branding isn't right because the color scheme has been incorporated. Alternative contact methods aren't necessary because all options for login only included email. I do agree that fixing small typos would be good and adding progress indicators would improve user experience.
3. Home Page and Side Menu
On the Home page users can see trending colors, color palettes, and inspirational photos. They can search for specific products or paint colors, and add items to their Wishlist. To navigate there's a quick access bottom navigation bar and a side menu.
Fig. 1.3 Home Page and Side Menu, Week 3 (13/10/2024)
Self Reflection
- Branding and UI Design is consistent throughout.
- The logo at the top is obstructed when using iPhone, could be moved down a bit.
- The bottom navigation bar is easy to access.
- The layout is visually appealing.
AI evaluation
Good Aspects:
- Consistent branding: The Dulux logo is prominently displayed on both screens.
- Clear navigation: The sidebar menu provides easy access to various sections of the app.
- Visual appeal: The home screen showcases attractive room images with color themes.
- Intuitive layout: The design is clean and easy to understand at a glance.
- Functional elements: Search, menu, and favorite options are readily available.
- Bottom navigation: Quick access to key features like Home, Colors, Visualizer, Products, and Wishlist.
Areas for Improvement:
- Inconsistent navigation patterns between sidebar and bottom menu.
- Lack of user onboarding or guidance for new users.
- Missing personalization elements.
- No clear call-to-action for featured colors.
Proposed Solutions:
- Implement user onboarding.
- Add personalization: Incorporate a "For You" section on the home screen.
- Add search functionality to sidebar
-
Enhance color showcasing: Consider adding color swatches or tags
to the room images to more clearly highlight the featured colors.
Argument
I disagree with inconsistent navigation patterns with the side menu and bottom navigation bar. Because the bottom navigation bar is only there to provide quick access to the main pages. I do agree that a user onboarding process would be good to add.
4. Color Selection and Visualizer
When browsing through paint colors, users can narrow down their selection by color families, and they can also see clear sample images for each paint color. Users then have the option to add the color to their Wishlist and try the color on their wall using the AR Color Visualizer feature. The Visualizer shows saved colors and suggested colors, users can then save and share the image.
Fig 1.4 Color Selection and Visualizer, Week 3 (13/10/2024)
Self Reflection
- Users can easily visualize how the paint color would look.
- There is lots of interactive elements for users to use (add to wishlist and try visualizer)
- Easy to navigate multiple color options.
-
The visualizer task bar color could be more muted instead.
AI evaluation
Good Aspects:
- Clear color visualization: Large room images showcase colors effectively.
- Interactive features: Color selection, visualization tools, and sharing options are available.
- Organized color presentation: Colors are grouped by shades and include hex codes.
- Complementary colors: "Goes well with" section helps users create cohesive color schemes.
- Multiple sharing options: Various social media platforms are available for sharing.
Areas for Improvement:
- Inconsistent bottom navigation highlighting across screens.
- Limited context for the "Visualizer" feature.
- Missing color names in the color palette sections.
- Absence of a clear way to exit the sharing screen.
Proposed Solutions:
- Standardize navigation highlighting: Ensure the active section in the bottom navigation is consistently highlighted across all screens.
- Add Visualizer onboarding
- Improve sharing screen: Add a clear "Close" or "X" button to exit the sharing screen, in addition to the "Cancel" option.
- Implement color search: Add a search function to help users find specific colors by name or code.
-
Enhance color comparisons: Allow users to compare selected colors
side-by-side.
Argument
I disagree with lack of clear way to exit the sharing screen because there is a back and cancel button. But I do understand it might more intuitive for some people to look for an X button. I do agree that I could add the bottom navigation bar to the sharing screen and also add an onboarding process.
5. Product Checkout
Users can order paint directly from the app. The Products page is organized by all products, interior paints, and exterior paints. Each product page highlights the benefit of the product and users can save the item to their Wishlist. Users can add the paint to their cart and choose from saved colors or search for one. Users can then checkout and pay through online payment.
Fig 1.5 Product Checkout, Week 3 (13/10/2024)
Self Reflection
- Organized and clear product listings.
- Detailed product information and application information.
-
Could add product reviews and ratings to the product page.
AI evaluation
Good Aspects:
- Organized product listing: Products are categorized (All products, Interior, Exterior) with clear images and pricing.
- Detailed product information: Individual product pages show images, descriptions, and application methods.
- Color selection: Users can choose from saved colors for their paint products.
- Quantity adjustment: Easy-to-use quantity selector on the product page.
- Wishlist functionality: Heart icons allow users to save favorite products.
- Clear call-to-action: Prominent "Add to cart" and "Checkout" buttons.
- Order summary: Cart page shows a breakdown of costs including delivery.
Areas for Improvement:
- Limited product filtering options on the main product list.
- Lack of product reviews or ratings.
- Missing size/volume options for paint cans.
- Limited information on paint coverage or required quantity for a given area.
- Absence of related or recommended products.
- No clear way to edit or remove items in the cart.
Proposed Solutions:
- Enhance product filtering: Add filters for price range, brand, finish type.
- Implement review system: Add customer reviews and ratings to product pages.
- Provide size options: Include dropdown menus for different paint can sizes/volumes.
-
Implement compare feature: Allow users to compare different paint
products side-by-side.
Argument
I agree that adding product reviews and ratings would let users better understand the product. Adding more filtering options could be considered such paint finish. Most of the feedback from the AI is relevant for the product checkout.
Refining App Design
- Correct typos
- Add progress indicators
- Move logo in the home page further down so it's more visible.
- Make taskbar a more muted color.
- Add a close button to the sharing screen.
- Add a bottom navigation bar to sharing screen.
- Add product reviews and ratings.
- Add more filtering options.
- Add size and volume options for paint cans.
Comments
Post a Comment