Christopher Liljestam







Interaction Designer/UX-Designer
Currently looking for opportunities and challenges within UX and interaction design

About Me

My name is Christopher Liljestam and I am a 26-year-old interaction designer based in Landskrona, Sweden. In 2019, I earned a degree in Bachelor of Science with a major in interaction design from Malmö University. From my education, I developed a passion to identify and solve users' problems by creating intuitive experiences. I love to combine my problem-solving and creative skills to ideate concrete concepts and transform them into practical prototypes. During my education, I participated in several user-centered projects where I gathered a range of diverse skills through all the phases in a design process. My key strengths are: user research, concept development, usability testing, and prototype development.

Feel free to contact me for any inquires, feedback, or opportunities on the email: christopherliljestam@gmail.com

Download my resume here!

I am currently looking for any entry-level opportunities within UX and interaction design. Click on the arrow below to read more!


Journey to Interaction Design

Throughout my life, I have always had a huge interest in technology. I spent my high school years at IT-Gymnasiet in Helsingborg with a focus on technology and digital design. During these years, I had my first experience with the programming languages HTML, CSS, and JavaScript as well as digital tools such as Adobe Photoshop. After high school, I enrolled in a game development program at Malmö University. However, the program did not feel right so I switched to the program of Interaction Design and now, I cannot imagine doing anything else.

The future of this world is rapidly advancing with technology and new inventions which are changing people’s lives in terms of communication, work, and navigation. I want to be a part of this future where I believe that people should enjoy their daily interactions with these devices and not get frustrated and confused by their complexity.

My Skills and Design Process

The experiences of the range of projects transformed me into a true team player who are driven and loyal towards the project and the group. As a team player and designer, I conduct any task with serious responsibility and with the ambition to accomplish a task that I can be proud of. My curiosity makes me aspire to have an eye for details as well as a holistic focus to understand the entire situation. I am a fast learner and adapter, who will forever hunt for new insights to continuously develop myself into a better designer.

I utilize my knowledge in both quantitative and qualitative research methods to comprehend the problems and motivations of the target audience. I accumulate user data by conducting research methods such as surveys, workshops, interviews, and observations. I am experienced in creating physical and digital interactive wireframes to determine digital applications' aesthetics as well as their practical capability to provide an engaging experience. Regarding digital prototypes, I am comfortable to work with prototyping tools such as Adobe XD, UXPin, and Marvel. However, I also use my great skills in CSS, HTML, and JavaScript to create code-based prototypes with high fidelity.

The human-centered design processes were iterative and always began with user research which is crucial to define users' needs and problems. The processes were followed by "Design Thinking" or the "Double Diamond" model. A project was usually structured as following: User research -> Ideation -> Prototyping -> Usertestings -> Iterations -> Delivery. Lastly, I have a Wordpress journal where one can find more detailed information about my classes, other prototypes, reflections as well as my insights.

To access my journal, please click here.

Projects

X



Thesis project

Roles:
Interaction designer, User Researcher, Co-designer
Methods/tools:
Controlled Co-design workshop, user flows, experience prototyping, Wizard Of Oz prototyping, low-fi prototypes, brainstorming, literature study
Length:
12 weeks

In the last semester of my education, I conducted my thesis where I achieved my bachelor's degree. The thesis regarded how a voice user interface could be designed to convey information in an e-commerce website. The aim was to investigate how a voice user interface could improve the accessibility and navigation for visually impaired users.

Problem

The biggest problem of the design process that I encountered during the thesis was the difficulty to recruit visually impaired participants, as I contacted many visually impaired related organizations. It drastically changed my design process as my first intentions were to conduct interviews and observations to investigate accessibility with voice assistants and e-commerce websites. The process of trying to recruit visually impaired participants took a lot of effort and time. Hence, there was no time to create any prototypes based on the ideation or conduct user testings with the intended target group. Therefore, the outcome of the thesis needs an additional design process.

Approach to the problem

