Add a feature to Whats App ✅
By: Katharina Ewen
Tags: Figma, Features, WhatsApp, UX Design

Veni, vidi, whats app

There it was, the first own project during my time at Ironhack. Of course I was excited and also a bit anxious to see how I’d master the challenge. I was all the more then relieved when we found out about the task. Each of the bootcamp participants had to design a new feature for an app. Which app we had to deal with was chosen randomly. I was assigned the messenger service Whats App, which I was more than happy with. After all, I’ve been using this app for years and I can’t imagine my life without it. So in this article I would like to present my approach and the final result.

The task itself

Whats App will be known to everyone by now, young and old alike. The messenger is easy to use and simply convinces with its functionality. However, there is not much room for individual design. Although you can change the background of the app and use emojis and stickers, you cannot change the font yet. So my task for this challenge was to implement the feature that the user can change the font style and it’s color.

Where to place the feature

Now I knew the feature that I should add. Now the only question was how and where to add it. To get to the bottom of the question, I counter-tested my two ideas and used interviews and simple A/B testing to determine which option was better. Either I include the feature directly in the text field or I implement it in the settings. Both options would make sense and the user would probably expect the feature in both places.

Option A und Option B on how to implement the feature

To weigh both options against each other, I created a few low-fis and conducted interviews with Whats App users to find out which option is the better one. The end result? Option A was indeed preferred. This is mainly because the user already knows from other apps the feature that the font can be changed. And that’s why it’s more intuitive to include the feature at that point, simply because the user expects it at that point based on other applications.Just think of the program Word, which is probably just as familiar to each of us. To edit the text (be it the color or the size or the font), you just have to select it. This is just one of many examples that illustrate once again that the user also expects this function in the text field in Whats App.

To clarify the process once again, I created a user flow that helped me create the mid-fi and served as a base for the process afterwards.

The User Flow from start to end

My very first version of the Mid-Fi

In the following video you’ll see the final prototype. As you can see I rebuild the whole whats app design with Figma, which was also kind of challenge first, because it was my first own project and it took me while. However, I’m really happy with the result and as you can see it’s very intuitive and super easy to understand. On a side note: In the High-Fi Prototype I’m showing you how the change the font. When you want to change the color, it would work the same way.

If you want to have a closer look, here’s the link to the prototype on figma.

Conclusion

This project started a bit challenging (since it was my very first own project during the bootcamp), but it in the end it was a lot of fun. Especially that I had to rebuild Whats App on Figma was the perfect exercise for me to get all the functionalities of it. Also the interviews were super helpful and with the help of them, it was easy to understand the user and where would be the best place to put the new feature on Whats App. As you might have seen in the video of the prototype, the placement of it feels and looks very natural and (maybe) seems not be anything special. But that’s what I like about it so much — it feel super intuitive, it’s easy to understand and does not stand out (in a good way).