![](https://cdn.prod.website-files.com/654223878e190c1c355f2fa6/65428822a2d04495b0080d0c_fgjfgj.png)
Let's say that Duolingo decided to launch a travel app where people could book a language trips to different countries to imerse themselves in different activities and learn the language from locals. What would the flow for booking a trip look like?
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/6555d446dc16fcac8194757c_email-design.png)
Design a flow which fits the target users needs and goals while sticking to Dualingo’s brand guidelines.
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/6555d3e420c295a71718154a_searchalerts.gif)
Within this project due to the short timeline, it was not possible to conduct user research therefore I have relied on my own experience as a traveller.
The project started with benchmarking with similar competitor products. A proto persona was defined as well as the ontology of the app ( the different categories of objects that will exist in it) and the user flow.
This was concluded with sketches and a prototype design.
One useful way of differentiating between the different explanation needs is based on the types of questions users might want to ask the model.
In the domain of context-aware computing, the following types of questions are defined:
Input, Output, What, Why, Why Not, How, What If, How to, and Certainty
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/6555d24228cf849cc792b9ee_A1-final-yellow.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/6555d235bce57bcb3f4a6e18_B-gif-yellow.gif)
Successful travel apps such as Airbnb, Couchsurfing and Skyscanner were explored and good user experience patterns were discovered.
![](https://cdn.prod.website-files.com/654223878e190c1c355f2fa6/6552585a11a4d0205edb3dab_Screenshot%202023-11-06%20at%2018.36.30.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/6555cf168b0539c353059157_social-gif.gif)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/6555cf56991b0c2ee95eb7b7_social-post-adventure1.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/6555cf894a11ec9bb624c2cc_social-post-adventure2.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/6555cf9a11506bcbbe5cdb63_social-post-apply1.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/6555cfd5ed7999bb4a89d645_social-post-apply2.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/6555cfe3f503dc33904f030b_social-post-apply3.png)
A proto persona was created and the user flow of a traveller trying to book a place to stay and activities in the selected city.
![](https://cdn.prod.website-files.com/654223878e190c1c355f2fa6/65525899ed13fb6dd584ba7a_Screenshot%202023-11-06%20at%2019.19.03.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2fa6/6552588abbb9aaaa308c99ae_Screenshot%202023-11-06%20at%2019.20.32.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/65561d51be6ac0eb9ccd1be3_info.png)
Illustrations of Rotterdam hotspots to be used in promotional materials about living in Rotterdam.
Tools:
Illustrator
The Dualingo Travel app would include different type of object categories and to ensure a full understanding of the future app they were visualised first. There were activities, activity hosts, accommodations and accommodation hosts.
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/65561ef1dc16fcac81c9fa89_rotterdamhotspots.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/6554bd0490a4508b98ddef2d_Bontouch%20Case%20-%20Frame%201.jpg)
At this stage the steps within the user flow were visualised in the form of sketches.
![](https://cdn.prod.website-files.com/654223878e190c1c355f2fa6/6554a24423980af8edda6a2e_Screenshot%202023-11-15%20at%2011.24.30.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2fa6/6554a2440b4cd6d0f6af0ec8_Screenshot%202023-11-15%20at%2011.24.39.png)
Low-fi prototype
The Dualingo Travel app would include different type of object categories and to ensure a full understanding of the future app they were visualised first. There were activities, activity hosts, accommodations and accommodation hosts.
![](https://cdn.prod.website-files.com/654223878e190c1c355f2fa6/655258bd1cfbbe2a4ed06314_Screenshot%202023-11-06%20at%2019.04.29.png)
Improvements
4 usability tests were conducted to evaluate the first prototype’s usability and clarity.
Afterwards, the prototype was improved based on the findings. Some of the issues spotted during the usability tests are described below together with their improvements.
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/65521d71701c9b961c0f4d7f_Screenshot%202023-11-13%20at%2013.58.03.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/65521e9acc95bd4a6ed8a7e8_improv%20xsens.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/65521d71701c9b961c0f4d7f_Screenshot%202023-11-13%20at%2013.58.03.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/65521e9acc95bd4a6ed8a7e8_improv%20xsens.png)
A simple design system was created to ensure consistency and speed up the high-fidelity design process.
You can access the design system from here.
The design was created in Figma. You can access it from this link. Or watch the video below.
Once the web page was live click map and heatmap analysis could be made as all animations were now running smoothly and all interactions worked as expected.
Tobii eye tracker was used in another set of user tests in order to be find out which elements on the page attract the most attention and which are missed and see if we could use this information to optimise the page further in the future. A heatmap was generated based on the results.
Moreover, a clickmap was extracted from Hotjar which showed us where do users clicked the most on the live page.
Usual scenario
Unsual scenario
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/654e59bbbd8b2e43ea0e9afc_Page%2050.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/654e59bbbd8b2e43ea0e9afc_Page%2050.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/654e59c5a752cd0edd3847f0_Page%2051.png)
Improvements were made based on the major issues found during the usability tests. Some are mentioned below.
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/65523dccf9c49f21ac28ef92_Screenshot%202023-11-13%20at%2016.15.57.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/65523dcdabbf6e706724ed7d_Screenshot%202023-11-13%20at%2016.15.44.png)
![](https://cdn.prod.website-files.com/654223878e190c1c355f2f27/65523dcc7eef6d2dcff7f317_Screenshot%202023-11-13%20at%2016.15.28.png)