To compensate, the lack of visually impaired, I had to conduct further research about visually impaired and their navigation with digital tools. Based on the research, I also designed and facilitated a co-design workshop with sighted participants that included methods such as experience and Wizard of Oz prototyping. The participants in the workshop were blindfolded hence they could experience the sense of vision impairment. The blindfolders were important as they helped the sighted participants to understand how the visually impaired could navigate merely on their hearing. I utilized these prototype methods as they were perfect to quickly test the concept whereas an interactive hi-fi prototype would take too much time and effort. The main activity of the workshop utilized the Wizard of Oz method. In groups of two, one participant roleplayed as a voice user interface in an e-commerce website while the other participant was a visually impaired customer. The purpose of the activity was to detect common pain points with a voice user interface as a navigation tool, and then co-design solutions to these pain points.

In the other main activity, the participants sat around a table blindfolded with established voice assistants (Google Assistant and Siri) in the middle of the table. The participants interacted with the assistants in turns and later evaulated their responses in terms of efficiency and shortcomings. The purpose of this activity was to see how efficient the established voice assistants currently are for visually impaired users. The rest of the activities served as icebreakers to make the participants acquainted with the sense of being blindfolded. In one of these icebreaker activities, some participants had to draw a silhouette of a horse blindfolded while the others gave instructions.

planworkshop

The plan of the workshop with the included activities and materials

Insights

The participants addressed overloading of information from the roleplaying voice assistants as one of the main pain points that caused confusion and frustration. The participants occasionally felt lost in the navigation as a result of the enormous amount of information available on the site. A participant demanded to interrupt the "voice assistant" as the information also felt repetitive at times.

The other main pain point was the problem with flawed natural langauge processing of the contemporary voice assistants and their lack of fluid conversations. The established voice assistants misunderstood the participants' utterances due to dialects or poor articulation which made the participants uncertain if their utterances were perceived correctly.

To managed the overwhelming information, the participants who roleplayed as a voice user interface utilized explicit confirmations. They gave the roleplaying customers opportunities to confirm their interactions before proceeding. For example, a roleplaying voice user interface asked if a customer desired to know more details about a mentioned shirt or to proceed into the next clothing item. It slowed down the delivery of information to an essential slower pace where the customers had time to think and react. It also implies that the customer got more control over the conversations.

Furthermore, the roleplaying voice assistants also took advantage of their memory to work retrospectively. They remembered information from previous shopping trips to make the upcoming shopping trips faster for the customers. For instance, remember prior information such as address information or preferences regarding details of clothing. While brainstorming, I realized that explicit confirmations could also be used to repeat the utterances of users. The repeating of utterances would help the visually impaired to understand if the voice assistant perceived the whole utterance correctly before proceeding. For example, the voice assistant would respond on a long query as following: "Search for white Nike shoes, is that correct?" In the respond, the customer would hear if the correct preferences were conceived and identify potential flaws of the speech recognition.

workshoppicture

The co-design workshop with the sighted participants

affinity

A digital affinity diagram with the insights from the workshop



Ideation: brainstorming

Based on the insights from the workshop, I created two different questions which formed the foundation for my brainstorming. The questions were:

How can the system communicate feedback to the visually impaired user to prevent failed speech recognition?

How can the system and the visually impaired user collaborate to select relevant information without overwhelming the user?

With the first question, I wanted to explore how the system itself can help the visually impaired user to prevent flawed speech recognition. To highlight the importance of the voice assistant's audio feedback was vital, as visually impaired users rely heavily on their hearing.

The second question explores the possibilities of collaboration between the system and the visually impaired user, thus the system can provide relevant information without overwhelming the user. As seen in the workshop, there is a lot of opportunities to explore regarding the AI of a voice assistant as well as explicit confirmations. I generated several ideas but I only selected one each from each question to further explore.

Brainstorm

The brainstorming session based on the two questions

Ideation: userflows

I created two user flows based on these ideas to demonstrate how a voice user interface could be designed and prototyped. They showcase some dialogues of possible scenarios between a visually impaired customer and a voice user interface. The first user flow demonstrates how explicit confirmations can be utilized to ensure complete comprehension of the user's utterances. When a visually impaired customer gives a long query to the voice assistant, the voice assistant will utilize explicit confirmations by repeating the query and ask the customer for confirmation. If the customer confirms the query, the voice assistant will proceed with the process. However, if the customer disagrees the voice assistant would encourage the customer to articulate and speak louder so the voice assistant can perceive the future utterances correctly. In other words, the voice assistant provides the customer with a solution to help the customer deal with the problem. This would be especially helpful towards new users as they will learn quickly how to deal with flawed speech recognition.

