United is a translation app for smartglasses. The smartglasses help translate everything you see visually and auditory. To use this feature we designed a companion app with which a connection to the glasses can be established. The app also helps you to save translations of conversations you had in the past.
I was involved in the ideation and design process until the last prototype. In the beginning each of the team members presented their ideas of the app from this discussions emerged and we built something that combined all our ideas. In the final prototype I was mainly involved in creating the translation and settings page.
The world is a melting pot consisting of people of various cultures and languages. Though this is a wonderful thing the resulting language barrier can become frustrating and make communicating with each other difficult.
Now imagine a time where smartglasses are fully usable. This would be an ultimative opportunity to overcome these language barriers and be able to communicate more easily with people, whos language we do not speak or fully understand.
This is exactly what United is for! It helps you overcome language barriers super easily. The companion app helps you to look up past conversations, you have had by connecting to your smartglasses via NFC. By pairing the glasses with the app you can also study languages visually and auditory.
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.
For the purpose of designing an impactful app, we chose a human-centered approach. Therefore, we developed three personas in addition to conducting a PACT analysis. This allowed us to get a concrete picture of the people behind the application and incorporate this information into our design decisions
We defined 3 Use Cases for our Companion App in order to built a more detailed prototype. These included
Each team member sketched out multiple frames and imported the sketches into Marvel. This formed the basis for our discussion.
One of our teammates had already built a prototyp with a higher fidelity this was not our plan from the start but we decided to use that to do an initial user testing and get the input of people outside of our team as it contained the overall things that we were looking for in the app. But before doing a user testing we tweeked it so it would be adapted to the teams expectation. We did the user testing with a group of students, who studied something related to computer science. Take a loot at it here.
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.
We used our high-fidelity prototype to do a user testing. Unfortunately, due to the Covid-19 restrictions at the time we were only able to recruit three participants for our testing.
I conducted the Interviews with two people. The third participant was interviewed by a teammember. Before we started with the interview I explained the concept of smartglasses to the participants and the purpose of our application. The task of the participants consisted of completing use cases, namely creating an account, connecting the companion app with the glasses, translating a given sentence and lastly to learn something. While they were completing the task we asked all the participants to use the thinking aloud method. This was helpful for the evaluation of the interviews as we would be able to understand the source of problems. As a last step the participants completed the System Usability Scale and had the opportunity to give us further insights about their experience through open questions.
Due to the small number of subjects, the SUS score shows a high variance, with an average of 82.5. This result is a small indication of high usability, but should not be overestimated. The two subjects with a higher affinity for technology rated the prototype with a SUS score of 92.5, wheras the third subject had a score of 62.5. Overall, the results of the summative evaluation in particular provide some suggestions for improving the usability of our app.
To solve the comprehension problems encountered when using the app, it makes sense to implement a tutorial on the basic functions of the app on its first launch, which could be called up again as needed. A manual language selection, when launching the app will also be included in the final product. The navigation to connect to the smartglasses was sometimes not found immediately. Since connecting to the smartglasses is a key path scenario, the saliency of the corresponding button should be increased. The technical problems - e.g. long loading times - are due to limitations of Axure that should no longer occur in the final version of the app. In addition, we have added the German language as an example in the Lessons, so that one gets the impression that several languages can be learned. The question if you can also learn other languages came up a few times, so we added it to the mock-up.
Try out the final prototype here.
A web-based game that conducts on-the-job training efficiently with the help of a virtual assistant
