UI

Minor Software

Minor Software

Project details

frontpage
Interface
Previous
Next

Project type:
ECTS:
Time:
Client:
Nature:
Keywords:

 

 

 

 

Minor
30
2016/2017
TU Delft
Individual & Group
AI, Bayesian network, C#, Evolutionary algorithms, Genetic algorithm, Java, Neural network, Object-oriented programming, Scrum & Unity

Project type:
ECTS:
Time:
Client:
Nature:
Keywords:

Minor
30
2016/2017
TU Delft
Individual & Group Project
AI, Bayesian network, C#, Evolutionary algorithms, Genetic algorithm, Java, Neural network, Object-oriented programming, Scrum & Unity

Summary

During my bachelors, I did my minor in software at the TU Delft. During this, I followed several courses in computer science and did a project within the minor where we had to apply our knowledge and create a game in Unity. During this time I learned how to program in Java and C# using the Object-Oriented programming paradigm. I also took a course on computational intelligence where I learned the basic of artificial intelligence, Bayesian networks, evolutionary algorithms and neural network. During the game project, I led our multidisciplinary team and learned how to work using Scrum.

Courses

During my minor, I took several computer science courses. During my course in object-oriented programming (OOP), I learned how to program in Java and how to program in an object-oriented way. During my course on computational intelligence, I learned the foundation of AI in general and we learned how to apply three types of AI, Bayesian networks, evolutionary algorithms and neural networks. The neural networks were created inside of MATLAB and compared to the build-in tool in MATLAB. The evolutionary algorithms were programmed using Java.

Game Project

During the second half of the minor, we had a project where we had to apply our knowledge by creating a video game in Unity. This was a group project consisting of 6 members from the minor, each from a different study of the TU delft. During this project, my main responsibility was to lead the group in successfully creating a game. To do so we utilised Scrum and I learned how to be the scrum master. Next to being the scrum master, I helped out with the game design, game UI and game Graphics. I also programmed an evolutionary algorithm into our game which made created a dynamic difficulty with the enemies adapting to the playstyle of the player.

Interface
Interface
Project planning
Project planning
Pathfinding
Pathfinding
Previous
Next

CTOUCH Leddura 2Meet

CTOUCH Leddura 2Meet

Redesigning the UI & UX of the CTOUCH Leddura 2Meet

Project details

Leddura 2Meet as it's currently being used
Leddura 2Meet as it's currently being used
IMG_20180424_165722
Test setup
Test setup
Test analysis
Test analysis
Final design- landing page
Final design- landing page
Previous
Next

Project type:
ECTS:
Time:
Client:
Nature:
Keywords:

 

 

Master Course
9
2018
CTOUCH
Group Project
Desk research, Interviews, Product design, Prototyping, UI, User journey, User observations, User testing & UX

Project type:
ECTS:
Time:
Client:
Nature:
Keywords:

Master Course
9
2018
CTOUCH
Group Project
Desk research, Interviews, Product design, Prototyping, UI, User journey, User observations, User testing & UX

Summary

For this course, Usability and User eXperience Assessment in Design,  we were asked to redesign the CTOUCH Leddura 2Meet. The CTOUCH is a big screen that is supported by an app. It is designed to be used in a business meeting, performing as a multifunctional big screen. The focus of the project was to improve “tagless teamwork” with the CTOUCH: the event of showing multiple other devices’ screens on the CTOUCH at the same time, and the focus issues that this brings along in a business meeting. To improve the tagless teamwork we first analysed the current product, then we did two rounds of creating a redesign and testing it. Finally, we implemented the results and created a final design of the interface and experience of the CTOUCH screen.

Process

The process of redesigning the CTOUCH consisted of four parts. First, we analysed the current screen and its usage. Then we did a round of redesigning and testing of the screen focussing on the identity and tone of the design. The second round of design and testing focussed on UI and interaction. Afterwards, all the results from the tests were processed and a final design was created.

