APP DESIGN II - TASK 1 SELF EVALUATION & REFLECTION

23/9/2024-20/9/2024 (Week1 - Week4)

Siti Zara Sophia Binti Mohammad Reeza (0359881)

Bachelor of Interactive Spatial Design (Honours)

Task 1 - Self Reflection and Evaluation

INSTRUCTIONS

For our first task, our lecturer, Mr Shamsul, instructed us to reflect back on our Application Design I final project to reevaluate our design and suggest improvements that could be made to it. The below are my low fidelity and high fidelity prototype designs.

Lo-Fi Design

Hi-Fi Design

Feedback

Overall Personal Feedback

Strengths:

Appropriate theme and colour scheme used for a sleep app
Icons used to indicate each category is clear
Design allows for informative and necessary information to be displayed without overwhelming the user.

Weaknesses:

Lack of font variety and font visibility (in terms of size and contrast with the surrounding colours)
Certain pages of the design (Routines, Journal) feel too crowded and busy, making it easy to overwhelm the user
Some of the background images used make the text hard to read

Overall AI Feedback

For this, I used the claude.ai software to provide comprehensive and detailed feedback for my design. The following texts are part of the AI's feedback:

Theme and Color Palette

Strengths:

Calming Color Scheme: The use of muted, cool tones (blues and purples) creates a soothing atmosphere appropriate for a sleep app.
Contrast: The dark background with light text provides good readability and reduces eye strain, especially beneficial for nighttime use.
Accent Colors: The use of brighter accent colors (like the orange in the mood tracker) helps highlight important information without being overly stimulating.

Areas for Improvement:

Color Consistency: Ensure consistent use of colors across all screens to maintain visual coherence.
Dark Mode: If not already implemented, consider offering a light mode option for users who prefer it during daytime use.
Color Meaning: Use colors more intentionally to convey information (e.g., red for poor sleep quality, green for good).

Typography

Strengths:

Readability: The chosen sans-serif font is clean and easily readable at various sizes.
Hierarchy: There's a clear typographic hierarchy with different font sizes for headings, subheadings, and body text.

Areas for Improvement:

Font Variety: Consider introducing a secondary font for headings to add more visual interest.
Line Height: Adjust line height in some areas (like the journal entry) to improve readability of longer text blocks.
Font Weight: Experiment with different font weights to further emphasize hierarchy and improve scannability.

Icons and Visual Elements

Strengths:

Minimalist Icons: The use of simple, line-based icons maintains a clean and modern look.
Consistent Style: Icons appear to have a consistent style, which aids in creating a cohesive look.

Areas for Improvement:

Icon Clarity: Some icons (like in the bottom navigation) could be more intuitive or accompanied by labels.
Visual Feedback: Add subtle animations or state changes to icons when interacted with.
Illustrations: Consider adding some custom illustrations to make the app feel more engaging and unique.

Layout and Spacing

Strengths:

Grid System: The layout appears to follow a consistent grid, creating a sense of order.
White Space: Good use of white space in most screens, preventing a cluttered feel.

Areas for Improvement:

Consistency: Standardize card sizes and spacing across different sections for a more unified look.
Information Density: Some screens (like the Sounds page) could benefit from a more spacious layout.
Responsive Design: Ensure the layout adapts well to different screen sizes and orientations.

Visual Feedback and Interactivity

Strengths:

Interactive Elements: Buttons and selectable items are clearly distinguishable.

Areas for Improvement:

Hover States: Add hover effects to interactive elements to improve usability.
Animations: Implement subtle animations for transitions between screens or when revealing information.
Progress Indicators: Add more visual cues to show progress or completion of tasks.

Branding Elements

Strengths:

Logo: The Hypnos logo is simple and memorable, fitting well with the app's aesthetic.

Areas for Improvement:

Brand Consistency: Ensure the Hypnos branding is consistently applied across all screens.
Unique Brand Elements: Consider adding unique branded elements or patterns to make the app more distinctive.

Conclusion

The Hypnos app has a strong foundation in terms of visual design. The calming color palette, readable typography, and clean layout create a suitable environment for a sleep and wellness app. To elevate the design further, focus on refining color usage, enhancing typographic hierarchy, improving icon clarity, and adding subtle interactive elements. These changes will not only improve the aesthetic appeal but also enhance usability and user engagement.

Consider creating a comprehensive design system document that outlines specific color codes, font styles and sizes, icon guidelines, and spacing rules. This will ensure consistency as you refine and expand the app's features.

Overall Thoughts

After reading through and analysing the feedback on my prototype, I have decided to redesign certain task-flows. The following are the task-flows I've chosen to redefine:

Sign In
Homepage
User Profile
Menu

Redesign

Overall Redesign

https://www.figma.com/design/18PaA7Ew9crjbkIVrvJrUY/Hypnos-HiFi-Redesign?node-id=2015-969&t=t7LtE2Yydd4AH0nO-1

Sign In

(Left - Before, Right - After)

Problem: Low readability on the text due to low colour contrast, font used blended into the background colour, logo text did not stand out.

Solution:

Changed the logo font colour to bright yellow to match the yellow accents of the background image and to increase visibility, making it stand out.
Changed the font style to 'Roboto', making it easier for users to read and making the text bolder
Changed the font and button colours to increase readability and increase colour contrast between text and background

Homepage

(Left - Before, Right - After)

Problem: Text and background have low contrast, making it hard to read. The navigation buttons and other features don't stand out. Users have to look for information. Information displayed ineffectively and unclearly. Text are all the same size, no visual hierarchy.

Solution:

Changed font to 'Roboto' and 'Nunito' to increase visual increase and add variety in the design.
Changed the navigation and user profile button colours and borders to bright yellow, matching the app logo text, adding accent colours and making it clearer to navigate.
Decreased font size when appropriate, adding visual hierarchy to the design
Adding more visual elements such as progress bars and graphs to communicate information effectively
Changed the button colours to a light yellow, making it stand out from the background and making it more visible for the users

User Profile

(Left - Before, Right - After)

Problem: Navigation doesn't stand out, hard to find. Uneven border for the enlarged/full user picture. Low visibility and readability, key components like the 'LOG OUT' button can't be easily distinguished between regular buttons. Icons and text colours blend into the background colour.

Solution:

Changed the navigation colours to bright yellow, making them easy to find.
Made the profile picture border yellow, even and bigger. This adds visual hierarchy and adds more interest to the image
Changed the font and icon colours to one that enabled the colour contrast to increase, making it more visible and readable
Distinguished the 'LOG OUT' button from other options, making it more accessible for the user and making the user less prone to accidents.

Menu

(Left - Before, Right - After)

Problem: Navigation icon colour blends in with the background, low visibility. Button texts are barely readable due to the font, background image and colour.

Solution:

Changed the navigation icon color to bright yellow, increasing visibility
Changed the search bar and search icon colours to different ones to increase visual appeal and dynamic appearance
Lowered the opacity of the background button images, allowing it to look less bright, therefore making it more appropriate for a sleeping app while keeping the fantastical and mystical element envisioned while also enabling an increase in contrast between the background image and the text, hence increasing readability.
Changed the fonts used to 'Roboto" for the search bar and 'Nunito' for the buttons to increase readability and making it more visually interesting.

Video

https://youtu.be/R3HOqJ9Hb48

Siti Zara Sophia Binti Mohammad Reeza (0359881)

Search This Blog