The second user flow further demonstrates explicit confirmations but also how a voice user interface could work retrospectively. The user decides how the information shall be conveyed by the voice assistant which allows the user to set preferences. These preferences can be different depending on the amount of information and what kind of information the user desires. For example, one customer might want the information in a constant flow while another customer wants to receive the information at a slower pace. It implies that the customers will get more control of the information by handling it at their own pace. Furthermore, the option to chose their kind of information might also facilitate the heavy amount of information, as the customers will only hear what they want to hear. These preferences would be saved for next the search and future shopping trips unless they are contradicted with new preferences by the user.

voiceflow1

The first userflow showcases a dialogue with explicit confirmations in an e-commerce website

voiceflow2

The second userflow showcases the option for set preferences




What did I learn?

In the thesis project, I learned how to work independently as an interaction designer with full responsibility and use methods and techniques that I've learned from my education. I've learned the importance to be agile in the design process to solve the unforeseen obstacles that I will encounter. The project changed my perception of failure, whereas failure can encourage one to step back and try different approaches that potentially leads to progress. For instance, I failed to conduct empirical research with visually impaired people but I managed to progress with the design process by conducting a successful workshop with blindfolded participants. Click on the image below to download the thesis! Go back to the top here.


X

ReTuren

Roles:
Co-designer, User Researcher, Interaction designer
Responsibility:
Plan a co-design workshop, facilitate the co-design workshop, brainstorm user research methods, conduct fieldwork
Methods/tools:
Co-design/future workshop, cultural probes, interviews, observations, brainstorming, physical prototypes
Length:
10 weeks

In the co-design class, I conducted an informative and enjoyable group project with 4 other students regarding waste handling and recycling. The project took place in a small neighborhood called "Spårvägen" in Malmö which was under heavy construction.

The brief

The task of the project was provided to us by the waste handling company VA SYD. The assignment was to investigate the local residents' needs and ideas for an upcoming building with a focus on waste handling and recycling. The future building is planned to be located in Spårvägen with the name "ReTuren" hence the name of the project. The main method in the project was a co-design workshop as the method is a great approach to encourage creativity and discussions between stakeholders. The outcome of the workshop helped VA SYD to get a further distinct envision regarding the selection of activities and workshops in ReTuren.

sparvagen

The map displays the layout of Spårvägen and highlights the square, ReTuren and Art Academy

Overview

In the beginning of our design process, we made several different mind maps to gain a holistic overview based on our knowledge from the case description and presentations from VA SYD. We were granted access to a building in Spårvägen called "Infopoint" which was made by several shipping containers. The one-floor Infopoint building had electricity and plenty of room which was perfect for meetings and workshops. In one of the mind maps, we conducted a brainstorming session to ideate efficient methods to collect essential data such as the opinions and needs of the locals. The most popular approaches in our mind map were culture probes/opinion boards, workshop, and coffee interviews.

mindmap

The several mindmaps we made for the project




infopoint

The Infopoint building is made by shipping containers




Observations

We went to Spårvägen to investigate and gain a sense of familiarity with the location. Some parts of the apartment buildings in the neighborhood were under ongoing construction. The rest of the area consisted of shops, an upcoming square (Served as a parking area), a pre-school building, an Art Academy building and several completed apartment buildings. We got access to inhabitable apartment buildings where we utilized our opinion boards.

Area

A view of Spårvägen showing some apartment buildings, the Art Academy (To the right) and the square.



Interview with VA SYD

We had our meeting with our client from VA SYD to gather more information about our case and potential assets. She gave us access to the Infopoint building and essential contacts who could provide us accessibility into the apartment buildings. She also gave us the recommendation to check out the other ReTuren in Malmö which is located in another neighborhood called Lindängen.

Coffee interviews

We wanted to gain qualitative data from the locals by asking for quick interviews regarding recycling. We were prepared to offer coffee and cookies as compensation for their time. However, we barely met anyone at the location as the area was not an attractive place to be due to the ongoing construction.

interviews

We placed a small table with coffee and cookies in the area





ReTuren Lindängen

