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
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.
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 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.
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.
I designed two different styletyles with different logos, colour palettes, fonts, and image styles.
Themed Workshop 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.
Themed Workshop 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