Implementation of a Whatsapp Feature- 2. Project
Task
This project is about implementing a feature on Whatsapp that allows users to write a text in their language and then translate it directly into another language.
Process
First of all I created four lo fi wireframes, which show different ways to implement this feature. Only two of them were functional as it turned out after testing. I continued to work on these two. The first version was to implement a visible button, which leads directly through a shortcut to the translation. In the second version the translation function was more hidden under the category where you can look up, copy and edit a text. Once you clicked on the translation function you would be redirected to a Whatsapp internal translation page. After several tests, I decided to use a mix of both.It became a somewhat hidden translation feature, which can be found within the category, where you can also edit the text, but I decided to go for the second step of the first version, because it has a shortcut for a faster process and you can get to your goal quickly. Now it was just a matter of testing it in a mid-fi. The testers have almost all acted intuitively and quickly arrived at the result.
These wireframes were determined by the following User Flow
Now I could start with the Hi-Fi Wireframes and start the prototype. Now I could start with the Hi-Fi and the prototype. For this it is important to create elements that determine the atomic design, to create small molecules and thus templates to create a whole page. To better understand the basis of my high fidelity prototype the following figure shows the necessary elements.
On the left you can see an example of the atomic elements and on the right an example which makes up a whole page composed of all atomic elements.
In order to implement a feature it is very important to keep the focus on consistency, to see where the feature stands in relation to the main goals of the app. As I found out from my testers that this was not the most important feature, it was clear that the feature needed the most visibility. Therefore some heuristics should be considered. Colours, font and size also play an important role. Furthermore, the recognisability of the button is very important so that users can always find their way back to their destination. Furthermore there is always the possibility to escape by clicking out of the option field or by undoing the translation. The feature also offers the user flexibility by using a shortcut for the most used languages.
Iteration
After testing several lo-fi’s and mid-fi’s, it was important for the hi-fi wireframes to see how to design the translation button. On the one hand it has to match the design, but on the other hand it has to be visible and well embedded in the integrated category. The first button I created looked like a translation function but it did not fit as a button. As soon as the button was scaled down, the symbol was no longer recognized. The second button was more recognisable and fitted to the design. Testers clearly favoured the second button.
Next Steps
Among my testers there were a few who would like to have this button more visible, as they would actually like to use this function more often. For them it would be great to offer the option to move the button to a place where it is most convenient and visible for them.
Learnings
After each new version, testing is the most important way to find out what users need and how they would use the function intuitively. It is important to pay attention to how they behave during testing and what they look at first. It is also helpful to test several versions to see what the user finds easiest. It is important not to ignore the most important function of the app and see how the feature fits in relation to it.