The visit to ReTuren in Lindängen was very inspiring as we could see how the established ReTuren was operating. ReTuren consists of a very large public building where people can participate in workshops and activities to learn more about sustainability. There were several recycle stations for the visitors' disposal where they can recycle electronics. There is also the opportunity to donate their unwanted belongings such as clothes, for others to take. The personnel of ReTuren mentioned that visitors took too many items, thus the personnel was compelled to limit the number of items to five items each day. The staff emphasized that ReTuren needs to be manned to make people follow the rules and recycle their items correctly.

ReTuren1

The entrance of ReTuren in Lindängen

ReTuren2

Some waste handling stations for electronics

ReTuren3

Clothes donated by people

Opinion boards

The purpose of the opinion boards was to gain quantitative data of the locals' opinions through a democratic approach. We wanted every resident in the area to feel that they were involved and had a chance to influence ReTuren. The boards consisted of an A3-size paper with a few questions regarding what makes them more engaged in recycling. The opinion boards were placed on the walls in each apartment building with accessible pencils and A4-size papers so the locals could write without us being present. We collected the opinion boards in the buildings after a week and noticed that the locals had a big interest in the topic. The locals had many different opinions regarding their engagement with recycling but the most popular ones were: The clearing of containers should be improved, more recycling stations, and access to farming.

opinionboard1

The result of the opinionboards shows a lot of interest in waste handling



Co-design workshop

The purpose of the co-design was to bring all the stakeholders together to co-operate and co-design ReTuren. We utilized our access to the apartments to send invitation letters to the locals through their mailboxes. Six people from the neighborhood showed interest to participate in the workshop which took place in the Infopoint building. Our representative from VA SYD was also attending the workshop.

The workshop consisted of two activities that were inspired by our teacher Pelle Ehn in a lecture about future workshops. The first phase is called the critique phase, where the participants use post-its notes to write their criticism to highlight the problems. In the next stage called the fantasy phase, the participants would use their creativity to ideate future solutions on the problems.

In the first activity of the workshop, we asked the participants about their problems with waste handling and recycling in the neighborhood. We wrote down the problems on post-its notes that we attached on large papers on the wall. Afterward, the problem was discussed between the participants, and throughout the activity, the discussions were consistent and informative. It was great to have the representative from VA SYD attend the workshop as she could answer any question the participants had about waste handling. Some of the problems that they discussed were as following: The neighborhood Spårvägen needed a place where the locals could either dispose or collect fabrics. More waste handling stations were needed, for example electronic items such as lamps. To add more garbage cans in the area, especially in the upcoming square. The participants also discussed how ReTuren should be operated. They only wanted the people living in the neighborhood to have access to the building as the participcants did not want unknown people to discard their garbage in the area. They also required ReTuren to have staff just like ReTuren in Lindängen.

In the second activity, they were divided into two groups where they could use their creativity to design the content of ReTuren. This was possible due to our physical prototypes that we made. prototypes were made out of wood with a printed layout of the neighborhood made by a laser-cutting machine. The prototypes highlighted the location of ReTuren as well as the location of the Art Academy building, thus the participants could recognize Spårvägen on the prototypes. Materials such as scissors, glues, pencils, paper and cardboard were accessible for the participants to use on the prototypes. The participants were very creative and truly utilized the materials. They wrote their ideas on papers and placed them onto the prototypes in their respective locations. For instance, if it was an event outside the building, they placed the note outside ReTuren on the prototype. One group used cardboards to build the building itself and placed their notes inside the cardboard buliding.

The participants had a range of different ideas. The eight most popular ideas were: A notice board. Both digitally on Facebook and physically where the locals could announce, for instance, events or the need of borrowing items. Workshops and events. To increase the locals' knowledge regarding recycling and sustainability. Workshop for repairs. For instance, to fix bicycles and furnitures. Meeting place. To create a sense of community and a focus on sustainability. A library of things. A place to give away or borrow items and materials. Flea market. To sell unwanted and used items and furnitures. Area for farming. To have the opportunity to farm. And arts and crafts. To collaborate with Arts Academy, for instance, creative workshops for children or to learn art forms.

priorWS1

The preparation before the workshop in the first room at Infopoint, including snacks (To the left) and the first activity (To the right)

priorWS2

