Redesigned UI and userflow to improve interactions, visual design & accessibility.

Works

About Me

Resume

FAQ

Works

About Me

Resume

FAQ

UX/UI Redesign of Conceptualized Gamified Productivity App.

Overview: From Clunky to Clear. Follow-up case study of Gamified Productivity App.

App Concept:

An app prototype that gamifies task and project management. Users set goals, break tasks into steps, earn points, badges, and rewards for completing them.

Problem:

The initial app design was static and unengaging, leading to potential user disinterest and limited usability.

Goal:

Enhance usability by introducing dynamic elements, optimizing visual design for readability and user-friendliness, and providing comprehensive explanations for improved clarity and content delivery.

Table of Contents

Overview

Challenges

Results

Design Process

Interactive Prototype

Design Decisions

Reflection

Before After

User Pain Points

Static Experience

Lack of Dynamism

Color Scheme Complexity

Small Text Sizes

Font Choice

Insufficient Explanations

Challenges

The Engagement Deficit

Transforming a static, visually overwhelming app into an engaging experience.

Combating user boredom stemming from lack of interactivity and dynamism.

Users faced disengagement due to the app's static design and lack of interactive elements, leading to potential boredom and disinterest.

Visual Clarity Compromised Accessibility

Simplifying a complex color scheme, and optimizing text legibility.

Addressing unsuitable fonts that hindered readability and usability.

The app's visual design was cluttered and lacked clarity, with a convoluted color scheme, small text sizes, and unsuitable font choices, impacting readability and overall usability.

Guidance Gap

Integrating concise, detailed yet shortened explanations for improved user comprehension.

Clarifying features and functionalities to enhance satisfaction.

Insufficient explanations within the app left users confused about its features and functionalities, hindering their understanding and satisfaction.

The Engagement Deficit

Transforming a static, visually overwhelming app into an engaging experience.

Combating user boredom stemming from lack of interactivity and dynamism.

Users faced disengagement due to the app's static design and lack of interactive elements, leading to potential boredom and disinterest.

Visual Clarity Compromised Accessibility

Simplifying a complex color scheme, and optimizing text legibility.

Addressing unsuitable fonts that hindered readability and usability.

The app's visual design was cluttered and lacked clarity, with a convoluted color scheme, small text sizes, and unsuitable font choices, impacting readability and overall usability.

Guidance Gap

Integrating concise, detailed yet shortened explanations for improved user comprehension.

Clarifying features and functionalities to enhance satisfaction.

Insufficient explanations within the app left users confused about its features and functionalities, hindering their understanding and satisfaction.

Before After

Results

Progress Transparency:

Introduced a step indicator to show users where they are in the process, enhancing clarity.

Interactive Guide:

Introduced "Q" as a friendly guide and logo, to direct user focus and enrich interaction with its gestures and movements and text speech for an engaging UI/UX.

Nature-Inspired Colors:

Adopted a color palette inspired by nature to evoke a sense of progress and motivation, simplifying the design and making it more intuitive.

Streamlined Explanations:

Refined content into short, clear messages, improving communication and ensuring explanations are easy to understand without overwhelming users.

Flexible Sign-Up Options:

Expanded sign-up methods to offer users more flexibility and cater to diverse preferences, enhancing overall accessibility and convenience.

Results

Progress Transparency:

Introduced a step indicator to show users where they are in the process, enhancing clarity.

Interactive Guide:

Introduced "Q" as a friendly guide and logo, to direct user focus and enrich interaction with its gestures and movements and text speech for an engaging UI/UX.

Nature-Inspired Colors:

Adopted a color palette inspired by nature to evoke a sense of progress and motivation, simplifying the design and making it more intuitive.

Streamlined Explanations:

Refined content into short, clear messages, improving communication and ensuring explanations are easy to understand without overwhelming users.

Flexible Sign-Up Options:

Expanded sign-up methods to offer users more flexibility and cater to diverse preferences, enhancing overall accessibility and convenience.

Redesigned frames

Results

Redesigned frames

Progress Transparency:

Introduced a step indicator to show users where they are in the process, enhancing clarity.

Interactive Guide:

Introduced "Q" as a friendly guide and logo, to direct user focus and enrich interaction with its gestures and movements and text speech for an engaging UI/UX.

Nature-Inspired Colors:

Adopted a color palette inspired by nature to evoke a sense of progress and motivation, simplifying the design and making it more intuitive.

Streamlined Explanations:

Refined content into short, clear messages, improving communication and ensuring explanations are easy to understand without overwhelming users.

Flexible Sign-Up Options:

Expanded sign-up methods to offer users more flexibility and cater to diverse preferences, enhancing overall accessibility and convenience.

Interactive prototype

Redesigned frames

Design Process

Discover + Define (The Problem Space)

In this initial phase, the focus was on identifying and understanding the core issues with the existing app design through previously conducted user research and feedbacks received:

