top of page
Adaptative Website, Branding, Design / UX + UI
Desktop and mobile website design + UX/UI
UP UP AND UP
DATE
April 2022
ROLE
UX Researcher
UX Designer
UI Designer
AGENCY
Freelancer
DELIVERABLES
Hi-Fi Mockups, Final prototype, Style guide
FRAMEWORK
Design Thinking
Background
Vita Pasteles is a local brand from Puebla with a view to growing in the short and medium term, they currently have three branches, but the growing demand for their products generated the need for a platform to sell their products through a website.
This project is for a website for the Vita Pasteles brand, at the request of the client, the site must basically contain two aspects, the first is a catalog of its products, cakes, confectionery and candles, in which customers can find a description and a convenient and easy-to-understand purchase method, the second part is a method to request personalized cakes that in theory would not be found in the catalog, for example, a cake with a photograph or an animated character.
Challenges
1) Design a simple and minimalist flow that easily guides the user within the website.
2) Create a product catalog that is visually appealing without cluttering the user journey.
3) Carry out the design of an adaptive website for desktop computers and mobile phones.
First steps
Taking a product-driven approach, it was a good idea to ask my initial questions by focusing on the purpose of the website, the sale of "already established" products and the sale of "custom or to be established" products.
What are the user's motivations for accessing this website?
How can I make the user journey meet their needs?
How can the Vita Pasteles website offer added value to the user?
Competitive audit
A competitive audit is always a good point to start with the design of any digital product. But in these cases, where there is no guideline to follow because it is a newly created site. It is especially useful to analyze the current market, to see what is doing the competition well, what mistakes we can avoid and what points we can improve to have an added value in our product.
The competitive audit was based on five companies that are direct competitors of Vita Pasteles, it was very interesting to analyze in depth the strengths and weaknesses of these companies in order to refine issues that were not very clear at first.
La Zarza It has a website with a modern UI with vibrant and eye-catching colors for the user. In addition to a catalog of its products with their description, and with personalized cake orders, however, it does not allow the option of making purchases and/or orders within the website.
Nata does not have a website, so in the skills audit, it was not possible to analyze in depth the same points that were reviewed with their counterparts, however, it has a Facebook page where orders can be placed and there are several photos of your products.
Champlitte It has a website with a modern UI in earthy colors that evoke elegance and tradition. It also has a catalog of its products with their description, and with personalized cake orders, purchases can be made from its website or personalized cake orders.
Fresas Glaseadas It has a website with a modern colorful and fun UI. However, the site does not have a product catalog, instead there is a link to download a PDF and open the catalog with an external application, nor does it allow the purchase of products or personalized cake orders.
Dauzon It has a website with a modern colorful and fun UI. However, the site does not have a product catalog, it has a breakdown of the type of cakes and photographs of some products, but without complying with any of the Gestalt principles. It also does not allow you to make purchases from its site.
Users research
After conducting interviews with some customers of the pastry shop to find out their opinion on various issues involved with the pastry shop, how to obtain the product in question, when they make this type of purchase, and what they do not like of the whole process. I decided to condense the results into two people. Martha and Hugo that are the result of combining the participants of the initial study that was carried out.
Empathy maps
Meeting the Persona
As I mentioned before, my personas were based on the results of an initial investigation with 10 users (customers) of the bakery for which I am designing the project. So I condensed those answers according to the closeness of their positions and I ended up building my two personas, Hugo and Martha.
GOALS​
​
-
Buy her parents' favorite flavor cake for her birthday.
​
-
Place your order with home delivery.
FRUSTRATIONS​
​
-
When you arrive at the store, the variety of flavors does not meet your needs​
​
-
You cannot buy the cake in advance if you do not go to the store to place the order.
GOALS​
​
-
Being able to order custom cakes.​
​
-
Place the order from your home or place of employment without having to travel.
FRUSTRATIONS
​
-
Go to the local bakery only to order a personalized cake.
​
-
Price ranges do not fit your budget.​
Martha is a young dentist dedicated to her professional growth and her family, she is not really a big fan of cakes, but she loves celebrations and understands that a cake is necessary to carry them out, that's why she always feels happy to be able to meet your family and friends and share these moments enjoying a slice of a delicious cake. However, sometimes getting it is a problem, so a bakery with home delivery would make things easier for her.
Hugo is a husband and father, there is nothing he enjoys more than being with his family, when one of his children or his wife has a birthday, he is very happy to buy a cake to celebrate that date, however. He is a merchant and his business totally depends on him being at his place all day, therefore, visiting the pastry shop is a problem for him, because when his working day ends, the pastry shop is already closed, so an online option to place your special orders would help you a lot.
Personas journey map
From this point on, I began to see more clearly what should be prioritized within the UX design of the vita pastels website. The people that I generated in my process mainly have two problems to solve, the first would be to be able to buy cakes in advance without going to the branch and the second is to order personalized cakes from their home or workplace, so I focused routes to meet these points.
Information architecture
Wireframes
In order to get started with the lo-fi prototypes, I wanted to get a rough idea of ​​what the main stream screens would look like so I could start designing them.
Basic flow of the user journey
Repeatedly iterating as needed by the project, the flow that users should follow to perform their tasks within the vita pastels website was designed as follows.
The site page layout combines various layout archetypes, for example, the home is a featured image, the products display in a card grid layout. The architecture of the site is mixed. Initially, a hierarchical approach was taken and when moving to the purchase process it becomes sequential to facilitate the user journey.
Challange 1
Simple flow
As a first challenge, I decided that designing a simple and minimalist flow would be the best for the website, because this greatly increases the probability that the user performs the tasks for which he decided to enter the site and reduces the possibility of leaving the site.
Challange 2
Product catalog
A second design challenge was to create a catalog that would show the wide range of products that Vita Pasteles has, for this, it was very important to implement Gestalt principles, mainly similarity and proximity so that it is easy for the user to identify the product. type of product you are seeing on the screen.
Challange 3
Adaptative website
One of the main needs of any website is that it be compatible with different devices, the most used are mobile and desktop sizes, so at least any website must have these two options to meet the needs of the modern user.
Style guide
The colors in shades of blue, turquoise and magenta evoke delicacy and freshness, just like the flavor that characterizes Vita Pasteles products, which is why they were the colors that were used in the branding of the company, and just the colors that I used when designing your website to stay consistent with the brand.
Conclusions
I really enjoyed working on this project, despite the fact that we had some setbacks at the beginning, after an initial study, the course was resumed and the guidelines to follow in terms of design and UX were set.
bottom of page