Jan 29, 2021
Gifter App: choosing gifts for your loved ones has never been easier
For our last but not least project in Ironhack, we were asked to think about a problem we had experienced and to solve it by developing an app or a webpage.
I gave it a lot of thought, and since it was Christmas time, not being able to choose a gift was something I was most definitely familiar with. Too many secret santas recieving somethin I would never use, too much time trying my best to find out what could I possibly buy for someone I was not quite close with.
So, first of all, I needed to structure and organize what needed to be done. In order to do that, we first divide it in two phases: UX and UI.
Phase 1: UX
This first phase consists in figuring out what the user needs, what the user wants, and how can we build this tool in order to be simple, clean and user friendly.
It can also be separated in four parts, which can be completed each day:
Day 1: Empathize
First of all we need to get out there and talk to the user. In order to do that, I conducted several guerrilla interviews, a few minutes long each, that helped me see that this was, in principle, a good path to follow.
The I designed a quick Lean Survey Canvas, a tool used to create both surveys and interviews, because you need to ask good questions to get good answers:
Once we got this, I published a Google Survey and started calling some target users (27 in total) and talked to them about all this.
What I found is that most of the people do have problems selecting gifts, even when they do know the person well.
They mostly used web pages and apps that I studied in a Competitive Analysis in order to further understand what tools are currently available in this area:
So now we start to get an idea of what people wants us to do, and what posibilites we have.
Day 2: Define
Defining the problem is the first step towards finding a solution. Once I found what the user thought, I created a Lean UX Canvas to help structure how we’re going to work from here:
From there it was time to mix our thoughts with what I had learned from my conversations with the user. That’s why I needed to define who is our user persona (ideal user), his path and identifying when and why they might need our solution:
An empathy map also helps in defining how does this fictional person feel:
So, now that all the relevant information had been gathered, it was time to move on.
Which was clear after these two first days is that not only did people have trouble finding gifts for secret santas, but also for all kinds of situations, which gave me the opportunity to broaden the scope.
Day 3: Ideate
Ideating is the part where you transition from conceptualizing the problem to creating the solution.
A vital point here was the idea of having a menu where people could visit and choose potential gifts and adding them to their wishlist, where friends would be able to visit and reserve without them knowing.
A good first step towards this is doing what is called a Crazy 8, a quick (8 minutes) sketch of 8 hypothetical screens of your app:
With this first sketch done, a MoSCoW (short for Must/Should/Could/Won’t have) helps us prioritize and decide which of our early ideas will go forward and which will be left behind:
With all this in mind, it was time to start thinking about the structure of the app. For this, I conducted a card sorting, where my colleagues were able to organize a bunch of post-its with the possible distribution of the app:
Mixing all this was, as usual, quite helpful to design the actual structure of the site:
And right after, the user flow, to help us focus our work for the MVP. It must briefly show how the user goes from point A (entering the app) to point B; in this case, organizing a secret santa with some friends and visiting the profile of the one friend that the app chose for them:
Now I knew how the app would work and the structural design of it.
Day 4: Prototype and testing
With all the relevant information from the users gathered, I was able to start creating both a Low-Fidelity and a Mid-Fidelity prototypes.
This greatly helps the designer to quickly visualize how the solution will look and testing it greatly improves the productivity by helping change everything that doesn’t quite work before it’s too late:
Testing it by sharing it with colleagues helped me realize some changes that had to be done, which were reflected in the MidFi prototype.
I decided to use Material Design, in order to experience something different from iOS. This was also reflected in the prototype:
So, at this point in time, I had a clear idea of what the solution was going to be — an app that let’s you create a wish list so your friends can always know that to give you as a gift — and how it was going to work.
Phase 2: UI
With this structure in mind, it was time to change phase and start think about how it was going to look and feel.
Day 5: Brand
The app must follow the brand style, so I needed to create the Brand. First order of business was to develop a Moodboard intended to show the essence of the brand:
It evoques bright, happy colors. Gifts are usually delivered in joyfull situations and that’s what I wanted for the app.
“Collaborative, fun, inspiring, friendly, creative”. Those were the five most repeated words used by my colleagues when they saw the moodboard.
With this, it was time to choose some colors.
Thing was, the well known green and red that represented Christmas and therefore gifts, might mislead the user since they are usually related to success and error in the digital world, so I chose a friendly, calm blue:
And we needed a font. This was easy, since Material Design usually uses Roboto, which is both easy to read and compatible with most devices and screens.
Day 6: Style
With the colors and fonts chosen, it was time to start applying it to the actual app design while working on some other details, such as spacing and alignment:
All of this combined, with a quick logo design, results in the style guide for the proper app:
All of this was made while transforming the Mid-Fi prototype into a High-Fi prototype, so it could be adjusted down the road.
Day 7: High-Fi
Everything was set at this point, so after receiving some feedback from the Ironhack team, I finished the prototype, tested with my colleagues, changed some small details, and prepared to give a presentation about it the next day.
You can try it yourself here:
Thank you very much for reading, and please feel free to contact me with anything!
-Manu
