home > work > transformarte

Transformarte: Involving users in a social project

Responsive Web Design — UX|UI project

Beyond communicating a social project in the digital world, this project aims to explain and solve the lack of involvement of people in social causes.

This final project for the UX/UI Design Bootcamp was selected finalist by a jury and presented on the Hackshow BCN 2020.


2 weeks


Design Thinking


Research, user flows, information architecture, sketching, wireframing, UI & visual design, prototyping, testing

The big picture

For this time, the Ironhack Tech School worked with a social innovation lab, Learning by Helping, and with the first code academy for migrants and refugees in Barcelona, Migracode, to develop a collective project. The ‘work chain’ was like:

The brief

I worked following the Design Thinking methodology for two weeks to create the most accurate web design for the social project Transformarte.

‘Transformarte’ is an initiative supported by Arrels Fundació that works with homeless people and tries to give them training, employment, and also to integrate them into society. As it does? Organizing sewing and textile workshops in which home and homeless people participate together.

*It’s necessary to clarify that this project was in the prototype phase when we had the brief, so most decisions were made based on the user research results.

Let’s go deeper!

At the time of facing the process, we had clear that we must accomplish certain specific brief’s requirements: 

Must have

  • Section ‘about the project’ and workshops.
  • ‘Contact us’ section to collaborate or receive info.
  • Optimization for desktop and mobile view.

Nice to have

  • Workshop’s participants reviews 
  • Stories and personal ties created in teh workshop.

In addition to this, we must understand user behavior. As it was a social matter, our investigation purpose was to discover the people’s extent of involvement with projects with this cause. From the survey (160 answers) we launched, we extract various patterns:

20,8% are actively engaged.

85,4% would like to participate in more social initiatives.

46% would like to work directly with the social collective.

In short, all showed interest in getting involved in social projects but in practice, they didn’t. To discover why, we conducted eight interviews and found the main insights:

8/8 don’t trust projects have real and beneficial impact.

5/8 only participate in projects related to their values.

3/8 feel that their help won’t be helpful.

At this point, we were more clear about how the potential user of the social project thinks and acts, and this allows us to understand their needs:

With all this info collected, we closed the definition phase with the question

How might we make them trust that projects are really beneficial and useful for people from vulnerable groups?

This question applied to our specific case is: HMW (as UX/UI designers) make users trust the Transformarte project, want to participate, and decide to do so by buying a workshop? The answer is our website Value Proposal:

  • Involve the user and make him feel important by inviting him to collaborate.
  • Show project information clearly and transparently.

Ideating the solution

The most accepted idea was developed until it can be drawn in a low fidelity wireframe and tested with 6 users, focusing on checking the web structure:

Users feedback:
  • Sections with too much text, and too long landing text.
  • Need facts, results, and testimonials.

We applied the feedback changes in a medium-fidelity wireframe and we tested again with 4 users and also in a design group crit to validate the copy and the navigation:

Users feedback:
  • Simplify CTA: to participate / collaborate / sign up …
  • Confusing terms like calling the workshop ‘upcycling lab’.
  • Confusing navigation: Two menus (horizontal and vertical) + Users didn’t know where they are.

Arguing the visual decisions

Before starting the hi-fi prototype, we build the Moodboard inspired by our experience participating in one Transformarte textile workshop. Take part in was very useful to define the creative core concept:

Colors were tested in a 5-second test where users found them too muted, so we changed it and the new ones were checked for accessibility. We also conducted a Microsoft Reaction Card test with 8 users to know what did our website transmit to them: 7/8 mentioned one or more of the above concepts. We did it!

Hi-fi prototype

The funnel would be completed when a user buys a workshop. How would we get it?

  • Shortening the path: the site map is so simple that in just three clicks the user can buy a workshop:
  • Features based on test feedback: most of the sections we added respond to specific users requests:

“I want to know what they do with the money I pay”

— “I need to know who and what is behind the project”

The final result is an informative website that displays all the info through a vertical scroll:

As one more requirement, we adapt the content to the mobile view:

What’s next?

For the time, just two weeks were a challenge to design an MVP for this project. For the future, to add functionalities in the purchase process (cart, book workshop…) and to contemplate different user profiles are a must!

Conclusion & learnings

This project allows us to learn about the hang-ups of working according to the requests of a client (the creators of the social project) and taking into account that our work had to be correctly delivered to another team (the developers).

We learned that communication is essential, both within the team and with the rest of the links in the chain. And that when info doesn’t arrive on time, the most important thing is to base all decisions on research and data.

Personally, I’m super glad about the result and also pleased about the process followed by overcoming difficulties, facing dares as exciting challenges, and getting so involved and enjoying so much.

Thanks for reading! 🤟🏼 If you want to know more in detail about my work, contact me via email or connect me on LinkedIn

Powered by ©lucíalanza 2021