Secret Garden

Web Design/UX/UI Design

Overview

Secret Garden is a fictional terrarium store, designed for people to enjoy the creative experience and build their terrarium with different themes and containers.

This project focuses on web design and development, which aims to create a user-friendly browsing experience for all the people. They can experience the process for example how to place an order for their terrarium and make a reservation for workshop and so on.

Web Design/Web Development/UI,UX design/ /Marketing Plan
Branding/Logo Design/Sitemap/Wireframes

Branding

M Garden

Secret Garden also features an app for users to allow them to enjoy the fun Augmented reality(AR) experience to interact with you their decorative character and terrarium.

In the Augmented reality game, users can enjoy the interactive experience of a real-world environment to find the hidden gems and catch them to level up their terrarium profile. You can invite your friends to join and have fun together.

Users can also enjoy the growth of little terrarium through watering, planting, growing, and decorating process. We have inserted tons of surprise to be explored and always ready to bring more excitement to everyone.

Customize Your Terrarium

People can experience the customization process online and build their secret garden. They design their unique terrarium in 4 easy steps: choose the container, succulents, decorations and then review it before submitting to the completion page.

Challenge

The business is competitive, and there are lots of similar terrarium stores and workshops in the market, so I create the themed workshop, build your terrarium creation, bring your container to build a terrarium, and featuring the M Garden to make Secret Garden unique and different.

The web design and web development are trying to keep consistent for the users, so they can always go to a specific page without too many clicks or steps.

Logo Design

Site map

Styletiles

Initial page designs

Home Page Style1

Home Page Style2

Page designs

Home Page

About Page

Workshop Page

Themed Workshop Page

Shop Page

Shop Details Page

Shopping Cart Page

Build Your Own

Build Your Own Creation-Step1

Build Your Own Creation-Step2

Build Your Own Creation-Step3

Build Your Own Creation-Step4

Wireframes

Home Page

About Page

Workshop Page

Themed Workshop Page

Shop Page

Shop Details Page

Shopping cart Page

Build your own

Build Your Creation-Step1

Build Your Creation-Step2

Build Your Creation-Step3

Build Your Creation-Step4

Other Projects