The preparation before the workshop in the second room, showing the physical prototypes on the tables for the second activity as well as recycled decorations

secondactivity

The participants discuss waste handling and recycling in ReTuren by utilizing the prototypes

Second iteration of the opinion boards

After the analysis of the workshop, we created another iteration of the opinion boards which now included the eight most popular ideas. We wanted to be transparent and give the other locals in Spårvägen the opportunity to react to the outcome of the workshop. We conducted the same procedure as the previous opinion boards. Once again, they provided a lot of answers and interest. The result was overwhelmingly positive towards all the ideas.

secondopinionboard

On the second iteration of opinionboards, the locals of the area were overwhelmingly positive regarding the outcome of the workshop




What did I learn?

During the project and class, I learned a lot about participatory design and its practices. In co-design, the designer must believe in the notion that everyone can design no matter the design experience. I gained new knowledge such as creating creative and efficient cultural probes to gain quantitative data of the target audience. I learned how to structure and facilitate a highly active co-design workshop with a team and relevant stakeholders. I also learned the importance of building trust between the stakeholders while co-designing. Lastly, I got essential experienced to work with a helpful client such as VA SYD who participated in some interviews and the workshop. Please click on the link below to see the portfolio video of the project! Go back to the top here.

X

Digital Colorbook

Roles:
User Researcher, Interaction designer, UX-designer
Responsibility:
Writing the report, conducting research, ideating concepts, conducting user testings, coding HTML and JavaScript in the digital color book prototype, documenting findings
Methods/tools:
High-fi prototypes, usertestings, interviews, brainstorming, CSS, HTML, JavaScript, JavaScript library, computer vision, sketching
Length:
5 weeks

In the tangible and embodied interaction class, I conducted an exciting and creative group with 2 other students regarding color learning for young children, under the age of 12. I was highly involved throughout the entire iterative design process especially in user research, ideation, user testings, and the code-based high-fi prototype. The outcome was a digital color book that utilizes computer vision to capture real-life objects' color for the children to color the book. We named the color book for Objex and made a report based on the project.

The brief

My team and I wanted to explore how embodied interactions could innovate children's learning. Since learning is quite broad, we narrowed it down to color learning.

User research

We began our project with the user research including literature study such as relevant work and color learning, interviewed a preschool teacher and visited the Tekniska museum in Malmö to get inspiration by the art exhibition. We learned that:

Active learning and direct experience of objects, people, ideas and events is beneficial for cognitive restructuring.

Explore the world through direct manipulation.

Stimulating children’s interest through challenges and feedback.

Active learning improves aspiration, motivation, socialisation and self-esteem

tekniska1

Inspiration at the Tekniska museum, change the RGB values till the circle disappears

tekniska2

Inspiration at the Tekniska museum, a quiz about colors

Ideation: The digital color book

In our ideation session, we ideated concepts by sketching them on papers. The plan was to choose one concept we all liked and further improve upon it. Sketching helped us to explain and showcase our concepts much easier due to the benefit of visual representations. I desired to explore how the children could be active in their learning by exploring their environment. I used my creative skills while contemplating how children can take advantage of their environments which are filled with vivid colors. I ideated and sketched the concept of a digital color book that utilizes computer vision to capture real-life colors.

In my first sketch, the computer would focus on the separate parts of the drawing and encourage the children to fill one part at the time with realistic colors. Children would hold the objects in front of the laptop camera as the color of the object would be extracted, and fill the focused part with the object's color. Once the part was accurately colored, the computer would focus on the next part. For example, if children colored a leaf with an accurate color such as green, the computer would change focus to the tree. Everyone in the group liked the concept of extracting colors from the environment hence we decided to further ideate on the concept.

We decided to remove the restrictions of realistic colors and the linear focus of the computer. Without the restrictions, the children could begin anywhere in the drawing and be more creative hence creating more unique drawings. We also decided to add a box that would include an external camera inside the box. The box aimed to facilitate the extraction of colors for the children and make the camera focus on one color at the time. The box had one opening to the inside of the box where an object or objects with the same color would be placed by the children. The affordance of the opening would help the children understand where the objects should be placed.

ideationTEI

The first sketching iteration of my chosen concept.

Ideation: The modes

