Volen: Case Study (Ironhack Final Project)

Lucas Soto García
Sep 7, 2018 · 5 min read

Project brief

After 7 weeks of intense learning, Ironhack introduced us to the Final Project. That means recreating everything we’ve learned along the course in a project, including UX UI & IxD. From the scratch, to whatever we wanted.

First thoughts

Since the first minute, I knew I had to do something related with Charity and Nonprofits. I consider myself good at understanding people’s problems, but as an active volunteer I know how hard can be sometimes finding causes that you can actually help and also feel passionate about.

Designing the User Experience

After doing both English and Spanish surveys, and several interviews, I received 50+ responses. I considered it good enough to start working, since we are most of the time in a rush.

I got to see that people were more willing to help others by volunteering, and not just giving money. It has to be said that most of the interviewees were young people between 20–30. Even though I first wanted to focus the App on donating, I totally changed the scope of the project.

Click here to see the English survey results.

Click here to see the Spanish survey results.

Displaying the information

With many data from the research, displaying that information in a very visual way was very important for me. In order to turn data into actionable information, I decided to do an Affinity Diagram.

User Persona and Maps

After understanding the information I had, I decided to start building my User Persona. My first step was creating an Empathy Map, to realize the frustrations and goals of her/him.

With an Empathy Map done, I had a clear idea of my User Persona, Marta.

User Persona was done, but I didn’t know many things about the process that would take her to get involved into a Campaign. I created an User Journey to empathize with her, to find ways to increase her overall delight and to also find pain points in the journey.

User Journeys are useful for organizing information because they help us understand at a glance the high-level user experience, focus on areas we should work on that we might have otherwise overlooked and document a series of events and workflows.

Doing User Journeys also help you have a good idea of the User Flow you want to design in a Minimum Viable Product.

All the recent methods I had used before, gave me a good point of view of what the product Must have, Should have, Could have, and Wont have. Those are the basics of the MOSCOW methodology, done in a Feature Prioritization.

Pen and paper: Wireframes

With all of that done, It was the moment to grab a pen and a paper and to start sketching!

Since I was very interested in testing with the maximum amount of people, I managed to deliver the (very Low-Fi) Wireframes before the weekend, so I could access to more people. Even though I didn’t have the complete Flow, it was enough for a test.

After testing it, I had many To-Do and things to improve.

Designing the User Interface

Brand Attributes and Moodboard

Let’s be honest; At that point I had no clue of the look and feel of my App. But there was something I knew; some of the brand attributes that may have. So I did something.

Troubles came up…

I did something really bad on the UI part which was jumping from a very Low-Fi wireframes to a High-Fi one. That’s why I found lot of mistakes during the process, but I learned from them, which in my opinion is important.

Also, external problems during that week came up and I ended up jumping some steps, which I really regretted.

The UI is kinda improvable, and I’m looking forward to do it, but here are some mockups for you to see the main pages.

High-Fi screens

Why that color..

Since I knew I would have to work with lot of images, I knew I couldn’t use that much colors for the interface. At first I tried different combinations of blues, but it made the app look like a banking one. White/Grays made the app look confusing, so after combining a lot I got that “Volen Black” (hexcode: #2A2B2F)!

Conclusions

This project is the one that I have learned the most, and so the one that I have failed the most. I think progress comes with working, so I’m pretty sure next one will be kinda better with lot of improvement on the UI part. Nevertheless, I think that the UX part is kinda solid, and everything has a real meaning:

- Requirements are different depending on the campaign, since law and volunteering doesn’t like each other (for some activities you need like a thousands of papers and certifications, so the app eases you to get it)

- Chat Option is created to connect people to Nonprofits. It is offered as a last option, since most of Nonprofits can’t afford having a single person answering chats. So the same one that is on the help center answering email could afford answering few of them.

- Different Locations to volunteer, in case you are interested in traveling somewhere to do it. Otherwise you could just filter by your location.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade