Студия Турум-бурум

Tilly Pig UX & UI Design: Creation of Website from Scratch for Startup

Tilly Pig UX & UI Design: Creation of Website from Scratch for Startup
213

UX & UI Design from scratch for Tilly Pig that inspires little minds to do BIG things.

In this article, we highlight how our team of UX/UI designers interacts with the client and show the steps of UX/UI development for Tilly Pig, a start-up of crafting piggy banks.

About the project

Tilly Pig is a start-up company that produces beautiful and unique handcrafted printed piggy banks with care for nature. It is not just a piggy bank made of porcelain, but a philosophy of saving and a desired gift that promotes financial well-being from the early years.

Task: To develop a UX/UI design of the site from scratch to launch a new brand product on the market — Tilly Pig piggy bank. To demonstrate the main advantages of the product through its design interface:

  • Eco-friendly materials;
  • Cool prints with an official Disney license;
  • Beautiful and stylish design;
  • Educational Project.

UI & UX Design Development Process and Stages 

The work on the project was split into several stages:

1. Data collection and analysis.

  • Researched and analyzed the market and main competitors.
  • Collected the references and prepared the materials for the conference call with the business owner.

2. Interview of the company owner to learn more about the project and its concept.

  • Listen to the wishes of the customer about the future design of the site.
  • Gather all the requirements for functionality.
  • Offer references to determine the main vector of the UI & UX design.
  • Select the most liked references.

3. Development of the website concept:

  • Decided on the bright and attractive, but stylish and concise UI & UX design.
  • In order to meet the expectations of the target audience, differentiate from competitors, and build a brand.
  • Set the goal to communicate and demonstrate all the product benefits to immediately address all the possible user objections.     
On the first screen of the homepage, it is mentioned that this is a limited edition collection and that it is an educational project
On the first screen of the homepage, it is mentioned that this is a limited edition collection and that it is an educational project
  • Revealed the idea and philosophy of the company and the very product.
  1. A responsible company that cares about the environment and uses only eco-friendly and easily recycled materials for their products
  2. Educate your little one and help parents raise responsible savers
  3. Promote financial well-being from the early years.  
Tilly Pig Company specifics and idea
Tilly Pig Company specifics and idea
  • Informed about additional options and features.
  • Beyond the piggy bank itself, it is possible to buy a Saving book to make the accumulation process more educative and engaging. 
A detailed description of the Saving book
A detailed description of the Saving book
  • Emphasized the collaboration with the well-known and trusted brand Disney.
  • Besides the classic piggy bank and the company's own designs, users have the possibility to choose cool designs with their favorite Disney characters, and it is notable that all these designs are licensed.
Demonstration of the opportunity to order a piggy bank with a licensed design with Disney characters 
Demonstration of the opportunity to order a piggy bank with a licensed design with Disney characters
  • Clearly showed how the product can be used.
  • Our UX & UI designers strategized and added custom interior photos of the product to clearly show how the product would look in life. By doing so, it was demonstrated that the piggy bank is not only a useful toy, but also a very beautiful and stylish home decoration.
 
Example of the use of custom Tilly Pig piggy bank images 

Example of the use of custom Tilly Pig piggy bank images
Examples of the use of custom Tilly Pig piggy bank images
  • Developed a detailed product page.
  • Starting from the first screen, the product page shows what custom product options are available and provides all the information needed for making a decision.
The product card of the Tilly Pig website
The product card of the Tilly Pig website

  • Provided a convenient and customized checkout.
  • Despite the fact that the website is developed on the basis of Shopify, a customizable checkout was created with all the specifics and needs of the target audience in mind.
The checkout page on the Tilly Pig site provides all the necessary information about the order, available payment and shipping methods, etc. For user convenience, the process of ordering is divided into several steps. 
The checkout page on the Tilly Pig site provides all the necessary information about the order, available payment and shipping methods, etc. For user convenience, the process of ordering is divided into several steps.

Results

Taking the Tilly Pig project as an example, we have demonstrated the importance of business owners' ultimate involvement in the process, since only the owner knows their product perfectly and can:

  • Provide detailed information about the product idea and its advantages;
  • Define in advance the website designs they like and do not;
  • Clearly determine the requirements for the functionality and/or the future site design.

Active interaction between the UX/UI designers and the client is the key to more efficient and productive work with fewer iterations and a positive result expected by the client.

As a result of our cooperation with Tilly Pig, we created an MVP (minimum viable product) with its own brand identity and custom illustrations ready to be launched on the market. The design combined simplicity and lightness with brightness and functionality. Thanks to the UX/UI solutions, we emphasized all the product advantages, considered the target audience specifics, and communicated the start-up's social idea to the consumer.  





Оставьте номер и мы перезвоним
Thank you!
We will soon get back to you.
Contact us
Please choose a topic below in which you need help with:
    Thank you!
    We will soon get back to you.