Beginning my stage in E2S Creativa as a web designer, I had the opportunity to design the website for Llobet, a local retail food company. Llobet operates multiple supermarkets in central Catalonia and has been expanding into related market niches, such as home food delivery and the sale of prepared dishes.

The result of Llobet's expansion into new market niches is a diverse series of services offered to final clients. These services were going well for them, but they wanted to use all this potential to expand to other fields. Their natural direction for this expansion was to offer their services to companies.

Llobet 1923, a premium products branch of Llobet, oppened in commemoration of their 100th Anniversary

To achieve this, their services had to be bundled and offered to them effectively, in this case using a new website. Since most services already had their own platforms, the new website was designed to act as a bridge, connecting them all. This central hub aimed to position Llobet as the definitive tool for corporate gastronomic solutions, streamlining access to its diverse offerings.

This is where Llobet Empreses (Llobet Companies) was created. Thanks to this website, service packages and contracts could be offered to companies allowing workers from various companies to benefit from Llobet's services quickly and conveniently. From quickly delivering fresh daily lunches for workers to elaborate catering for the most demanding corporate events.

My role in the project was to guide the client through the process, from the first kickoff meeting to the developer handling of the coded and published website, initially designing a usable wireframe, then designing the final deliverable design using the existing company style guide and bridging the gap between the developer and the client.

Briefing Keylines

• Llobet aimed to create a platform that consolidated all their existing services into a single, accessible site tailored for business clients. The goal was to make it easy for users to find all the services they needed while ensuring the site was properly indexed by Google as a business service provider.
• To achieve this, Llobet provided an initial structure for the website, which included a homepage dedicated to explaining their business philosophy as Llobet Empreses and promoting their services to potential corporate clients, and two market verticals in the sitemap, What can we offer to you? (Què et servim? in Catalan), a market vertical that includes all the services that they can offer directly to companies or their workers and Contracts (Contractes in Catalan), for the services they offer that require prior contracting of these. This clear segmentation ensured that users could easily navigate and access the specific services they needed.
• Finally, Llobet wanted a dedicated landing page for each service. These pages needed to clearly explain the individual services to the users, incorporating several call-to-action (CTA) elements to prompt users to contact Llobet for more information or to redirect them to the relevant pre-existing service pages. This approach aimed to enhance user engagement and streamline access to Llobet's various offerings.

Wireframe Design Process

Header menu on hover state

After the kick-off meeting, I established regular communication with Enric, the head of marketing at Llobet. This direct link of communication proved crucial to validating the next steps and completing the project within the timeline.

Given the tight schedule and given that the client specifically requested a desktop-focused design, I started the design process in the desktop viewport. This allowed me to prioritize and deliver a detailed and fully functional desktop experience for this phase. To provide a valid wireframe I had to deeply understand each service my client provided or advertised on their website.

• Some services consisted of a direct order from the worker using a form on the web, like the order for punctual food.
• Others, on the other hand, required formal hiring by the management of the client company, for example hiring a caterer for a corporate event.
• Finally, other services, as I have already mentioned, functioned as showcases for services that already have an order process landing for individuals on their corporate website (but which could now also be used by companies and therefore also needed a landing on Llobet Empreses). These type simply function as a redirection bridge to the existing services.

All this required prior knowledge to create a web structure suitable for the usability of each service landing.

With the basic briefing and Enric’s requests, I drafted an initial wireframe.

Some wireframe screens

After completing the initial wireframe approach I booked a meeting with Enric to present my work and receive his comments.

After some meetings with Enric, I applied these changes and some other minor ones

After some meetings and exchanges with the client the wireframe was approved and I could proceed with the design.

Application of Style

The preexisting Llobet design, designed and developed at E2S Creativa as well, is the following.

Llobet Empreses Style Tile

Color