During the ideation, we also discussed the potential to add some variety and challenges to the color book, to make it more playful and entertaining. We decided to add two different modes: Free coloring mode and memory mode. In the coloring mode, the children could unleash their creativity and color the drawings however they want. In the memory mode, they would see a drawing where each part of the drawing contains randomize pre-set colors. They have 10 seconds to remember the colors till the drawing loses its colors. Afterward, the children must use their memory to color the drawing correctly. If the children are satisfied with their attempt, they will evaluate their attempt in comparison to the original drawing before proceeding.

nextIterationTEI

The next sketch iteration of the color book. It showcases the utility of the box and the idea of the memory mode.

Prototype development

I worked heavily on the programming aspect of the prototype especially on aspects of the colors and the logic of the prototype. The programming languages for the prototype were HTML, CSS, and JavaScript. We utilized a JavaScript library called tracking.js which had an algorithm to track colors every millisecond by measuring the color area with pixels. We did not want the prototype to extract every single color it recognizes thus we increased the color area of pixels so the algorithm prioritizes the largest color area as the main color. We added a total of 6 colors: Green, blue, magenta, yellow, red, and orange. Some of the colors for instance, yellow and orange have similiar RGB values which became a consistent problem. The camera had sometimes difficulty to recognize the similar colors apart hence the camera extracted the incorrect color from the object. This problem occured several times during the development.

We created two drawings in total for the prototype, both free coloring and memory mode utilized the same drawings. These drawings was made in Illustrator which were converted into SVG files. The SVG files were implemented into the code where each element of the drawings could be filled with colors.

homemenu

The GUI of the home screen showcases the coloring mode and memory mode

freecoloring

The GUI of the coloring mode showcases the free coloring mode and one of the drawings. The home button takes the user back to the home screen while the user proceeds to the next drawing by clicking on the arrow. The dynamic colored circle displays for the user which color is currently the main color.

memorymode

The memory mode and its stages

First user testing

In the first user testing, a 7-year-old girl tried our prototype. At this time, the box was not created yet hence we had to focus the external camera towards a white surface. At first, the girl had difficulty with the precision when coloring the smaller elements of the drawing. However, it did not become a problem as the child had patience and determination to fill these elements with colors. As previously mentioned, the camera's recognition of colors was inaccurate and occasionally displayed the wrong color. The girl insisted that certain elements should have their right colors in order to mimic real life. For instance, the grass should be green and the bubbles blue. She searched in her environment to find objects with the required colors and brought back her box with colorful pens, as her toys did not have those colors.

When the girl tried the memory mode she had a difficult time to remember the colors from the drawing. She tried to restart the memory mode but the drawing had a different set of colors as the colors are randomized.

firstUserTest

The first user test

Iterations

We iterated on the prototype due to their vital feedback, thus we added the sneak peek button in the memory mode as the girl had a difficult time remembering the colors. Hovering over the sneak peek button will reveal the correct missing colors of the drawings which facilitates the children's memory. We further adjusted the values for the colors to make the color recognition more reliable. Lastly, we added the physical box with additional lights. The lights improve the brightness in the box which is needed to enhance the color accuracy of the camera. We painted the box to make it more playful and colorful for the children. The notion of the box was also to deliver a sense of "magic" for the children.

BookVideo

A pilot test of the sneak peek button and memory mode that includes the box with its external camera and lights.

Second user testing

In the second user testing, two girls participated in the ages of 5 and 8. The thought of extracting colors from real-life objects to color digital drawings intrigued them. During the memory mode, they began to co-operate and discuss which colors belonged to each element of the drawing. They only utilized the sneak peak button when they couldn't finish the drawing by themselves.

In the free coloring mode, the girls filled the elements of the drawing with realistic colors just like the girl in the previous user testing. For instance, they collected a wooden doll as they wanted a beige colored wood pattern for a tree. The camera does not support the shade of color or extraction of patterns so they had to settle with the pre-set colors. Like in the previous user testing, the children were dedicated to color every single element of the drawing. They also co-operated during the color mode as they gave each other different responsiblities such as choosing color, collecting objects, and coloring the elements. Sometimes, they guided each other hands to get the cursor and element in the same position. However, the color recoginition problem was improved but still persistent to occur. For instance, a yellow item was displayed as orange by the camera which encouraged the children to bring a lot of yellow items. The children was excited to find yellow items and fill the box with these items until the camera extracted the yellow color.