Analysis

Leddura 2Meet as it's currently being used

The first step towards redesigning the CTOUCH was to analysis the current product and its context. The goals were to find areas where the product could be improved and what should be kept the same.

 

 

Current Usage

To analyse the product we created a storyboard of how the product is currently being used. Along with that, we created a visual of the flow within the software of the CTOUCH. To get an idea of how good the screen currently performs we did a cognitive walkthrough and peer testing.

cognitive walkthrough
product flow

Interviews & Observations

We also wanted to better understand the context in which the CTOUCH is, or could be, used. To do so we send out a questionnaire, did interviews and observations.  The questionnaire was about the dynamics of a group during a meeting. The interview was to help us better understands how the CTOUCH could be useful during a meeting and what kind of features is would need. We also observed meetings to understand the flow and dynamic within such meetings.

Persona's & Storyboard

Based on the results of the research, three persona‘s were created. Each persona represents a different usecase of the product. We also created two storyboards, one representing a meeting without the CTOUCH, and the second representing a meeting with the CTOUCH as it is. Below only the first storyboard is shown.

SB_noscreen_text1
SB_noscreen_text2
Previous
Next

Based on the performed analysis we came to the following problem statement and ambition.

Problem Statement

The problem is characterized by two core issues:
the user journey of connecting multiple devices and the identity of the CTOUCH Leddura 2Meet during meetings.

Ambition

Interaction with the screen should be fluent and organic, as if the team is interacting with another member

Concept redesign

avatar
facilitator
manager

Identity & Feel

First, we wanted to redesign the overall identity the screen currently has. To do so we created three characters that guided the design and its interaction. The characters are as follow, an avatar, a facilitator and a manager. They differ in that the avatar is helpful and customisable, the facilitator guides the user by providing him with the right information at the right time and the manager is sterner and in control of the meeting, only showing you what he thinks you need.

User Flow & Wireframes

For each of these characters, a flow and a set of wireframes was designed.

Web 1920 – 4@3x
Web 1920 – 6@3x
Previous
Next

User test

These concepts were put to the test to find, 1 what aspects of each concept work well during a meeting, 2 what is the relative quality of each concept and 3 how clear is the charter in each design to the users. In this test, we simulated a meeting with the CTOUCH using paper prototypes. During the test we observed the participants, afterwards, we interviewed them and they were asked to fill in a questionnaire.

IMG_1908
IMG_1913
IMG_1912

Test analysis

The results of the observation, interview and questionnaire were then analysed. Although not every result gave a significant advantage for a single concept, we were able to use it to converge. Based on the results we converged to a single concept and combined features from different concepts into one.

resulst test 1 2
resulst test 1 3
resulst test 1 4

UX & UI Redesign

Storyboard

The first step towards a UX & UI was to ensure we got a clear goal to work towards. We focused on optimizing two functionalities of the CTOUCH, connecting your laptop to the screen, and sharing your and other peoples screens. To help us envision how this would look at work we sketched a storyboard of a scenario in which our version of the screen is used.

Functional design & UX

From there we first focused on the functional design UX of both the connecting to the screen and the share of screens. For each, we designed wireframes and the flow of the experience. The aim was to optimize and streamline the experience of using the CTOUCH. We also considered how the interaction should feel.

Wireframes screen sharing
Wireframes screen sharing
Wireframes connecting
Wireframes connecting
Previous
Next

Visual Design

Having created the wireframes we set out to create a visual style complete our UI. To do so we looked at what kind of applications our target audience uses and used that as reference for creating our own visual style. The applications that we looked to for inspiration were, Zenefits, Slack, Mailchimp and Gusto.

Prototype & Test Setup

Having created a functional and visual design, we set out to create a prototype that could be used in a user test to validate our design. To create this prototype we used Framer and InVision to create a setup where the user was let to believe the program was actually working. With that, we were able to create a test setup.

