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.

Presentation slide showing a mobile phone with a garage interior on the screen. The slide has the text 'Mobile Apps' on the left and 'Garage Solutions' on the phone screen. There are two circular charts indicating 80% and 70% with labels 'Data 01' and 'Data 02'.

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:

A resume with a photo of a bearded man in a white t-shirt on the left side, and the name "Derek" in green bold letters. The document is divided into sections labeled 'Goal', 'Quote', 'Frustrations', and 'Motivations', with bullet points under each section detailing Derek's objectives, thoughts, and feelings.

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.

Two smartphones displaying different screens of a home improvement app, with a red circle and a white background.

Slide titled 'Application Advantages' with four listed points numbered 01 to 04. Each point has a red circle with a white number, followed by a bolded subheading and explanatory text. Points include no installation required, real-time visual customization, guided design process, and flexible ordering and payment options.

design key screens

Landing Page:

An indoor garage space with a black Mercedes G-Class SUV parked in front of a closed metal garage door. The garage has modern lighting and a dark interior color scheme with a sign that reads GarageView by Garage Solutions and a button labeled Start Designing.

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.

Line graph titled 'Monthly Sales and Orders' showing sales and orders from January to June, with sales consistently higher than orders, and both lines fluctuating over the months.