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.
Research, user flows, information architecture, sketching, wireframing, UI & visual design, prototyping, testing
The big picture
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:
Nice to have
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:
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:
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:
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!
The funnel would be completed when a user buys a workshop. How would we get it?
— “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:
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.
+34 697 21 43 91
Powered by ©lucíalanza 2021