.webp)
Dashboard:
A clear overview of ongoing, upcoming, and past consultations. We aimed to give users a quick snapshot of their activity with easy access to all functions.
CASE STUDY
Transforming user assistance through innovative UX Design
A platform designed to connect users with professional architects and construction experts for consultations. Featuring a streamlined dashboard, live Q&A sessions, and a robust booking flow, this platform aims to simplify the consultation process for both users and professionals.
Context
Building Help addresses the gap in the architecture and construction consultation industry, where users often find it difficult to book consultations and receive the guidance they need efficiently. On the other hand, consultants face challenges managing multiple clients and consultations through a single platform.
The goal was to create a professional yet approachable user experience that makes it easy for users to engage with professionals and for consultants to manage their workloads.
.webp)
Project goals
The main challenge for Building Help was to streamline a complex process involving booking, Q&A sessions, and the management of multiple consultations, all while ensuring a user-friendly, intuitive interface.
From the consultant’s side, the platform needed to support seamless management of ongoing, upcoming, and completed consultations. Simultaneously, users had to be able to easily book, track, and engage in consultations. Another key challenge involved designing the main landing page for the application, where users can effortlessly log in or sign up. Additionally, I contributed to the brand design, ensuring a cohesive and engaging identity throughout the platfom.
Design process
We followed a systematic design process for all projects to ensure user-centered and functional outcomes.
This process includes:
Empathize
Understanding user needs through research.
Define
Clarifying the core problem.
Ideate
Brainstorming creative solutions.
Prototype
Creating wireframes and interactive prototypes.
Test
Iterating based on usability testing and feedback.
STEP 1
Research & discovery
During the research and discovery, we conducted extensive research, including interviews with potential users (homeowners, project managers) and professionals (architects, interior designers, construction consultants).
This helped us gain valuable insights:
.webp)
Users’ pain points:
- Difficulty navigating platforms and finding relevant consultation services.
- Confusion in managing multiple ongoing projects or consultations.
.webp)
Users’ pain points:
- Overwhelmed with managing multiple consultations.
- Lack of real-time feedback from clients.
Through this research, we identified the need for a simplified, visually engaging, and well-structured platform to meet the needs of both users and professionals.
STEP 2
User personas
To guide the design, we developed two key user personas:
Samantha – A homeowner looking to hire an architect for her home renovation.
Samantha's Journey: Samantha visits Building Help, quickly navigates to the consultation dashboard, books an available time slot, and communicates directly with an architect. The process is intuitive and takes only a few clicks, making the platform accessible even for non-tech-savvy users.
John – A freelance architect seeking more consulting clients through the platform.
John's Journey: John logs into his dashboard, sees upcoming consultations, and can manage ongoing ones through the Q&A feature. With clear notification and streamlined booking, he saves time and increases efficiency in managing multiple projects.
STEP 3
Design process
The final platform resulted from several rounds of user feedback and design iteration.
Here are the core features of the final design:
1. Initial wireframes
To begin, we developed low-fidelity wireframes focusing on core functionalities: the consultation dashboard, the booking flow, and the Q&A system. The goal was to simplify the process for both user types.
Q&A feature:
A simple, intuitive interface that allows users to ask consultants questions and receive feedback in real-time.
Booking flow:
An intuitive process for users to find and schedule consultations without complexity.
During the early stages, these wireframes were tested with both users and consultants, allowing us to gather feedback for further refinement.
2. First Iteration
In the first iteration, the platform's structure was as follows
Dashboard:
While functional, the dashboard felt cluttered, making it difficult for consultants to quickly access key information. Users also struggled to manage their bookings and find the right actions due to a lack of visual clarity.
Q&A feature:
The Q&A feature worked well but needed improvements in visual hierarchy and clearer indicators of live questions to make the experience smoother for users.
Booking flow:
The booking process was a single, all-in-one form, which led to users skipping fields or getting confused by the many fields on the same screen. This caused issues with booking completion, as the process lacked clarity and guidance.
During the early stages, these low-fidelity designs were tested with both users and consultants, allowing us to gather feedback for further refinement.
3. Feedback and Adjustments
After user testing the first iteration, several issues emerged:
.webp)
Confusing booking calendar:
Users reported that the calendar system was not intuitive and made booking consultations more time-consuming than expected.
Overloaded consultation management:
Consultants found the information cluttered when they managed multiple consultations in the same time frame, which led to slower response times and an overall feeling of being overwhelmed.
Q&A Engagement Issues:
Users felt that while the Q&A feature was helpful, the static design didn't create a real-time interaction experience, causing lower engagement.
STEP 6
Visual design & branding
The visual design of Building Help was focused on creating a professional and clean interface that would be easy to navigate while being aesthetically pleasing. I focused on a balance between functionality and an inviting design for users and consultants alike.
Color Palette
The visual design aimed to reflect the professionalism and reliability of the platform, using a balanced color scheme of:
- Yellow (#edd403): Signifying optimism and energy, this color was used to highlight important actions and buttons, drawing user attention to key areas of interaction.
- Slate Blue (#8899ab): This cooler, calming tone was used for backgrounds and secondary elements, ensuring a clean and minimal interface that didn't distract users from their primary tasks.
This combination of bold and muted tones ensured both functionality and aesthetics, contributing to a smooth user experience.
Typography
For typography, we chose a modern, sans-serif font that was easy to read and fit well with the platform's clean and minimalistic design. The font hierarchy ensured a clear distinction between headings, subheadings, and body text:
- Headings: Bold, large, and clear to help users identify sections quickly.
- Body Text: A lighter font weight, maintaining readability while complementing the minimalistic aesthetic.
Iconography and Visual Elements
Custom icons were designed for the different types of consultations (e.g., architecture, construction, interior design) to create visual clarity for consultants managing multiple clients. These icons were used consistently throughout the platform to reinforce usability and recognition.
Additionally, small, clean illustrations were used sparingly across the site to enhance user engagement without overwhelming the interface.
UI Elements
The UI elements were designed to be intuitive and user-friendly. Buttons, forms, and inputs were designed with a balance of simplicity and functionality:
Responsive Design
Given the varied use cases of the platform, we ensured the design was fully responsive across devices:
- Desktop: A full, detailed view for professionals managing multiple consultations simultaneously.
- Mobile: A simplified interface for users on the go, ensuring they could still access key features like booking consultations or joining a Q&A session without sacrificing usability.
In the first version, the design was clean but lacked strong visual differentiation between various sections of the platform. For example, the consultation dashboard was a bit too minimal, causing confusion for users and consultants alike. The color palette and typography were less refined, with a slightly overwhelming amount of content displayed on some pages.
edd403
8899ab
STEP 7
Final design solution
After multiple iterations, we arrived at a final solution that addressed both user and consultant needs effectively. The platform's core features were fine-tuned, resulting in a highly functional and user-friendly system.
1. Dashboard Overview
A view of their Ongoing, Upcoming, and Completed consultations.
A list of consultations with consultants categorized by profession (e.g., architecture, interior design).
Consultants can see all active engagements in one place with clear indicators for consultation types and status.
2. Q&A Feature
Users can engage in live Q&A sessions with a visible Live indicator, ensuring they know when the consultant is actively responding. The simplified design focuses on the conversation, removing distractions.
3. Booking Flow
The refined booking system allows users to schedule consultations effortlessly, with an intuitive calendar and time selector. This reduced the time spent booking consultations by 30%, based on our user tests.
Fill in general info - Provide your personal and consultation preferences.
Choose date and time - Select a convenient date and time for your session.
Consultation info - Review your details and any notes for the consultant.
Payment - Complete the booking by confirming your payment details.
STEP 8
Challenges and Solutions
The feedback revealed some pain points, which led to the following improvements
Challenge 1:
Managing complex information on one platform
We needed to present various types of consultations and different stages (upcoming, ongoing, completed) without overwhelming the user.
Solution
We implemented a clean, categorized layout using tabs and sections, which breaks down the information into digestible chunks. Each consultation type is labeled with corresponding icons for quick identification.
Challenge 2:
Ensuring user engagement during Q&A
The Q&A feature initially lacked the engagement expected by users, who felt the interactions were static.
Solution
The addition of a "Live" indicator drastically improved engagement, signaling real-time activity from the consultants, which encouraged users to stay active in the session.
STEP 9
Reflections & next steps
Looking back at the development and design of Building Help, several key insights emerged throughout the process:
User-centered design
Prioritizing the end-users’ needs was critical in shaping the platform. Early user testing allowed us to uncover pain points and ensure that both consultants and customers had an intuitive and smooth experience. The iterative feedback helped refine the user journey and streamline functionalities.
Balancing simplicity with functionality
One of the main challenges was balancing a minimalistic design with the rich features necessary for a multi-faceted platform. In the first iteration, certain features, like the dashboard, felt too cluttered or difficult to navigate, and refining these to achieve simplicity without losing functionality was key to the final design.
Iterative process
From the initial wireframes to the final product, each iteration provided invaluable learning opportunities. The feedback loop of testing, refining, and enhancing the design ensured we tackled issues like user flow, responsiveness, and visual hierarchy in a focused way.
Visual and functional consistency
Ensuring consistency throughout the platform, from iconography to color usage, improved the platform's overall coherence. The final design achieved a polished, professional look while maintaining accessibility and ease of use.
Scalability
As the platform grows, the design system we created provides a solid foundation for scalability. New features or functionalities can be easily integrated while maintaining a cohesive visual style and user experience.
Reflection
Working on Building Help allowed me to deepen my expertise in handling complex user flows and create intuitive design systems that cater to both end users and professionals. It was a valuable experience in understanding how to prioritize user feedback, iterate on designs, and implement effective real-time interaction systems.
By focusing on user-centered design and continuous iteration, we successfully created a platform that meets the needs of both clients and consultants in the construction and architecture sectors.