Addressed Problem:

The app's static design lacked dynamism and engagement, leading to potential user disinterest and limited usability.

User Insights:

Previous user testing and research revealed specific pain points, such as a static experience, lack of dynamism, complex color schemes, small text sizes, unsuitable font choices, and insufficient explanations. The users were not able to grab the concept the app within a short period of time.

User Needs:

Based on these insights, key user needs were defined, including enhanced dynamism and engagement, incorporation of animations and gamified elements, simplified visual design, and detailed explanations.

Objective:

The overarching goal was to enhance usability by introducing dynamic elements, optimizing visual design for readability and user-friendliness, and providing comprehensive explanations to improve clarity and depth of content delivery.

Develop + Deliver (The Solution Space)

Armed with a clear understanding of user needs and objectives, the development and implementation phase began with ideation and solution brainstorming:

Brainstorming Solutions:

Creative ideas were generated, including introducing a friendly animated guide named "Q," utilizing a nature-inspired color palette, incorporating a step tracker, breaking down explanations into concise messages, and offering multiple sign-up options.

Prototyping and Testing:

These proposed solutions were brought to life through iterative prototyping and user testing cycles, allowing for continuous refinement and validation.

Implementation:

The redesign solutions were then implemented, addressing each identified user pain point and catering to their needs. This included integrating dynamic elements like "Q" and animations, simplifying the visual design with a nature-inspired palette and optimized typography, and enhancing content delivery through concise explanations and flexible sign-up options.

Discover + Define (The Problem Space)

In this initial phase, the focus was on identifying and understanding the core issues with the existing app design through previously conducted user research and feedbacks received:

Addressed Problem:

The app's static design lacked dynamism and engagement, leading to potential user disinterest and limited usability.

User Insights:

User Needs:

Objective:

Develop + Deliver (The Solution Space)

Armed with a clear understanding of user needs and objectives, the development and implementation phase began with ideation and solution brainstorming:

Brainstorming Solutions:

Prototyping and Testing:

These proposed solutions were brought to life through iterative prototyping and user testing cycles, allowing for continuous refinement and validation.

Implementation:

"I added dynamic elements and gamification, like the guide 'Q,' and chose a nature-themed color palette for motivation. Improved readability with better typography and streamlined explanations into concise messages. Flexible sign-up options were added to enhance accessibility."

Interactive prototype

My Design Decisions.

Dynamic Elements and Gamification:

I introduced dynamic elements and gamification to combat user boredom and lack of engagement.

The friendly guide "Q" serves not only as a visual aid but also as an interactive element that keeps users engaged through gestures, movements, and text speech. This decision was based on the understanding that interactivity can significantly enhance user experience by making the app feel more alive and responsive.

Dynamic Elements and Gamification:

I introduced dynamic elements and gamification to combat user boredom and lack of engagement.

Before

After

Nature-Inspired Color Palette:

Choosing a soft color palette inspired by nature was a strategic decision to evoke feelings of calmness and motivation.

Nature's colors are universally pleasing and can make users feel more connected to the app, promoting a sense of progress and achievement. Simplifying the color scheme also aimed to reduce visual clutter, making the interface more intuitive. The new color palette is softer in tone and has varieties of hues and levels of saturation.

Before

After

Improved Readability:

Larger, readable fonts were chosen to enhance clarity and accessibility, ensuring all users can easily read, understand and quickly grasp the content.

This decision stemmed from user feedback indicating difficulty in reading smaller text, which hindered their overall experience.

Before

After

Streamlined Explanations:

To tackle the problem of insufficient explanations, I refined content into short and clear messages.

This approach ensures that users receive the necessary information without feeling overwhelmed. By breaking down complex instructions into bite-sized pieces, I aimed to improve user comprehension and reduce cognitive load.

Before

After

Flexible Sign-Up Options:

Expanding the sign-up methods was a user-centered decision to cater to diverse preferences and enhance accessibility.

Providing multiple sign-up options ensures that users can choose the method that best suits them, reducing friction and making the onboarding process smoother and faster.

Before

After

By making these design decisions, I aimed to create a productivity app that is not only functional but also engaging and user-friendly, ultimately enhancing user satisfaction and retention.

Reflection

The app’s UI wasn't keeping users hooked because it felt kind of dull and had design problems like confusing colors and tiny text. People wanted more excitement and clearer explanations. So, I brainstormed various ideas: utilizing nature-inspired colors, adding a friendly character named "Q" to guide users, making it easier to see where you're at in the app, and giving users different ways to sign up. These changes make the app more fun and easier to use and get people sticking around longer. The redesign of rest of the UI is work in progress.

Get in touch.

Neo-brutalism style of this portfolio.

silumanandhar@gmail.com

Get in touch.

Neo-brutalism style of this portfolio.

silumanandhar@gmail.com