Totsbox - Web Design & Video Project

Totsbox, a healthy convenience.

The Challenge

Totsbox is a new unstaffed convenience store that relies on technology to grant a 24/7 service, providing people a cashier-less experience.

The business was about to start and they needed to launch into the digital space. So our challenge was to create a new website, where we could tell people what is Totsbox about and how to use its service.


Web Design, Web Development, Illustration, Explainer Video.

Tools Used

Pencil & paper, Sketch, Adobe Illustrator, InVision, Wordpress.

Crafting a new brand logotype

We started by reviewing the company logotype. The typography wasn't working well in all the formats and sizes which could become a problem for their brand in the future.

I did some modifications aiming for simple shapes and legible typography. We wanted to make sure their logotype would fit well in all formats, such as the mobile website and app.

Totsbox Old Logotype
Totsbox New Logotype

Wireframing is Key for Every Website

Information is the most valuable asset when you start a new project, if you ask the right questions, you will find the right solutions.

After gathering all the information on a call session, we defined the needings of the business to prepare the wireframe. Our objective was to show the users how to download the app and the shopping process.

Wireframe Web Design

Gain Visual Consistency with Style Guides

I wanted to make sure that all the visual elements of the website, would be consistent in terms of typography and color, so I decided to design a simple style guide.

image of typography
image of Color palette

Sweet illustrations... Sweet home

After defining the wireframe and the visual style, I started working on the design phase of the project.

We needed to use some imagery to explain the shopping process, but our problem was that the store wasn’t in the market yet. In these cases, illustrations can be a great option. so I worked on some custom illustrations for the website.

Wireframe of totsbox store
Wireframe of totsbox store
Ilistration for totsbox
Image of totsbox website

After approving the web design, I worked together with Kevin Toro to build the website in Wordpress. Visit the live website clicking the link below:

Making an explainer video

Recalling the challenge, we needed to make sure the users would understand how to buy at the store and complete all the process. So we decided to create an explainer video, to complement the website content.

After writting the script, I created the characters, scenes and all graphic elements from scratch. Then my friend Kevin, helped me with the animation in After Effects.

We worked on the story of a “person” who bought a delicious snack at the store, completing all the steps of the process successfully and earning some rewards for it.