Context
This project was for the course Design Thinking and Advanced Prototyping @ Aalto University.
Problem
Dipoli Gallery is one of Aalto University’s main representational spaces. Each year, Dipoli hosts several exhibitions showcasing the best works from the Aalto community.
However, Dipoli was lacking a way to track the number of visitors who come to see their exhibitions. The Dipoli team needed these data to measure the level of interest in exhibitions and to report to the university.
Goal
Our goal was to build a system that could help the Dipoli staff track data on visitors. The system should be easy to install, setup, and use.
Field study
At the first step of the project, we visited the Dipoli building to examine the exhibition space and talked to one curator about her work.
Findings
- The exhibition space is not separated from the common space, where people go to work, lecture, or lunch. Therefore, it might be tricky to tell visitors from people that were just passing by.
- The curator needs to know the total number of visitor for each day and for a range of day.
- The curator uses the data to report to the university, give feedback to artists, and measure the level of interest in the exhibitions.
- The curator needs to export the data to other file formats.
Ideation
- A system with camera modules for visitor tracking and a web application. Camera modules send data to the web application where curators can view and export the data to .csv and .pdf files.
- System allows users to define a boundary of the exhibition space. Only people who walk inside the boundary are counted as visitors.
- System allows users to view data in different kinds of time frames: per day, per week, per month, all time, and per a custom range.
Design concept
Initial storyboard of the concept
User flows
Together with my teammates, I created two user flows to envision how users will interact with the system. One user flow is the set up process and the other is the detection boundary definition process.
Sketches
I drew some sketches of the web application screens.
First prototype
After the sketches were approved by teammates, I created an interactive lo-fi prototype of the web application on Figma for user testing.
Set up process
Detection boundary definition process
User testing #1
Procedure
I designed and ran a user testing session with the professor of the course. The session consisted of 3 tests:
- User was tasked with going through the set up process and confirm the system was working properly
- User was tasked with finding the visitor number for specific time ranges and exporting the data in pdf format
- User was tasked with deleting an old boundary and defining a new one
You can read the full procedure here:
📄 Visitor tracker: User testing procedure
Findings
- User was confused that the dashboard was visible before setting up
- User did not know how to get the device ID
- User was initially overwhelmed with the tools in the boundary definition screen
- User felt that the boundary definition process was difficult
Testing a highly interactive component such as the boundary definition tool was quite difficult on Figma due to its technical limitation. A tool like Protopie could be more suitable for this case.
Redesigning
- Turn the set up process into a separate flow before the dashboard is visible
- Show a list of near-by online camera modules for user to choose from instead of relying on user inputting the device ID
- Change the boundary detection method from line-based to polygon-based which is simpler and analogous to a pen tool in design programs.
I had to discuss with the computer vision team whether using a polygon as a boundary was technically possible for them.
- Implement a tutorial for the boundary tool
User Testing #2
I used the same procedure of the user testing session #1, but this time with a exhibition curator.
Findings
- User was able to understand and use the boundary definition tool
- User said that they might not want to set up the boundary immediately
- User needed to make presentations with the data
- User didn’t need the all time data but yearly data was needed
- User didn’t understand the meaning of the big number initially
- User didn´t need the live feed
Redesigning
- Add a option in the set-up process where users can skip boundary definition
- Add an option to export data as PowerPoint presentations
- Change “All time” data to “Year” data
- Add a label “visitors” to the big number
- Remove live feed
High fidelity functional prototype
I implemented a high fidelity functional prototype of the dashboard with Bootstrap, JQurery, dayjs, chartjs for front-end and ExpressJS, MongoDB for the back-end. The visitor detection part was done via a Raspberry Pi 4B with a camera module, implemented by other team members. I worked closely with teammates to develop the communication protocol between the hardware and web components of the system.
This prototype was used in the final presentation + demo and received good feedback from the curator and professor.
High fidelity visual prototype
I am currently creating a high fidelity visual prototype of the system using the Carbon Design System as a practice for using design systems and creating hand-offs for developers.
Set up - Step 1: Choosing tracker | Set up - Step 2: Choosing detection method | Set up - Step 3: Defining detection boundary |
|---|
Dashboard: Editing detection boundary | Dashboard: Settings |
|---|
Dashboard: Home page
Check out the interactive prototype here:
Next steps
- Develop a high fidelity functional prototype of the boundary detection tool and test it with real users. Redesign interactions according to findings.
- Recreating all screens using the Carbon Design System
- Implement and test the system
Key learnings
- Apply the Design Thinking process in designing a product
- Iteratively improve designs based on user testing
- Communicate with engineer teammates
