Suum

Overview

Suum is a responsive web app developed as part of a UI case study, aimed at helping first-time and experienced buyers navigate the real estate market. It equips users with the tools and guidance they need to efficiently search for and discover new properties that match their preferences, streamlining the entire property-buying process.

Goals

Suum’s primary goal as a responsive web app is to empower newcomers to the real estate market by providing them with the knowledge and tools needed to efficiently find the right property. It streamlines the decision-making process, helping users make well-informed choices quickly, and minimizing wasted time in their property search.

Problem this project aims to solve

• Lack of Guidance for New Buyers: First-time buyers often struggle to get started in the real estate market without professional guidance.

• Overwhelming Amount of Information: Despite the availability of resources, many buyers find it difficult to navigate the vast amount of real estate information effectively.

• Inefficient Property Search Process: New buyers may waste time and effort trying to find the right property due to a lack of clear, efficient tools.

• Need for Streamlined Experience: Buyers require a simplified and user-friendly platform to enter the real estate market with confidence and ease.

Approach & Solution

I applied the Design Thinking process throughout this project to stay focused on solving the core problem by deeply understanding user needs and perspectives. This approach allowed me to generate ideas, prototype solutions, and identify the best possible outcome, always keeping users at the center of my design decisions. Additionally, I used a mobile-first approach, which prioritizes designing for smaller screens like smartphones before scaling up to larger devices. This ensures that the most important features and content are optimized for mobile users first, delivering a seamless and user-friendly experience across all platforms.

Empathize phase

To place users at the center of my design decisions and humanize the design process, I created a proto-persona based on the project brief and information provided by Career Foundry. This step falls under the empathize phase of UX design, which focuses on understanding the users’ needs, pain points, and goals. It’s a crucial phase because it ensures that the design is aligned with real user experiences and challenges, allowing for more relevant, user-centered solutions. Following this structure helps ensure that each design decision is grounded in empathy, ultimately leading to a more effective and meaningful product.

Ideation phase

At this stage of the project, I created a User Flow based on the user stories of my persona to help generate ideas for solving the identified problem. This step is part of the ideation phase in UX design, where brainstorming and exploring different solutions take place. It’s a critical part of the design process, as it bridges the gap between understanding user needs and developing actionable, user-centered solutions. Also, crafting a user flow for this project was especially important because it helped to visualize the steps users will take to achieve their goals, ensuring that the experience is intuitive and efficient.

First Sketches & Mid-Fidelity Prototypes

In this next stage, I transformed my ideas into a visual concept by sketching the initial wireframes. This process helped me plan the information hierarchy of the pages, structure the content effectively, and outline the key functionalities. My first sketches allowed me to quickly visualize and iterate on concepts before I would invest significant time in more detailed designs. Ensuring my design aligns with user needs and project goals, ultimately leading to a more refined and effective final product.

Steps I identified to move forward with the project

• Study the brief and determine the brand identity by creating a Mood Board to establish visual direction and set the tone of the project to ensure a cohesive design.

• Integrate visual design elements such as colors, typography, iconography, and imagery to create a high-fidelity visual representation of the interface.

• Create detailed design documentation, including style guides, interactions, and specifications.

• Create an interactive prototype by implementing clickable elements, transitions, and animations to simulate the user experience and demonstrate how the interface responds to user actions.

Mood Board

I created a mood board for Suum to establish a cohesive aesthetic direction and serve as a reference point throughout the design process, ensuring that all visual elements align with the project’s goals and brand identity. This mood board captures the straightforward personality of my persona, Rashida, and her need for a simple yet informative app that she can easily access on the go. The visual direction not only reflects her preferences but also features a color palette that incorporates the latest “dark mode” design trends.

Design Documentation: Style Guide

A style guide was created to ensure design documentation and consistency. The style guide serves as a comprehensive reference for visual elements, typography, color palettes, and component usage, helping maintain a cohesive aesthetic throughout the app. By establishing clear guidelines, it streamlines the design process, minimizes discrepancies, and enhances collaboration. This step reinforces brand identity and ensures that every aspect of the user experience aligns with the project goals.

Outcome & Conclusion

This project took me completely out of my comfort zone, as I initially had little interest in the real estate topic. However, taking on this challenge proved to be incredibly beneficial. It pushed me beyond my biases, allowing me to grow both personally and professionally, expanding my skills and perspective as a designer. Before this project, I was more focused on UX design following my extensive course with Career Foundry. Suum gave me the confidence to dive deeper into UI design, improving my proficiency with design tools like Figma and Adobe XD. Despite facing many constraints—such as navigating design tools, refining my UI skills, and overcoming creative blocks to meet the persona's needs—I was able to design a polished, efficient responsive app. This case study was a pivotal moment in my journey as a UX/UI designer, providing the UI experience I had been missing and allowing me to see my professional growth throughout the project. I truly enjoyed working on Suum and am excited about the future opportunities and challenges that lie ahead in my career.