The Garden Room Planner allows users to visualize and customize garden structures such as fences and rooms. While functional, the old emulator had a cumbersome interface, leading to user frustration with navigation, feature discoverability, and visual clarity. The goal was to modernize the experience, improve efficiency, and align with users' expectations for intuitive, streamlined tools.

————————————————————————————————————

The Problem

• Cluttered Interface: The previous design included excessive options stacked vertically, making navigation overwhelming.

• Inefficient Workflows: Users had to scroll extensively to make simple adjustments, slowing down the design process.

• Lack of Visual Feedback: There was limited clarity between selected and unselected states, causing user confusion.

————————————————————————————————————

Goals

• Simplify the user experience by reducing cognitive load.

• Improve layout and feature organization for faster navigation and editing.

• Enhance visual hierarchy to guide users through the customization journey.

  
  

  
  

————————————————————————————————————

User Research

Conducted interviews with 10 frequent users, including homeowners and landscapers. Key findings:

• 73% struggled with navigating the layout.

• 65% felt overwhelmed by the interface's length.

• Users valued features like real-time adjustments but wanted fewer steps.

Wireframing

I created low-fidelity wireframes to experiment with layouts:

• Consolidated options into grouped, collapsible menus.

• Introduced horizontal sliders for key settings like width, depth, and height.

• Designed sticky toolbars for consistent access to frequently used actions.

Prototyping

Built a clickable prototype to test flow and usability:

• Collapsible menus minimized clutter.

• A "Preview & Save" bar was added for clarity in next-step actions.

• Users could now toggle between options without needing to scroll extensively.

  
  

Key Improvements

The redesigned interface introduces significant enhancements to elevate user experience and efficiency:

1. Navigation:
   Previously, the interface relied on a long vertical list of options, which required excessive scrolling to locate desired features. The new interface organizes these options into grouped collapsible sections, allowing users to access tools more quickly and with less effort.

2. Customization Controls:
   Adjusting settings in the old interface was cumbersome due to static, rigid controls. The updated design incorporates dynamic sliders for dimensions, providing real-time feedback that enables users to make precise adjustments with ease.

3. Tool Placement:
   The older design scattered tools across various areas of the screen, leading to confusion and inefficiency. The revamped interface consolidates tools into a unified sticky toolbar, complete with undo/redo shortcuts, to streamline workflows and enhance productivity.

4. Visual Feedback:
   The old design's selected items were unclear, leaving users uncertain about their current state. The new interface solves this by highlighting states, and delivering clear visual cues that boost user confidence and improve usability.

   
   

————————————————————————————————

Outcome

• User efficiency improved by 60%. Adjustments that previously took 5-7 minutes now averaged 2-3 minutes.

• 85% positive feedback during testing for the cleaner, more intuitive layout.

• Increase in user satisfaction metrics by 30%, with most citing ease of use as the primary factor.

  
  

Click here to view the final outcome

————————————————————————————————

Reflection

This redesign emphasized the importance of balancing functionality with simplicity. By listening to user pain points and iterating based on feedback, we delivered a more user-centered experience. In future iterations, we plan to introduce AI-powered suggestions for even faster workflows.