BoxTerra

UI/UX Designer

A terrarium e-commerce website

boxterra mockup 1

What is BoxTerra?

In an effort to create a website design for a hypothetical company, we created a business that provides their customers with pre-made or custom-made terrariums in order to bring nature into their humble abodes.

BoxTerra’s website allows customers to order pre-made terrariums, or customise their own and create something that’s theirs. Their e-commerce website provides their valued customers with a wide variety of terrarium options ranging from various themes and aesthetics such as biomes and seasons.

boxterra mockup 2
boxterra mockup 3

My Role in BoxTerra

Throughout the creation of BoxTerra’s e-commerce website. I took charge as a UI/UX Designer. I was fully involved in the ideation, design and prototyping of the website. I set BoxTerra’s brand identity through logo and colour design and applied them to the website to create a unique experience. Furthermore, I was in charge of optimizing BoxTerra’s interface design and creating a smooth and user friendly experience.

The Design Process

Our goal with designing BoxTerra’s website was to create an exciting and welcoming experience for their customers by allowing them to explore their creativity.

boxterra style guide

Colour Palette

As a terrarium business, BoxTerra is a brand that represents nature and discovery, and its colour palette should capture a calming and earthy feel. With Steel Teal and Polished Pine chosen as the dominant colours, and highlights of Dark Brown, Olivine, and Tumbleweed selected to enhance the dominant colours, creating a close connection to the nature around us and giving our customers a sense of soothing revitalization, peacefulness, and renewal.

Typography

We decided to use Cinzel as the main heading type to give the website the classy and sophisticated look that BoxTerra is designed for. and Nunito as the main body type due to its great legibility and clarity.

boxterra prototyping

Low-Fidelity Prototype

After establishing BoxTerra’s visual style and brand identity, We began collaboratively sprinting the website’s layout in an effort to create an intuitive and simple layout and experience for the customer. With our style guide and brand identity in mind, we designed a low-fidelity prototype for preliminary evaluation.

High-Fidelity Prototype

Through an initial evaluation of our low-fidelity prototype, we found insight on the website’s user interface design to make the customer journey more smooth and enjoyable. Evaluation of the low-fidelity prototype allowed a definitive pathway towards a high-fidelity prototype with integrated brand and visual identity, and improved user experience and user interface design.

Check out BoxTerra's Prototype 🡥boxterra mockup 4

Challenges and Key Takeaways

Creating BoxTerra’s e-commerce website was my first opportunity in practicing user interface and user experience design. Therefore, lots of research into current design trends and best practices were needed in order to create an appealing layout.

This project was also my first definitive design endeavour in Figma. Designing BoxTerra’s e-commerce website allowed me to further facilitate and improve my skills with Figma.

Points of Improvements

As one of my first design projects, I’ve learned the importance of usability testing of our design. Usability testing of the website’s low-fidelity would have provided much more insight for our team to use for our high-fidelity prototype.

Conclusion

I collaboratively created a hypothetical company named BoxTerra and designed an ecommerce website for it. Being fully involved throughout the design process of this website, I was able to develop skills in user interface design using tools such as Adobe Illustrator and Figma. Taking charge as the UI/UX designer, I was able to develop experience in creating an optimized layout for a smooth and intuitive user journey and design.

boxterra mockup 5