Personas, user flows, and design system for a real estate web app
Objective
BIMIT, a new product of Integrated Projects, allows for anyone with building scans to obtain 3D building models quickly and accurately. Pulling inspiration from the simplicity of Tesla and Apple, the idea is to allow anyone with a building scan to order 3D models with the fewest number of clicks, making the process as easy and seamless as possible. The beta version has been released for use and feedback.
My Role
Sole UX designer - worked in close collaboration with the visual/graphic design team, engineering team, project manager and CEO
UX Goals
-
Create personas for a wide range of users to uncover needs and challenges, validate the need for BIMIT, and reveal potential future partnerships
-
Create user flows for orders, payment, and cancellations to streamline user experience, and prioritize critical operational decisions for product’s soft launch
-
Collaborate with cross-functional teams to create a novel design system
-
Create an end-to-end clickable prototype for BIMIT and communicate designs to engineering team for product’s soft launch
Design Solution
Goal: place an order for 3D scans with the least number of clicks.
This is the flow for uploading the building scan, estimating square footage, picking scope, and placing order.
Payment is collected via Stripe for the beta version.
Users have a one hour window for a cancellation with full refund.
With the beta version we wanted to survey users for their reason for cancelling to guide future operational and design decisions.
Design Approach
User Research & Personas
Context
Integrated Projects provides the entire process from start to finish: employing an 3D scanning specialist to scan the clients building, sending the cloud point scans to get converted into 3D models, and allowing for additional deliverables to be included such as virtual tours, renderings, location report and site photos. BIMIT, a product of Integrated Projects, allows the user to independently leverage part of the process assuming they have their own building scans.
-
Research phase focused on differentiating our users to uncover nuances between their job specifications, needs, and pain-points.
-
I synthesized 5 different personas with very specific needs and challenges that would benefit from BIMIT.
-
This opened up a discussion to visualize a need for potential future partnerships with neighboring or competitive companies.
My Task
User Flows
Context
I collaborated with the visual design and engineering team to figure out the most efficient way to translate our designs into the current coding methods. Because the beta is being pushed to test as quickly as possible to validate the assumption that the users will find value in BIMIT, the engineering team is using a combination of multiple softwares to code the MVP versus coding everything from scratch. This includes Webflow, stripe integrations for payment, and Amazon's coding platform for customized emails with the 3D model deliverables.
My task
-
The user flows I created for ordering, payments, and cancellations opened up a lengthy discussion that allowed us to uncover critical elements that needed to be addressed.
-
Security was a big concern - users were creating orders without login and authentication and were receiving deliverables via email.
-
New considerations using stripe integrations:
-
flows for re-inputting payments when payment errors occurred
-
cancellation link re-routes
-
order status inquiries
-
Design System
Context
The only part of the design system for BIMIT that existed was an existing color scheme and branding theme. The visual design and engineering team had been using Figma as a whiteboard to sketch out ideas and mockups, and using Webflow to make the web app.
My task
-
I created a novel design system for BIMIT which includes typography and type scale, organized color schemes, and components with variants for design consistency.
-
This allowed for rapid mock ups, and sped up the coding process by allowing the engineering team to pull code directly from the component library.
-
Having the design system in place will speed up future design processes.
Some examples from the component library:
Responsive Design
In collaboration with the visual designer, I was able to quickly translate the web designs into tablet and mobile responsive designs to hand off to the developer.
Desktop
Tablet
Mobile
* As of now, the beta version has been released for use and feedback