Garage Solutions
Overview:
GarageView by Garage Solutions is a web-based, no-install customization platform that allows customers to design and order personalized garage storage solutions directly from their browser. Users begin by registering with their basic information, then choose to upload a photo of their garage or use a live camera to capture it. They can interactively place and customize 3D models of Garage Solutions’ metal cabinets—choosing from three styles and multiple color options—to visualize their ideal setup. Once satisfied, users can place an order online or contact customer service to finalize their purchase, creating a seamless and user-friendly experience from concept to checkout.
Responsibilities:
Basic narrative analysis UX Research
Concept development
Aligning stakeholders on product goals
Competitors analysis
Empathy mapping
Information Architecture UI/UX Design
User flows
Interaction design
Prototyping User testing following product strategy 3D Modeling, SketchUp
Team & Timeframe:
This project was developed over a 6-month period by a cross-functional team of five members, including a Product/UX Designer (myself), a Front-End Developer, a Back-End Developer, a 3D/AR Specialist, and a Project Manager. Collaboration was key throughout the design and development phases, with each team member contributing to ideation, user flow mapping, iterative prototyping, testing, and final deployment. Agile methodology was followed with bi-weekly sprints to ensure steady progress and flexibility for user feedback and feature refinement.
Objective & Goal Phase One
The primary objective in Phase One was to validate the concept of a web-based garage customization tool that requires no app installation, providing users with a simple, intuitive way to design their own garage using Garage Solutions’ metal cabinets. The goal was to build a functional MVP (Minimum Viable Product) that guides users from registration to visualization and ordering in one seamless flow. Key priorities included creating a responsive, user-friendly interface, integrating 3D cabinet models with basic customization options (style and color), and enabling a simple order placement process with both online payment and offline support options.
Phase Two
Enhance the customization experience by integrating basic AR features, allowing users to visualize cabinets in real space using their device’s camera. Introduce measurement tools and save/edit project functionality.
Phase Three
Implement advanced features such as user accounts with project history, AI-based layout suggestions, and integration with installation scheduling and delivery tracking.
Insights & Synthesizing
Through early user interviews and prototype testing, we discovered that users value simplicity, speed, and visual accuracy when customizing their space. Many found traditional configurators overwhelming or too technical. We synthesized these insights into key design principles: reduce cognitive load, prioritize visual feedback, and streamline the decision-making process. This led to the implementation of a guided, step-by-step flow, clear cabinet previews, and intuitive customization controls that require no design background to use.
Personas:
Wireframe:
Wireframing played a crucial role in shaping the user flow and structure of the GarageView application. Early low-fidelity wireframes allowed the team to visualize key screens, including the registration process, image input selection, and the customization interface. These wireframes helped align the team on layout, hierarchy, and feature placement before development began. By focusing on usability and simplicity, the wireframes ensured a clean, intuitive user experience that supports the app’s goal: helping customers design their ideal garage quickly and confidently without any technical barriers.
design key screens
Landing Page:
Sign-Up Page:
Conclusion & Deliverable:
In conclusion, this project successfully delivered a user-centered car customization app concept called GarageView, developed over a 6-month timeline by a five-person team. The process included user research, insights synthesis, persona creation, and iterative design phases. Key deliverables include low-fidelity wireframes, high-fidelity designs of six essential screens (Landing, Sign-Up, Input Options, Customizer, Summary, Payment), and visual mockups using realistic automotive imagery. This comprehensive package demonstrates a strong foundation for a compelling, functional, and visually appealing user experience in automotive customization.