The main color of llobetonline.cat (the main website of Llobet) is #696058, a pale brown. To differentiate but still link their two brands, I used as a main color Llobet’s secondary color, #C7BB74, a yellowish beige, and #3F3F3C, a grayish black I user as a black.
Additionally, Llobet’s original branding have a color palette that act as a “accent palette”, a group of pastel colors that decorate different elements. I used them to give some color specially to the iconography.

Typography

The typography was still Poppins, as it is the main typography in all Llobet’s branding.

Iconography

Given that almost the entire website was based on concepts and products are explained mostly in text, I wanted to give iconography a predominant role on the website, reinforcing the ideas that the paragraphs expressed.

Hi-Fi Prototype Design

With all the design system defined, I started applying the style to the wireframe. For it, the client provided all the written content, including the product descriptions and claims.

My design relied heavily on images, since being an online service and besides mostly selling food, it had to be very visual. The client had some content for it, but not all, so we agreed that we would use stock photos for the content they could not provide, specially for the situational images showing final clients enjoying their products.

Hi-fi screens

In this phase the design the approval was a bit more organic. First of all I applied style to the whole wireframe and booked a meeting with the client to verify that the path was correct and aligned with the company objectives, so we did not have an “approval meeting”. The revisions and changes were made along the way, but overall the client was satisfied with the result.

Here you can find the final Hi-fi:

Development Handoff and QA

For this website, E2S Creativa relied on Guillem, a freelance developer who works for them on many projects of this scope. As this webpage had to be self-manageable for the client, I created a handoff meeting with Enric, Guillem, and myself, so that all parties involved were informed of everything from the beginning.

This website would be developed using WordPress so that the client could manage and update it himself without the need for programming knowledge.

Guillem created a testing environment on his local hosting so that I could see the progress in the web programming. For my part, my work went to quality control, ensuring that the final result was adjusted as closely as possible to the design approved by the client. To make things easier for Guillem, I created a shared document in which I added the comments so that he could apply them as he went along.

Additionally assisted Guillem in adapting these elements for the mobile version, ensuring the client's primary objective was met while maintaining a responsive design without having a proper design file specifically for the mobile version. This collaborative approach ensured a seamless user experience across all devices.

Mobile version

After Guillem applied all my comments and the adaptation to mobile was satisfactory, we held another 3-way meeting with Enric, the client. Enric had some additional commentaries, like the fact that we would like to add the logos of companies that were already using the service, a practice that is currently quite widespread on the pages of B2B service companies. Apart from this and some other minor comments that Guillem amended or changed accordingly very fast, Enric was overall satisfied with the result.

Trusted companies carrousel, implemented directly on developement phase

And the fact that Guillem and Enric had direct contact from that moment ensured that any necessary changes to the already published website could be addressed without problem.

You can find the final result at the following link: Llobet Empreses.

Reflection

Learnings

• Client Communication and Requirements Gathering: I learned the crucial role of clear and detailed communication to accurately capture and fulfill the client’s vision and requirements.


• Adapting Design Approach: I gained insight into adapting design processes based on project needs, such as starting with desktop designs when requested, while ensuring mobile responsiveness.


• Collaboration with Developers: I learned how to effectively collaborate with a freelance developer to ensure that the design is accurately translated into a functional website.


• Maintaining Consistent Branding: I discovered how to apply and maintain the client’s existing brand style across new designs, ensuring consistency and reinforcing brand recognition.


• Quality Assurance and Testing: I understood the importance of thorough quality assurance testing to ensure that the final product aligns with design specifications and meets user expectations.


• Responsive Design Principles: I deepened my knowledge of responsive design principles, ensuring a seamless user experience across various devices.

Conclusions

This project for Llobet Empreses was a rewarding experience, allowing me to create a cohesive and functional website that met the client’s specific requirements. Starting with a desktop-focused design and collaborating closely with the freelance developer, we successfully delivered a responsive and user-friendly platform. The final result not only consolidated Llobet's diverse services but also reinforced their brand presence in the market. This project has provided valuable insights into effective client communication, adaptable design approaches, and the importance of a seamless user experience across all devices.

Thanks for reading!