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:

Lean Survey Canvas

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:

Competitive Analysis

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:

Empathy map

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:

MoSCoW

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:

Card sorting

Mixing all this was, as usual, quite helpful to design the actual structure of the site:

Site map

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:

User Flow

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:

LoFi Prototype

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:

MidFi 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:

Moodboard

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:

Alignment, spacing, shadowing

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:

Final prototype

Thank you very much for reading, and please feel free to contact me with anything!

-Manu

--

--

Connecting the dots.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store