Previous events

Context

The challenge

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.

The project

Context

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. Brief

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.

First call-to-action button to the e-comerce
Second call-to-action button to the eccomerce

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.

Google Analytics screen capture

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

The process

Briefly

Requirements

Ideate

Modelling

The first step in a User Centered Design is to model fictional users who may use the interface.  In this case, users will be people interested in ordering some cakes though the website, so we must know these users and think like them. For that reason, we creare a user persona called Mary, who would interact with the new homepage in a fictional scenario.
Photograph taken from wayhomestudio - www.freepik.es

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.

Information architecture

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.

Prototyping

Sketching

User flow

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.

Wireframe

The following is the wireframe created for the new homepage.

Mockup

The following is the mockup created after the wireframing.

Design System Language

Color palette

Motion

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.

Typography

Montserrat

Google Font. Used for text and titles.

Caveat Bold

Google Font. Used for humanized emphasis.

Final design

Responsiveness

The full layout may be 100% responsive, so as to be accessible and usable from various devices.

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!