Secret Garden

Web Design/UX/UI Design


Secret Garden is a fictional terrarium store, designed for people to enjoy the creative experience to explore nature and build their unique terrarium in different themes.

This project focuses on web design and web development, which aims to create a user-friendly browsing experience for all the people. People can experience the fun and entertaining design process for example how to customize their creative terrarium on the online platform or in terrarium workshops.

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



How to encourage people to join the terrarium workshops and enjoy the good relaxing environment and reduce the stress from study or work?

While interacting with the plants, how can we provide a meaningful, entertaining, and creative ways for people to customized their terrarium?


The business is competitive, and there are lots of similar terrarium stores and workshops in the market, so I create the idea of a themed workshop, so people are welcome to create their favourite theme of the terrarium, such as Pokemon, Starwars, Disney and so on.

The website provide an interactive platform for people to build a terrarium creation, so they can enjoy the 4 simple steps to create the terrarium and we ship the terrarium to their home address.

We encourage people to bring their container to build a terrarium, like a fishbowl, glass cup or lunch box. This is a good way to use recyclable items and show the effort to protect the environment.

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.

Design Process

Secret Garden is a web design of a semester-long project. I started with the marketing plan and created two ideal personas, and validating design concepts from sitemap, wireframes, and styletyles. Along the process, I also went through weekly design critique session from class and two course instructors.


I created the two ideal personas based on the research and marketing plan. I listed the users' stories, preferred channel, and motivation to better understand their needs and make the design to meet their requirements.

SWOT Analysis

SWOT Analysis provided the framework for analyzing the Secret Garden's business plan and better understand the strategy, position and future directions.

SWOT Analysis helps me to focus on the strengths, be aware of and minimized weaknesses, take advantage of opportunities, and be prepared for any potential threats.

Customize Your Terrarium

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

M Garden

Secret Garden also features an app for users to allow them to enjoy the fun Augmented reality(AR) experience to interact with 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 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.

Logo Design

Site map


I designed two different styletyles with different logos, colour palettes, fonts, and image styles.


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

Initial page designs

Following the two different designed styletyles, I created two initial home page designs and see which design looks better for the concept of Secret Garden.

I finally chose the left design styletile, which provides more fresh and simple feeling to the users.

Home Page Style1

Home Page Style2

Final Page designs

Based on the selected styletyle and initial page design, I designed the rest web pages. During the weekly critique session, I presented my work and design process in front of the class, and the class and course instructors will ask several questions and provide me with some feedback about the design. After that, I will keep modifying and iterating the design.

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

Other Projects