UX/UI Design Case Study

Guille Darriba
8 min readDec 10, 2020

TL; DR (too long; didn’t read)

We designed a responsive website about a social project. The initial purpose of the page is to inform about the benefits of CBD and about the aid that is made to homeless people from this charity project. In the background, the website incorporates a small e-commerce of CBD oils to obtain funds.

“Mixing Cannabis, homeless people and UX in the same project? It sounds interestingly challenging and even dangerous, tell me more!”

This project won Hackshow Barcelona 2020 (we won a truck full of pride and a pair of socks).


·Brief: The challenge of cultivandobienestar.com is to inform and raise awareness about the benefits of CBD, breaking with the stigmas that exist both towards the consumption of this product and towards homeless people; as well as selling products that collaborate in the training of these people in the field of horticulture and facilitate their access to this treatment.

·Product: Responsive website.

·Project time: 14 days.

·Applied methodology: Design Thinking.

·Tools used: Secondary research, Surveys, Interviews, Affinity map, User Persona, Brain Storming, Concept Testing, Jobs to be Done, User Stories, Moscow, MVP, Use Cases, Wireframing, Concept Testing, Creative Concept, Moodboard, Style Tile, Microsoft Reaction Card Method.

·Team: In a team with Paula Monteagudo and Miriam Corcuera Opinska.


CBD stands for “Cannabidiol”. It is a product that comes from Cannabis and is marketed legally in many countries. Cannabis has a multitude of components, of which the most important are THC and CBD. The first one is the one that has psychotropic effects and generates addiction, and CBD is the one that has therapeutic properties, relaxes and let’s say it “does not high”. It can be consumed in different ways, the most common in oil droplets of CBD distributed in small vials. According to the World Health Organization; CBD is not addictive, nor is it harmful to health and has a multitude of therapeutic properties.

Coming from Cannabis, CBD is always associated with numerous prejudices.

This project has a social base that provides training in horticulture to homeless people so that they grow CBD, and the sale of this product allows to sustain the project, as well as give them access to CBD treatment for their health problems. Our part of the process consists of designing a responsive website whose main objective is to INFORM and eliminate existing prejudices about CBD, as well as to publicize the social project and, secondly, to sell the CBD produced.

We started with an investigation to find out about potential CBD users who do not consume it due to ignorance or prejudice. As it is a social project, we also analysed their interest in participating in this type of project.

Survey insights.

Through a survey of 77 people, we obtained quantitative data such as that 70% had not heard of CBD and only 10% had ever used it.

Interviews insights.

Through interviews with 7 people, we obtained qualitative data such as that they relate CBD to drugs. We also conducted a deeper investigation from which we learned that 60% of CBD users are women, and that depending on their age range they use it to cure different health problems.

Some of the most relevant insights we obtained from the research was the amount of misinformation there is regarding CBD, both by people who do not know it and by those who believe that it is addictive, although many of them are willing to try it if they see that it can be beneficial to them.

Users Persona

Then we define the main User Persona, which to the surprise of many, it is not a fan of Bob Marley or a hippie of the 70s. She is Montse, a Catalan woman of 27 years old who suffers occasionally from stress and job anxiety, and whose friend has recommended her start trying CBD. However, Montse is not very confident about “Cannabidiol”, so she needs to obtain information that could change her mind. We added a second User Persona, who we also considered throughout all the design process, but we focused more on Montse, because she is the principal user.

Then is when we defined the problem we had to attack:

“Women between the ages of 25 and 34 are trying to find a way to reduce their anxiety, but they are wary of the effectiveness of CBD because they do not have enough product information or trust in its distributors, or they have prejudices about them, which makes them feel uncertain and prevents them from benefiting from their possible use.”


Users needed IMPACT. This is the key concept and the most important part of our entire project. Impact; direct information that cleanses prejudices, and that is not easy to forget.

We use different processes to come up with the MVP. Of the different Concept Testing that we carried out on seven people, the conclusion we drew is that users remembered better the ideas that generated the greatest impact on them.

Our value proposition is as follows: we generate direct impact on the user, presenting information about CBD and its benefits in a visually striking way in order to correct prejudices, as well as providing information about the social project to which they could collaborate by purchasing products.

As a result of the project brief and the research and tests with users, the functionalities that the Minimum Viable Product should contain are:

·Provide information on both the CBD and the social project, with a long scroll that serves as an informative path, eliminating prejudices and informing the user step by step, so that they do not get lost among a multitude of options and have only one way to follow;

·Create an online store for CBD oils as well as provide access to points of sale through an interactive map;

·Include testimonies of homeless people attached to the project;

·And include links to blog posts and social networks.


We generated prototypes first in LoFi and then in MidFi, which we tested with 6 users. We learned, among other things, that we should maintain the same level of visual strength throughout the entire page and present a fixed menu.

Creative Concept.

In order to develop the prototype in high fidelity, we established the Creative Concept that will guide our design, the IMPACT concept.

Style Tile.

We defined the style tile with striking and striking colors, but always checking that they met accessibility and contrast conditions. We tested different colors with users who helped us choose which of them impacted them the most.

We moved these styles to our first HiFi and we added numerous changes obtained from the tests. We used the Microsoft Reaction Card Method with 6 users to see how our website made them feel. “Attractive”, “Distracting”, “Unconventional”, “Energetic”, and of course “Impactful” were the results.


The final prototype consists of a responsive web with a long scroll where the user can follow the recommended route of information about CBD and the social project, without getting lost on the way or feeling distracted by other actions to be taken. In this way we fulfilled both the brief of the project and the solution to the problem discovered in the research, everything always considering the concept of the project; the IMPACT.

The phases of this scroll are:

The 3 most popular myths regarding CBD are presented here, and through a striking modal we obtain texts that informs us of the true reality.

The user is given information here about what CBD is, what its benefits are and how it is consumed.

The visitor can obtain information about the social support that exists behind the Cultivando Bienestar project, as well as learn in depth how they work with homeless people.

Opinions of homeless people associated with the project, who have been part of it and have been able to benefit from it, are published here.

Small store of oils produced by the homeless people. They are marketed in three types of concentration and could be purchased through secure payment platforms.

We keep the user updated on both the CBD world and the social project.

Map and local CBD stores.

With voluntary sign up.

Telephone, e-mail and Social Networks.


For the near future, the next steps or ideas to test and study are:

· Live chat to consult doubts about the product or the project.

· Donations system.

· Extend the project in general to other different user profiles.

Go scroll, go!


From all this Project, the most important thing we have learned was:

· To have confidence in the team. The Deadline is stalking and more dangerous as it gets closer, so the confidence in the work and good work of your colleagues is essential to defeat this powerful enemy.

· To defend a project with a sensitive theme, and to do so trying to avoid falling into the temptation of mixing the informative world of a natural medicinal product with that of the “Grow Shop” theme.

· To convey well in the tests what is the brief of your project and make it clear; It was a challenge to carry out a test by making the tested user see that the main objective of the website was not to sell oils like crazy, but to inform the visitor of the benefits of CBD and help him/her to clear his prejudices, if he/she has them.

· To consider opinions of tested users, of fellow Stand-Ups, and of the stakeholders.

Thanks for reading! ⚡



Guille Darriba

📱UX/UI Designer ⚡USER-CENTERED digital content creator with an extensive background in Graphic Design and Drafter CAD Design. 📧hello@guilledarriba.com