About the Project

The client approached me with an existing mobile application that was functional but suffered from major usability challenges. While the app offered valuable services, users often struggled to find what they were looking for. In particular, they reported difficulties locating specific services or units within the interface due to poor information hierarchy and cluttered layouts. Navigation was confusing, making it hard to scroll and browse items both horizontally and vertically in a smooth, intuitive way. The client’s main goal for the redesign was to simplify the user journey, improve discoverability of services, and deliver a modern look that eliminates frustration and ensures a seamless user experience.

Problems with the Existing App

The client mentioned that users found it difficult to navigate and complete basic actions. On reviewing the old design, the main problems were:

• Cluttered layout with no clear hierarchy

• Inconsistent colors and typography

• Complicated flows for simple tasks

• Poor readability on mobile devices

• Outdated visual design that did not reflect the brand.

Redesign Objectives

The redesign aimed to:

• Simplify navigation and user flows

• Improve readability and accessibility

• Create a consistent visual system

• Modernize the UI to reflect the brand’s identity

• Enhance overall usability and engagement.

Our Solutions

Problem 1: Users struggled to find the service they were searching for.

Solution:
Services are now grouped logically, with visual icons and labels that help users quickly identify what they’re looking for.

👉 Impact: Users can now locate services within a few taps, reducing confusion and time spent searching.

🏢 Problem 2: Difficulty finding specific units or sections within the app.

Solution:
Units are presented in an organized list with clear naming, and users can jump directly to a specific unit without endless scrolling.

👉 Impact: The process of reaching a unit became straightforward, ensuring users never feel lost in the app.

↔️ Problem 3: Scrolling horizontally and vertically was unintuitive and frustrating.

Solution:
I redesigned the browsing experience with a clean, responsive grid layout that supports smooth vertical and horizontal scrolling.

👉 Impact: Users can now explore items naturally, improving overall usability and satisfaction.

Early Concept Sketches

These initial sketches represent the foundation of the Community Management App’s design. They illustrate the first step in transforming ideas into tangible user flows and layouts, helping to visualize structure, navigation, and key features before moving into detailed wireframes and polished designs.

Before vs After

Splash pge:

Outdated and cluttered splash screen: The original splash screen lacked visual appeal and didn’t reflect the brand identity. It felt outdated and gave users a poor first impression when opening the app.

Login page:

The original login page felt outdated, with a cluttered layout and poor alignment that made the first interaction with the app frustrating. It lacked modern design patterns and accessibility.

After (My Redesign):

The redesign focused on a clean interface, intuitive input fields, and clear CTAs to create a seamless, user-friendly experience.

Home page:

The original home page was very poor in content, offering little visual guidance and no images to represent places or services. This made the experience feel empty and unhelpful.

After (My Redesign):

In the redesign, I introduced clear sections supported by engaging visuals and imagery, along with structured vertical and horizontal scrolling. These improvements not only solved the navigation challenges but also created a richer, more intuitive, and visually appealing home experience.

Project details page:

The original project details page was poorly structured and difficult to navigate, as fixed sections prevented users from scrolling and accessing the full content.

After (My Redesign):

To improve usability, I redesigned the layout by fixing only the essential CTA while allowing all other content to scroll freely. I also enhanced the look and feel by integrating relevant images, icons, and a cleaner visual hierarchy, making the page both functional and engaging.

Unit details page:

The unit details page suffered from the same usability issues as the project details page, including restricted scrolling caused by fixed sections. Additionally, the CTA buttons were unclear and poorly emphasized, making it hard for users to take action.

After (My Redesign):

In the redesign, I resolved these problems by fixing only the critical CTA while allowing smooth scrolling for the rest of the content. I also maximized the size of the CTA buttons and applied clear visual styling, ensuring they are prominent, accessible, and easy to use.

Community Guidelines page

Had an outdated visual design, which made it feel old and less engaging for users. The layout lacked modern design principles, making the content harder to scan and less inviting to read.

After (My Redesign):
I refreshed the page with a clean and modern visual design, using clear typography, consistent spacing, and intuitive hierarchy. The new design makes the guidelines more accessible, visually appealing, and easy to understand, encouraging users to engage with and follow the rules of the community.

Community news page:

The original community news list page felt plain and uninspiring, offering little visual appeal to keep users engaged.

After (My Redesign):

In the redesign, I enhanced the layout with a more attractive design that highlights headlines, integrates imagery, and uses clean spacing and typography. These improvements created a more beautiful, engaging, and user-friendly experience that encourages users to explore community updates with interest.

Dark mode re-design:

Before:
The dark mode of the app looked outdated and cluttered. Text and icons lacked contrast, and the overall visual hierarchy made it harder for users to navigate and read content comfortably.

After (Redesign):
I refreshed the dark mode design to be modern, clear, and visually appealing. Key improvements include:

• Improved readability: Optimized text contrast for easier reading.

• Clear hierarchy: Reorganized content, spacing, and card layout for intuitive navigation.

• Modern aesthetics: Updated colors, icons, and components to match contemporary dark mode design trends.

• Enhanced usability: Buttons and interactive elements are now more visible and easy to tap.

Impact:
The new dark mode provides a cleaner, more engaging experience for users, making the app feel fresh, professional, and modern.

Experience the New Design in Action

Watch how the redesigned pages bring clarity, beauty, and seamless navigation to the user journey. From modern visuals to smooth scrolling, every interaction is crafted for a better experience.

Figma interactive prototype