userTest2

The second user test

Try it yourself

The color book prototype is accessible through the website, try it by clicking on the image below. The color book can be used on any desktop computer or laptop as long as it has a camera (external or inbuilt). As I mentioned earlier, please note that the camera tracks multiple colors at once and they are sensitive due to some colors have similar RGB values. Make sure that there is enough brightness in your environment.

If you have an external camera, I recommend utilizing a white surface as a background to facilitate the tracking. Otherwise, you need to hold the object close to your camera. Make sure that your camera is not occupied by any other software and make sure to give the website your permission to use the camera.

Download the final report of the project here.



What did I learn?

I gained a lot of experience in teamwork and knowledge regarding how to conduct iterative design processes. I learned to create digital high-fi prototypes by utilizing the programming languages and a JavaScript library. I further understood the importance of brainstorming in groups as their opinion and ideas are crucial to developing concepts. I learned to conduct user testings with the correct target audience. It taught me that a designed concept can be only validated by its users during a user testing with a team and user test them with the intended target audience. The users' feedback is needed to improve the subsequent iteration of the concept which leads to refinement. Go back to the top here.

X

SuperDeep BoreHole

Roles:
Interaction designer, Game designer
Responsibility:
Develop the story, conduct playtests, coding JavaScript in the game, uploading the game to Firebase, documenting findings
Methods/tools:
High-fi prototype, playtesting, brainstorming, CSS, HTML, JavaScript, Arduino
Length:
5 weeks

In the playful interactions class, I conducted a fun and interesting group project with 4 other students regarding game development. I was mostly involved in the JavaScript coding while developing the game, including the score system, scoreboard, database upload, and some overall tweaks. I suggested and conducted the idea to upload the game to Firebase which was crucial during our presentation as both our classmates and teachers could play. I was also involved in the playtesting as well as developing the story of the game. The outcome of the project was a web-based auditory and rhythmic game called SuperDeep BoreHole

The brief

The concept of this project was premade by one of the group members. I joined the project as I thought it was interesting to make a challenging story-oriented game inspired by true events. We began to explore the concept of the game by using a regular metronome online as a low-fidelity prototype. We tried to tap in a steady rhythm according to the metronome, and we realized that it requires some practice and skills to maintain the rhythm.

The game

The story of the game was based on the events of Kola SuperDeep Borehole, the deepest hole created by humans. In the game, you play as a Russian drill pilot where the goal is to drill as deep as possible. As it is very dark beneath the Earth's crust, the game is meant to be played in complete darkness.

During our brainstorming session, we decided that the game should have 8 levels with different audio tracks which will unfold the story as the player progresses. In order to progress in the game, the player needs to tap in 70 BPM (beats per minute) while hearing distracting noises and voices throughout the game. The game becomes progressively more difficult throughout the levels as the noises become louder thus forming the challenge of the game.

The player has 5 lives in total that serves as cylinders. If the player loses the beat and taps a few times above or below the current BPM, the player will lose one cylinder. The duration of the game is 10 minutes and it is game over when the player loses all five cylinders. Each correct tap rewards the player with points that accumulates to a total score. The closer the player taps the correct rhythm, the more points the player will get. This design choice makes the game to be more skill-based and replayable. If the player beats the game, the player will gain access to a top 10 scoreboard, with the opportunity to add a name to the scoreboard. The name and score are then stored in Firebase.

SDBHGUI

The GUI of the game is intended for the player's audience. It showcases the five cylinders (To the left), the players' BPM, highscore and progress (To the right)

The problem

As the game is meant to be played in complete darkness, the feedback of the game was a big concern. Feedback in games aids players to comprehend their progression as well as the outcome of their interactions. The players cannot rely on visual feedback in the game hence we needed to take advantage of auditory feedback as much as possible. It would also become a challenge to develop a story and levels to keep a player engaged in an auditory game. To solve this problem, we put a lot of effort into the sound design of the game and how sound and haptic vibration can provide responsive feedback. For instance with verbal feedback, after every 1000 meters the player reaches in the game, the in-game character will tell the player that 1000 meters have been reached. This feedback helps the player to comprehend his current score.

