Smunch - Landing Pages

OVERVIEW

Smunch is an Online Canteen that offers lunches delivered daily to the office so companies can strengthen their employer branding and retain employees.
‍
Smunch had a Landing Page where everyone interested in the company could see more information. For this project, we decided to investigate and create different segments of possible users and thus be able to create Landing Pages with specific information for each of the users.

ROLE

UX / UI Designer

Tools

Information

After researching who are our users, we realized that our direct users were divided into three groups. Companies looking for Catering Service, Human Resources and Employers. In order to provide a better message to each one of these groups, we decided to create a Landing Page for each of them, with a specific message to their needs so they have a greater chance of seeing value in our services.

Our Users

We were able to identify our target audience and arrange them on a matrix to understand our users behavior, new opportunities and create the user personas of each of the users.

SKETCHING & WIREFRAMES

Once we had identified our users, what would be the benefits we could offer them, and what are the keywords they would look for, then we started working on the construction and elements that the Landing Pages would have.

In this process, we started working on creating early stage concepts that we started sketching on Post-it's and paper sheets. This helped us to be able to move quickly and validate different ideas, without having to keep any particular version. Once we had created all the sketch concepts we started to diagram this information in blocks.

The process of Sketching User flow wireframes

Information diagram

We created these information diagrams for each of the Landing Pages. There are diagrams that have specific information and there are others that share information like: Hero header, Contact, how it works, etc. All depending on the information we want to show to our specific user.

User Flow

Once we have created what the user flow would be within our three Landing Pages, we must now start thinking on how to make users interested in our services and contact us or we could offer them something of value in exchange for their information.
‍
In this graph we show the three different users flow and the different strategies we use in each of the Landing Pages.

Design system

In order to create all these Landing Pages, which will have different segments of information and will be directed to different types of audiences, it was decided to create a Design System to standardize all the elements that make up these web pages. Making the design and delivery of the Assets to the developers more efficient.
‍
Before starting this project there was already a company-wide Design System which was created by James Thorburn and Mayya Georgieva. I used this existing Design System, made adjustments and added new elements according to the needs of the new Landing pages.

Responsive and friendly Design

All the designs were created with Mobile first in mind and then adapted to all the most common resolutions so that all users can easily access and view the information within the different Landing pages

User Testing & Interaction Design

We tested our Wireframes and created interactive wireframes with the help of InVision, we tested our first prototypes within the team working on small Workshops. Then we conducted sessions of usability tests with our potential users.

Results

This was a great team work which was done by several members of the Marketing team. Thanks to this new strategy of segmenting our users and being able to create specialized Landing Pages for each of them, we drastically increased the number of interactions and information we received from users.

And at the end, receive feedback from happy users and be able to see and analyze the metrics showing that the hypothesis we had at the beginning of the project was true.