Solofoodies screens


The project

Solofoodies is a collaboration management platform between delicious restaurants and passionate food influencers.

Solofoodies centralizes and all of the collaborations for both sides, making them easier to track, assisting the foodies election and facilitating communication and reservation tracking. This solves two problems: It helps restaurants to improve their online presence through recommendations towards bloggers and influencers (from now on, foodies) who seek new places and experiences; and it simultaneously helps customers to be recognized professionally thanks to the reviews and metrics system through collaborations.

· Recognizable and identifiable collaboration cards
· Modular and scalable components
· Synthesis of needed information at each stage of the collaboration
· Iterated the product design based on users needs

About the state of the project

Two types of users, four types of collaborations

Ruben and Isaac had a well-defined user flow with the features that their users required. However, they needed a hand with the UI of their MVP. They wanted a clean, functional and intuitive interface.

When Solofoodies contacted me for the first time, they had a concept developed and some prototypes. A relative was helping with the design but they wanted to rely on another professional that was fully dedicated. They needed a visual solution on a budget to launch as soon as possible.

I made various proposals and we created a component to display all the information that a user could need, leaving the additional information for the details page.

Solofoodies collaboration cardSolofoodies collaboration cardSolofoodies collaboration cardSolofoodies collaboration card

Creating a component set

A clean and easily understandable UI design

Components had to be identifiable with a minimum amount of color and space. So we mainly used size and contrast to build a visual hierarchy.

Each type of collaboration required different information. However, all collaborations shared a same pattern. Among the important information displayed, the common points were:
• The discount in the offer
• A date range (individual collabs) or specific date (foodie meetings)
• The number of companions (individual) or guests (meetings)

But the most important piece of information was different for restaurants and foodies. Restaurants needed to have an overview of all the collaborations in the same campaign. In the case of the foodies, it was the restaurant's name.

We decided to build a similar component for both views, sharing the same design structure through the platform.

Ruben and Isaac wanted a clean and not too-colorful interface, so I decided to utilize basic colors (green for confirmation, blue for accent, yellow for alert, and red for deletion) and the same palette for the tags. We decided that the default collaboration would be an individual and private invitation, and made a tag for public collaborations and foodie meetings.

Solofoodies UI screenSolofoodies UI screenSolofoodies UI screenSolofoodies UI screenSolofoodies UI screen

Second round: Improving collabs

The rest of the app was redesigned based on users' feedback

Six months later, Solofoodies came with a new logo, and counted on me once more to redesign the rest of the platform.

After their first launch and with some clients and traction, Ruben and Isaac contacted me again to make some improvements in Solofoodies. They also had a new logo built and brand colors, and wanted to modify the UI to match their new visual identity. We redefined some colors to match the brand, but kept the product's UI bright and clean.

We reworked all the UX and UI visuals of the product, from the onboarding to every detail of the collaborations.

They collected a lot of feedback from users, especially from restaurants. For example, there were users creating collab invitations for two different days of the week separately because they could only choose between "weekday" and "weekend". We reworked the design of the weekdays, so they could customize it more easily.

Another example is how restaurant users couldn't recognize the different collaborations that they made. Displaying the invited foodies' pictures wasn't an option from the beginning due to technical reasons. The final solution was to show the names of the foodies in the collaboration.

We also redesigned the way restaurants made their invitation, showing step-by-step how they were creating the new collaboration card. This would help them to situate all the information on the card.

Solofoodies collab creation screenSolofoodies collab creation screenSolofoodies collab creation screenSolofoodies collab creation screenSolofoodies collab creation screenSolofoodies collab creation screenSolofoodies collab creation screenSolofoodies collab creation screen

The spotlight: Reviews management

As a collaboration platform, trust was crucial

Restaurants promotion is the final goal, and that's what Solofoodies wanted to encourage in the platform. Reviews were a key matter.

More on the user experience perspective, another issue for them was the collaboration and reviews management, the main dish of the platform.

We needed foodies to upload the collaboration posts and make them visible for the restaurant. Furthermore, we needed the restaurants to assess the foodies once they made their collaboration public. We made the reviewing process a modal card to inspire agileness and simpleness.

To make reviews and reliability, we gave them importance in the UI by displaying them clearly in the profile and attaching it to the collaborations.

Solofoodies profile screenSolofoodies profile screen

BONUS: Making cards extensible

A new evolved component with extra modules

For the previously designed collaboration cards (and the new foodie cards), we created add-on extensions with relevant information for the context

The collabs between foodies and restaurants go through a lot of steps, before and after the assistance to the venue.

First, either the foodie requests a collaboration or the restaurant sends an invitation. Then, the other party accepts.

Since there's so many steps and we need to visualize them in the platform –especially for restaurants, which have to deal with a lot of collaborations with diverse foodies– we felt the need to include different information depending on the state of the collaboration.

As shown below, the information of interest changes depending on the phase of the collab. This concept ended up being applied to collaboration cards and profile cards as well.

Solofoodies foodie cardSolofoodies foodie cardSolofoodies foodie cardSolofoodies foodie cardSolofoodies foodie cardSolofoodies foodie card
Conclusions & learnings
Like many other startup projects, Solofoodies wasn't the exception and they needed things to be done in with a short budget. Thus, like most times, I couldn't do proper research and test myself. However, by good fortune, I got the opportunity to iterate on the product design. That taught me many things:
First, I reconfirmed the importance of user testing and user feedback. Without that, it would've ended up being one more good-looking project for Dribbble/Behance. Instead, I got valuable information and the opportunity to improve it and learn from my own mistakes. As a freelance, you can work on a lot of projects, and with time get faster at the execution of your work, but you only get better when you iterate.
I found it valuable to keep working on the same project long-term, to learn more from the users and even from mistakes that I can make. Receiving the opportunity of fixing and improving a product that you made in the past is not common as a freelance.
I consider this project as one of the catalysts that encouraged me to look for a stable project that I can keep working on, iterating, evolving, and growing. To make a real impact on the project.