UI/UX Responsive Design & Branding
Moving Assistance and Real Estate Platform
Streamlining Relocation
In a dynamic world, people want a reliable source of information to navigate their new neighborhood. They desire insights on job opportunities, good schools, safety, social life, and local events. Before moving, they seek connections with like-minded individuals and access to essential services that facilitate a smooth transition and integration into their new home.
Through this project, I anticipate that users will discover immense value in having a dependable central hub that caters to their diverse information needs when it comes to exploring new locales and making informed decisions about relocating.
Objectives: Designing a Seamless Moving Assistance App
Figma
Illustrator
Photoshop
Mural
Tools
Robert Sabatka (UX Designer)
Yashwanth Kotha (DL Mentor)
Team
Duration
4 Weeks
User Perspectives Remapped
We aim to shape our platform's offerings and promotions by uncovering the applications and resources individuals rely on during relocations. With insights into their indispensable tools and information, we curate a tailored platform that optimizes seamless transitions with accurate, essential services.
Research Goal
Determine what kind of apps and web resources people use to research new neighborhoods.
Determine the biggest challenges in the process of researching and organizing the move
Understand the pain points of moving to new places.
Understand what are the most important facts and parameters of interest for the person moving into a new area.
Research Objectives
Comparative and competitive research to see what our competitors offer.
Contextual interviews if possible, to see how people are using the service in person.
User interviews to hear from users first hand their stories of how they organized and gathered information before moving.
Surveys to determine if the provided information satisfies users needs.
Methodologies
Competitive Analysis
As a UX designer, my objective is to conduct thorough competitive and comparative research to explore the functionalities offered by existing moving apps. By analyzing and understanding the landscape of these applications, I aim to identify their strengths, weaknesses, and unique features. This research will provide valuable insights into user expectations and preferences, allowing me to design a moving app that surpasses competitors by offering enhanced usability, innovative features, and a seamless user experience.
Interview
Conducting individual interviews for a moving web app project is crucial for gaining deep insights into users' needs, preferences, and pain points. These one-on-one interactions establish a direct and personal connection, enabling participants to openly share their experiences, challenges, and expectations. By uncovering valuable qualitative data and hidden insights, I can make informed design decisions that address specific user needs, resulting in a moving web app that resonates with its intended audience.
Participants:
Participation criteria was that the person moved in the last 18 months
User Research Takeaways
A notable and consistent trend observed is that individuals predominantly conduct real estate research through well-established online platforms such as Zillow or Realtor. It is imperative to include essential information, such as crime rates and school ratings, within real estate listings to enhance transparency and inform decision-making. Additionally, the role of moving businesses is significant in the relocation process, as first-time users may encounter unforeseen challenges. Engaging professional packing services can make a substantial difference due to their efficiency compared to untrained individuals. Lastly, providing information about the proximity of storage units becomes highly valuable in cases where storage facilities are required.
Define
I consolidated the findings obtained from the research phase to establish the key business objectives and identify the core problems faced by the target users. This process involves ideation and brainstorming, where I generate fresh ideas and explore potential solutions to create the initial site architecture and address the product's challenges effectively.
User Personas
Based on user research insights, I developed three user personas that capture the typical individuals involved in relocation. These personas guide the design process, ensuring solutions cater to their unique needs and aspirations.
Project Goals
Card Sorting
The Card Sorting session is formulated to confirm the content requirements for the CribShift platform. The participants are asked to perform a Closed Card Sorting with 33 cards that can be grouped into 6 categories. 4 people participated in the card sorting.
The Card Sorting exercise yielded the expected results, demonstrating a broad understanding of established data structures and patterns. However, intriguing insights surfaced regarding differentiating searchable content and identifying tools for efficient data calculation and extraction in the context of moving and home buying. These findings guide the optimization of information architecture and feature prioritization, ensuring a seamless and intuitive user experience on the platform.
Card Sorting Takeaways:
Site Map
The creation of this site map is an amalgamation of data gathered from card sorting research, feature road map data, and competitive analysis. It represents a comprehensive visualization that aligns user preferences, strategic feature planning, and insights gleaned from studying the competitive landscape. The site map serves as a crucial blueprint for organizing content and functionality, ensuring a user-centric and intuitive navigation experience within the platform.
User Flows
The three user flows I have developed aim to illustrate the potential ways in which users would engage with the moving platform, showcasing the various interactions and pathways they may take. These user flows serve as valuable tools for understanding and optimizing the user journey, identifying pain points, and enhancing the overall user experience within the platform.
Task Flows
The creation of task flows was undertaken with the purpose of evaluating how my personas would effectively accomplish key tasks within my web service. By mapping out these specific pathways, I am able to simulate and analyze the user experience, ensuring that the design and functionality of the web service align seamlessly with the needs and goals of the identified personas.
Design
In this phase, my focus is on crafting the design layout of the pages, selecting and integrating the necessary UI elements and components, and establishing the visual elements that will shape the overall aesthetic. This entails translating user requirements into visually appealing and intuitive interfaces, ensuring that the design aligns with usability principles, accessibility guidelines, and brand identity.
Low Fidelity Wire-Frames
I have developed eight distinct page layouts during the initial stages of web-page design. These layouts were carefully crafted, taking into account the goals of my target persona, UI requirements, and analyzing competitive design patterns. Throughout the sketching process, I explored various ideas and concepts. The culmination of this exploration resulted in a refined set of three sketches, representing the final version of the design.
Mid Fidelity Wire-Frames
Using the best sketch as a foundation, I translated the web page layouts into mid-fidelity wire-frames. These wire-frames were developed to establish a clear visual structure and hierarchy within the design. At this stage, I focused on tailoring the design specifically for small screens like mobile phones, ensuring it aligns with the requirements of a web app.
Establishing the Brand Identity and Style
Mood Board
To kickstart the creation of the web app, I began by curating a mood board consisting of a collection of captivating web pages and digital art. This step aimed to gather inspiring samples and establish a visual direction for the project.
Logo
Taking cues from the mood board and taking into account the unique characteristics of the brand, I delved into the process of sketching and digitally refining multiple versions of the brand logo. Through thorough analysis and thoughtful consideration, I ultimately identified the most suitable variation that truly captures the essence and character of the entity.
Color Pallets
The color scheme for this project was thoughtfully crafted to align with the desired mood and character of a serious business, while also ensuring a relaxed and approachable experience for the user. Careful consideration was given to strike a balance that avoids overwhelming the user while maintaining a professional atmosphere.
UI Components
In the final stages, a comprehensive UI Component library was developed, encompassing the essential building blocks required for a web app. With a focus on facilitating efficient search functionality, the library was meticulously crafted to provide a wide range of components that can be easily implemented within the interface
High Fidelity Wire-Frames
Building upon the mid-fidelity wire-frames and brand style tile, I integrated and crafted diverse UI elements to establish a cohesive visual identity for the pages. This involved a careful synthesis of components, leveraging the wire-frames as a foundation, in order to create a unified and visually appealing interface.
Testing
During this phase, I developed a prototype design specifically for the purpose of conducting usability testing with real users. The primary objective is to assess if the screens function as intended and to identify any potential user difficulties, usability errors, or false assumptions present in the prototype. By doing so, I can gather valuable insights and make necessary iterations and updates to the design before proceeding with actual site development. This approach helps prevent over-investing resources and ensures a more refined and user-centered final product.
High Fidelity Prototype
To facilitate the usability testing process, I transformed the High Fidelity Wireframe into an interactive Web App Prototype. This conversion allows users to engage with the design and provide valuable feedback on its functionality and user experience. By creating a realistic and interactive prototype, we can effectively evaluate and iterate upon the design before proceeding further.
Usability Testing
User Interviews
Evaluate usability
Test the main task flows
Measure the time of completion of the tested task flows
Determine the likability of the platform
Research Goals
People who used apps to look for real estate
People who moved recently
People who participated in my previous survey
Participants
Search for real estate and filter the preliminary search results
Profile creation - User signup
Adding to the Like list and removing an item from the Liked items list in the Liked section of the platform
The Tested Task-flows
Findings Summary
During testing, participants successfully completed the task flows with ease and within a reasonable time-frame. Feedback indicated that the page layout and overall visual design of the platform are professional and well-executed. Notably, participants did not make any mistakes or select incorrect buttons or options during testing.
However, an issue arose with the heart icon, which was found to be misleading and not functioning as expected. While this did not hinder platform usage or the completion of user flows, participants consistently expressed the desire for the heart icon to provide an option to remove an item from the favorites list, in addition to its existing functionality of adding items when not highlighted.
The success metrics were met with a 100% success rate. Moving forward, the iterations will primarily focus on incorporating user feedback regarding additional options that enhance platform intuitiveness without introducing new functionalities.
Next Steps and Iterations
Participants in the usability tests consistently pointed out the issue with the "add to favorites" option. To improve user experience, the ability to remove items from the favorites list by clicking the highlighted heart icon should be implemented throughout the platform. Additionally, feedback was given regarding the appearance of the icon, suggesting the need for a graphical solution that aligns better with the overall theme of the platform. Another important element missing from the product page is a button to close the page and provide options to return to the search results or favorites list after viewing. This addition is crucial for a seamless user experience. To address confusion, it is necessary to differentiate between the initial search and filtered search results. Currently, the prototype includes the same product cards on all pages, causing uncertainty. Iterations should be made to specifically modify the appearance of cards based on real-world usage scenarios, reducing user confusion. Lastly, improving the grouping of search results into categories would enhance organization and provide users with a clearer understanding of where to find specific items. Separating unfiltered and filtered search results by general categories would contribute to a more organized platform, providing users with better navigation and information cues.