It is difficult to find suitable roommates. The app is designed to simplify this search by comparing the values of two people and matching them if they overlap.
I worked independently on the whole project, from research to prototypes. The focus of this project was on the UI design.
Since I did not have direct test subjects available, I sought the opinions and experiences of potential users elsewhere. For this purpose, I read through various forum entries and articles to gain an insight into the problems of finding a roommate. Here is what I have gathered.
One of the issues cited is that of members of the LGBTQ community:
We continued brainstorming on a whiteboard to get an understanding of the mechanics we would need to implement and to narrow down our idea to something that we would be able to implement in two months. In addition we wrote down various endings the player could reach.
We also tried to find out how much space the player would be required to have in real life to be able to play the game comfortably at home. We came to the conclusion that a 4m x 4m space would be perfect for our purposes. As it would be small enough for people to play at home, but still big enough so that they could move freely.
This concluded in our final storyline:
We went ahead and organized all our work through Trello, so that we always knew what tasks were still to be completed. We mostly worked in the lab, but at times we had to work remote. We did this through Discord and of course GitHub was used at all times.
To get a feel for the basic structure of the app, I first drew sketches of the most important screens. Beforehand I created a sitemap and made notes about the important functionalities I wanted to include. The sketches gave me the opportunity to quickly try out and go through different ideas, if I did not like them I was able discard easily.
First, I created a mood board with images that reflected the atmosphere of the app. With the colors from these images, I then picked out matching screenshots of various apps that have a similar color scheme or convey a similar atmosphere. Based on this moodboard I created a design system.
We also sketched out all the rooms in our game to get a better understanding of the flow.
I placed necessarily and distracting objects into Unity and made them interactable. The distracting objects such as the wineglas were placed in the room with the intention of one making the mini games a bit more difficult to solve and two to give the feeling of that this submarine is indeed used by a rich person. We believed that this would make the game play much more enjoyable, than having only the necessarily objects in the room and solving every mini game as fast as possible.
To further elevate the game play I also created an atmosphere of being stuck underwater by adding atmospheric music, pictures of Atlantis as well as an underwater world with fish boids, which was observable from the inside of the submarine. If the player won an animation would play of them escaping into the underwater world.
As a way of not overwhelming the user we decided to not implement all of the wishes that were voiced. However, the ones that we did consider are included in the PACT analysis above.
With our findings we created a wireframe. This may seem redundant as we already tested with a mid-fidelity prototype, but this seemed to be the best option for us since we initially planned to use our sketches for the user testing. Furthermore, we wanted to focus on the functionality and user experience of the app first rather than the aesthetics. I was responsible for designing the translation page for our wireframe. You can interact with the Wireframes here.
We also established a design system and made custom icons for the app. However, we did not want to reinvent the wheel so they do look similar to other apps. This is to avoid the user having a hard time getting accustomed to the navigation. So whenever possible and logical we chose to establish an external consistency. I was responsible for making the smartglasses and pairing icon. All the icons were done in flat design as we wanted our app to look clean.
In the design of the logo we had to chose between a lot of designs we made. Some would been difficult to recognize, when scaled down so we decided against them. The logo we have chosen in the end is supposed to represent the globe. In front of the globe a "U" is placed, which stands for the name of our companion app. So in a sense the logo represents our goal of the app in uniting the world and overcoming language barriers. The logo is simplistic, easily recognizable, scalable and has meaning.
As for the colours we chose; we believed that the mainly blue theme of the app would contribute to the calm atmosphere that we wanted to establish. Giving the user the impression that nothing has to be rushed and everything is on its right place.
The font we chose is not a serif font. The reason being is to provide an optimal flow of reading with the user getting tired.
With the previously developed design system and following the wireframes, I started to further develop my idea with the help of a high-fidelity prototype. I was inspired by different apps from my moodboard. It was important to me to keep an internal and external consistency.
You can interact with the prototype under this link.
It is possible to use the app without prior registration or login, but only in a limited way. The restriction lies in the fact that only registered users can contact others.
Users without an account are also suggested suitable roommates. If they are interested, they can register for the app. In this case, the data is retained and transferred to the new account.
After registering or continuing without an account, a series of questions follow, which the use must answer. This will complete their profile and look for suitable roommates.
On the home page, roommates and apartments are recommended to users. These results are based on the questionnaire and the desired place of residence.The suggested people can be rejected, saved or contacted.The suggested apartments can also be saved. It is also possible to contact the creator of the ad directly.
The bulletin board is intended to easily save apartments and people, and to create lists.
These lists can be shared with others. Thus, interesting apartments can be stored in a clear and organized manner and do not get lost in the chat.
The chat function is similar to various messaging apps on the market. It is possible to have individual chats as well as group chats.
Group chats appear to be useful in the sense that they allow several users to talk together about a potential shared flat and to get to know each other.
The user can manage their own account in their profile.
Furthermore, an apartment offer can also be posted here.
Since posting apartments is not the main focus of the app, this option is located under the profile and does not have an independent button, as for example in the navigation bar.
A web-based game that conducts on-the-job training efficiently with the help of a virtual assistant