Test setup
Test setup
Prototyping approach
Prototyping approach
Previous
Next

Analysis

To analyse the user test we transcripted what people set during the user test. Having created a transcript we selected quotes and used an on the wall approach to make sense and find themes in all the data. Using the results we were able to see how much of the ambition we set, in the beginning, we were able to fulfil and make some final adjustments to the design.

Test analysis
Test analysis
on the wall 2
Previous
Next

Final Design

Based on the test results, we created a final iteration of the product, where we optimized the UI, UX and interaction with the product. To show the final design we created a video demonstrating our design & use case of the CTOUCH. Below are also images showing the final design.

Final design- landing page
Final design- landing page
PC Application
PC Application
Sharing screen
Sharing screen
Multiple screens
Multiple screens
Previous
Next

Interactive Floor

Designing for a potential future with an interactive floor

Project details

Project type:
ECTS:
Time:
Client:
Nature:
Keywords:

 

 

 

 

Master Elective
3
2019
TU Delft
Group Project
Interaction design, Interviews, Product design, Programming, Prototyping, User interface, User observations & User experience

Project type:
ECTS:
Time:
Client:
Nature:
Keywords:

Master Elective
3
2019
TU Delft
Group Project
Interaction design, Interviews, Product design, Programming, Prototyping, User interface, User observations & User experience

Summary

In this project, we were given a future scenario in which a floor could be used as an interactive display. For this scenario, we were challenged to envision an implementation of this technology in the faculty of industrial design. This meant finding useful and novel use case of this technology, designing the interface and design the interaction. This resulted in a floor that facilitates interaction and the exchange of information between collaborating students. 

Process

To design an interactive floor we first determined the functionality is should have and created a storyboard of how we hypothetically would see the interaction. From there we started ideating and created two concepts. By doing user tests and detailing the functionality, style guide and the animations we converged into a final concept. This concept was then detailed by creating a video showing different interactions with the floor.

Functionality

The main function of the floor is to exchange information and facilitate interaction between collaborating students. The floor will give all the information that is regularly used. It will also support group work for students who work together in the surroundings of the surfaces.  Based on these functionalities a storyboard was created to envision the interaction with the product.

The scenario goes as follows: our participant enters the faculty. On the floor appears a nice, warm message. Right after, a schedule appears, indicating that he has a few minutes left as not all his group members have arrived yet. He takes this opportunity to get some coffee. He then proceeds to his group member. The floor shows him exactly where to go, saving him time. Most part of the day is spent on working on a group project. After a few hours, the floor indicated that he has been working for a while and it encourages him to take a break. After the break, he and his group member decide to show each other what they have done using the floor. Then it’s finally time to go home. With all this extra help, he and his group member have had a productive day. 

Conceptualisation

Based on the storyboard and functionality we created individual ideas and sketched. These were merged into two concepts, concept fluid and concept compass.

Concept Fluid

Concept fluid is mainly inspired by natural elements such as water, as such the animations and movements aim to be fluid.

styleguid fluid
interaction fluid

Concept Compass

Concept compass aims to be more structured and uses geometrical shapes and parts of geometrical shapes.

styleguid compass
interaction compass

User tests

User tests were executed to see how people would respond to ideas from the concepts. They were also used to validate and iterate on the size of different elements of the interface.

Based on the users test the functionality of the product was further defined and developed. The types of animations and interactions were also explored

Final concept

Based on the findings from the user tests and the exploration, a final concept was designed. In this concept, every user has a personal avatar. This avatar is their companion and can assist them with whatever they need.

Testing the interaction

After the design was done, the interaction with it was tested and validated. This was done by projecting the animations on the floor using a beamer. Together with the participants we walked through the interactions and asked them for feedback. Using their feedback we were able to iterate upon the design and fine-tune the interactions. From there the design was finalised and put into a video, presenting the whole concept and the interaction with the concept.

Final design video

Specific interactions