To develop a redesign of the web cover that maintains the current objectives and includes the new functionality. The new design should motivate you to use it.
Some time after finished the project for Pastisseria Valls SL, I started wondering how could I improve that design that some day was approved, so as to bring to the cake shop a more dynamic, usable, interactive and appealing proposal for their homepage.
The main goal is to merge a new visual composition with a User Design Centered design.
Data Analysis, User Persona, Scenario, User Journey, Information Architecture, Sketching, Wireframes, Mockups, Prototyping
1.1. Basic needs of the client
Pastisseria Valls SL is a company based in a small city and its products go for local customers. The purposes of their corporate website are:
- To show dynamic information for each season of the year.
- To inform and attract users, and to send them to their ecommerce in order to generate sells.
- To offer several ways for the customer to communicate with the company if it is needed to make a customized order.
- Do everything written before in a responsive interface.
The current homepage does accomplish some of these proposals. However, its composition feels a bit unconfortable for some real users, and some elements of it are not enough used. That is the reason why only the homepage will be redesigned.
1.2. Google Analytics Metrics
The website has been using Google Analytics to track every users’ activity since the day it was published. GA tracks interacions of the Call To Action links and buttons of the homepage that send users to the ecommerce.
GA shows that between the dates Jan. 1st 2021 and Jul. 4th 2021 both CTA were clicked various times, but the first one was clicked 2/3 of all times and the second one just 1/3. So, buttons work and users use them.
However there is no tracking information about which contact info is clicked in the homepage.
1.3. What does work and what does not
It does work:
- Dynamic information related with the current day / week
- Successfull Call To Action buttons to send users to the shop
- Show all ways to communicate with the company
It does not work properly:
- Track efficiently how many times contact means are clicked
- Offer a clear way to create direct orders
- Use a non-static way to show all the information
Scenario: Mary has a 7-year-old nephew who will turn 8 next month. Mary wants to surprise him and decides to bring her nephew his favorite cake on his birthday. The cake should be stuffed with peach jam and coated in chocolate, and it should have “Happy Birthday, Alex” written on it.
Mary has previously eaten the cakes at Pastisseria Valls and she liked them. So she decides to go to the company’s website to see if they have this cake in their catalog.
She enters the main page and finds a button that pretends to redirect her to the web store, but she also sees another button that says something like “We make your custom cake.” Mary presses this last button and she is sent to a form where she can specify what the cake should look like. She completes it and sends it. The form notifies her that she will be answered within 24 hours by email or text message.
Mary decides to wait for the pastry’s response.
The next step is to create a User Journey for that scenario.
In this case, no menus have to be altered. Tags, contact info and call-to-action buttons will remain as they are, just because they work properly.
Call to action buttons to the new functionality will be added in the main space of the design to make users know that there is something new in the site. The new functionality will work by means of a form that must be usable, clear and stressless.
User flows reflect the process of the fictional users in the fictional scenarios step by step and help to find possible obstacles or unexpected issues.
The following is the wireframe created for the new homepage.
The following is the mockup created after the wireframing.
Design System Language
Small animations can tell the difference between a positive and a negative user experience. For that reason, some animations are added to the interface and get activated when the user interact with some objects of the layout.
Google Font. Used for text and titles.
Google Font. Used for humanized emphasis.
Ready all the year!
The content of the first block in the design will change several times along the year. The website may be ready for every holiday in the calendar of the town of Valls, where the cake shop is located.
Thanks for scrolling!
If you have any feedback, want to collaborate or just want to say hello, let’s get in touch!