Physical additions

We found an old display that we transformed into a dashboard, that the player would interact with by tapping on the display. We taped an Arduino below the display to register the taps. As the player was a pilot, we invested in a motorcycle helmet for the player to wear to remove the sight and further add immersion to the game.

We implemented a vibration motor and red LED lights into the helmet to further address the feedback problem. The motor and lights were connected to another Arduino in the helmet. The motor adds haptic feedback into the game to stimulate the sense of breaking a cylinder. The red lights will trigger when a cylinder breaks as well but it also serves as another distraction for the player during a certain level in the game.

dashboard

The display we turned into a dashboard

helmet

The inside of the helmet showcases the red lights and the vibration motor behind the tape

Playtestings

Halfway through the development, we playtested our game with four different players who were recruited from our class. The test game version was approximately five minutes long, and they would win if they could complete the entire game. In the playtesting, we were interested to explore the sound design and the feedback of the game. To investigate how the testers experience the progression in terms of narrative and difficulty. Furthermore, we wanted to investigate the mastery aspect of the game, whether the players could improve their performances through training or utilizing different strategies. And if the game provided a sense of influence to the players.

The testing took place during one session where one player played the game at the time. We assisted the players by providing them instructions on the game and equipped them with the helmet. Afterward, they would play the game without any interruptions.

playtest1

A playtester playing the game by tapping on the dashboard

playtest2

We helped the playtesters to equip the helmet

Insights

All the participants were positive to the experience as it was exciting and unique. However, all the particiapnts mentioned that the tapping interaction becomes monotonous after a while. Some of them suggested to increase the rhythm after a while to make the game more challenging. They also perceived some of the sounds in the game unclear. They did not understand what the sound represented nor how they were conntected to the storyline.

The scoreboard seemed to motivate the players. They were all interested in knowing their score and how it compared to the others’, We also noticed that the very playtester utilized a different strategy in order to keep their rhythm throughout the game. For instance, one playtester made a clicking sound with her tongue in the same rhythm as instructed in the game. She argued that keeping the rhythm closer to their brain helped. Another playtester assisted himself by tapping with his foot in the same rhythm.

All the playtesters were also positive to the feedback of the game. The verbal feedback provided every 1000 meters together with the vibration and LED lights made the game more dynamic.

Iteration

We took the feedback from the playtesting and further improved the game in its next iteration. We further improved the story elements to the game where we decided to make the elements more story-oriented. For instance, we added voice lines for the character that would announce the upcoming challenges to the player. We added a level which increases the BPM from 70 to 120 as it adds some diverse challenges to the game. We added the last levels to the game which would reveal the ending. The scoreboard was added as the competitive aspect was motivating the players. Lastly, we added a metronome that triggers after each cylinder breaks. The metronome plays the current BPM to assists the player in adjusting their rhythm.

We used paint and spray cans to give the helmet and dashboard a new design that would fit the concept of the game.

helmetAndDashboard

The final version of the helmet and dashboard

Play the game

As the game is uploaded on Firebase, anyone can try the game. However, the experience won't be as we intended without the helmet or dashboard. Instead of the dashboard, press on the "space" key on your keyboard to tap. I recommend to using headphones and to play with your eyes closed as the game is an auditory experience. Click on the image below to start the game, good luck!

There is an introduction video for the game, please click here to watch.

What did I learn?

While designing this game in a team, I learned a lot about game design and game development by using the Mechanics-Dynamics-Aesthetics(MDA) framework tool. I learned to do playtests with a team and several playtesters. Playtestings and testings overall are crucial in order to get valueable feedback from users. A design cannot be improved nor validated without the input of others.

I futher got validation of how important a system's feedback is for users. Without any feedback, the users will not understand the system. For example, the sound of a cylinder breaking helps the players to understand that they lost a life. Delivering any kind of feedback does not only apply for games but for other applications as well.

I gained an understanding of how strategies can be utilized in games. For instance, how a game allows the player to use their creaitivty and skills to explore different strategies. The ability to make strategies to overcome a challenge makes the game more diverse and interesting. Go back to the top here.

ReTuren Colorbook Thesis SDBH ReTuren ColorBook