Time frame: November 2021 - February 2022
Tool: Figma
Project for "User Interface Design"
Team: Agu Crea, Amelie Pfänder, Anna Nguyen, Till Meinköhn, Luisa Schaub
Role: Concept development, UI/UX design, Prototyping, Text Writing
Challenge
Quantum computers have the potential to elevate the human race to new heights. In order to make this happen, the future generations need to be prepared now for what is about to come. Our challenge was to create an interactive way for teenagers to educate themselves on the topic of quantum computing in a fun and motivating way. The goal is to make our users excited about the potentials of the future, without overwhelming them due to the complexity of the topic.
Solution
We created QuantumOne, a mobile learning app that gives everyone an understanding of quantum computing, regardless of preferred learning style and (lack of) prior knowledge. The app's Artificial Intelligence, called QuantumU, adapts the educational content individually and continuously to the user. The heart of QuantumOne , the circuit board, is used to navigate to the different chapters and visualizes the learning process in an enganging way.
High-Fidelity Prototype
Experience QuantumOne
Loading Screen and beginning of the onboarding
Onboarding
For QuantumOne, we wanted to combine onboarding with storytelling. As our user group includes teenagers that aren't neccesarily into quantum physics, it is important to spark some interest and curiousness right from the beginning.
When the user launches our app for the first time, the onboarding process reinforces the app's value and provides instructions that highlight features. By wrapping it up in a story, the information is conveyed with help of emotions, which increases the motivation to continue with the app.
Introduction of QuantumU
Working with Artificial Intelligence requires transparency. It is important for our users to know how the AI works and supports them in order to be comfortable with it.
That is why QuantumU is introduced in the onboarding. QuantumU appears in form of a floating light and speaks directly to the user to create a friendly and open atmosphere.
Introduction of QuantumU in the onboarding
A look into one of the learning chapters
How QuantumU works
QuantumU supports the user during their learning process by adapting the content individually to them. If the text is too complex, it is possible to get further explanation by clicking on the glowing parts of the text.
With ongoing use of the feature, QuantumU learns what the user needs in order to achieve the best learning result and can alter the text right from the beginning.
As there are more learning styles, such as visual and auditory, it is always possible to switch from text to video.
Use Flow
In addition to the circuit board, it is also possible to get to the chapters via the overview. By selecting a chapter, the user can choose between starting the learning session, taking a quiz or viewing the summary. The last two options are only available after finishing the chapter.
With the quiz, users can test their knowledge and help QuantumU to get to know more about their strengths and weaknesses concerning the specific content.
QuantumQuiz
User profile
Profile with insights
On the profile page, users can explore what QuantumU learned about them, for instance their learning style or activity. Our user research showed that a lot of people are interested in this kind of information, and it is also a way for QuantumU to stay transparent.
Under "Interests" it is possible to select personal interests such as finance or simulation, to further customise the learning experience.
Design Process
We applied various design thinking methods to come up with an innovative solution based on our users needs. To gain a first understanding of what our users think, feel, say and do, we created an empathy map for our persona Jonas. Afterwards, we collected all our ideas on sticky notes and did quick scribbles to present our first solution to the team. Later in the process, we started prototyping, from paper to wireframe prototype and eventually the high fidelity prototype. The iterative approach with prototyping, followed by user tests, helped us to continually improve our design.
Application of design thinking methods and our paper, wireframe and high-fidelity prototype
We built the QuantumOne design system to have consistent design across the app and to save time and effort with reusable components. In order to create an understanding with the end users, we created two personas, Jonas and Irina. The use of personas helped us to focus on actual needs and expectations during the design process.
QuantumOne design system
Personas Jonas and Irina
Learnings
QuantumOne was the first design project that we did in a bigger group of five people. At first, we were afraid that this would lead to complications due to different working methods, opinions and design styles. Surprisingly, working as a bigger team was no problem at all. Instead, it really brought out the best in every member and pushed us to achieve the best result possible.
Dealing with the topic of quantum computers was not always easy. As I had no prior knowledge, I had to educate myself a lot in order to be able to write all the texts for the learning chapters. Still, I'm glad that I did it and I'm sure that this knowledge will help me in the future.
QuantumOne helped us to really get used to Figma and try out all the possibilities to create detailed prototypes. For the onboarding, we worked a lot with the "Smart Animate" function, which we used to create animations and transitions that look and feel like a real app.
