Footwork
- Design and implementation of a dance video management website, focusing on layout and usability.
- Practise dance videos are being shared by dance schools on messaging systems, which is leading to videos being lost and difficulty in finding the correct one
- This negative experience can reduce the joy of learning and practising dance
- 3 months
- Group project with 2 fellow students from the Master university course 'Design of WWW Services'
As part of my Master's degree in the 3rd semester, ‘Design of WWW Services’ was a subject at Aalto University in which I teamed up with two fellow students. The aim was to design and implement a website where we chose the focus area of Layout and Usability.
The main idea is to help dance students easily access dance videos recorded by the studio for watching and practising.
The name for the website, Footwork, was sparked by the same term which is used in dance styles such as breakdancing.
As part of the UX Strategy and Discovery, we clarified the main functionalities of the service, defined user groups and use cases, and setup an information architecture for each type of user.
Main Functionality of the Service
We used the MoSCoW prioritisation technique to state the main functionality of the service with the focus on designing and developing a Minimum Viable Product of the webservice.
An admin of the service is any teacher or administrative role of a dance school or association, who has to manage the students having access to the service and the videos that are being uplodad, while a user is a dance student who only accesses the content.
User Groups and Use Cases
In order to understand and empathise with the target group, we created three personas to represent our two user groups. We then described the most important scenarios using one user journey to illustrate a use case.
Personas
The two user groups getting served with this website are the teachers of dance schools, who get the role of administrators (admin), and dancers, who get the role of end user. For both groups, we created basic personas that help designing with the target group in mind. For the administrator, we created Bob Breaking, as well as two end user personas in the form of Henri Handstand and Carla Contemporary.
Scenarios
For each of our three personas we developed one important scenario that showcases the need of Footwork and where it can take action to support the student. Bob Breaking's scenario showcases one of the three.
User Journey
Henri Handstand's scenario is especially highlighted in a user journey, which another group member created.
Click image to enlarge
Information Architectures
To clarify the structure of the site, we built Information Architectures for three use cases: (1) An admin, (2) an unconfirmed student, and (3) a confirmed breakdance beginner student.
An admin has access to the three main sections of 'Account', to manage their data, 'Manage students', to confirm, remove, and edit information about their students, and 'Courses', to manage dance videos.
When a student registers on the site, they first have to verfiy their email address before becoming an unconfirmed student. This is a student who still has to wait for a teacher from their dance school to accept them to the platform.
Once they do get confirmed, they have access to their courses and their videos.
Based on the Information Architectures, I sketched paper prototypes of each page in the flow. Before I implemented these in Figma as an interactive prototype, I setup a design system suitable.
Paper Prototyping
With Footwork, we want to put the focus on a sporty and modern website that has an easy to use layout and look and feel. To achieve this, I relied on Nielsen's 10 usability heuristics for User Interface Design. Specifically, the following heuristics were considered:
I iterated with multiple sketching rounds while aiming to find the most fitting layout and theme for the content. The final set of sketched paper prototypes can be seen below.
Design System
The main goal was to create a sporty and modern feel, while having a clean and easy to understand layout that supports the heuristic of aesthetic and minimalist design.
Fonts
As a header font, I decided on Bebas Neue, which is a sans-serif font written in uppercaps. It is also very tall and narrow with a high readability which ensures a good usability. At the same time, the font's attributes contribute to a modern and sporty look with strength.
As a copy font, I chose Roboto, as it is a rather neutral sans-serif font, which also provides high readability. It therefore builds a nice contrast to the characteristic header font.
Colours
For Footwork's color palette, I chose vibrant and saturated colors that match well with a dark theme. A dark theme fits well for this project as it increases contrast, has a futuristic appearance and creates a good focus on the content.
Components
I created the design system's component library in Figma, which expanded as I developed the prototype. This was immensely helpful later when translating the Figma components into React components with CSS.
Figma Prototype
I designed the UI with visual screens and interaction flows in Figma by combining the created sketches and chosen design system into one desktop and one mobile high-fidelity prototype.
Feel free to explore the desktop and mobile prototype yourself.
Notes:
- In the prototype settings in the top right, make sure "Responsive" instead of "Fixed size" is selected
- In the student's flow, click on the center whenever it states to verify or wait for confirmation
Chosen Technologies
As final step, we implemented the service. One student focused on the database (MySQL, AWS S3, AWS RDS), backend (Node.js), production (Render), and documentation (GitHub (README.md), mermaid, Google Docs), while another student supported with project management and building React components. I also worked on the frontend by adjusting React components and pages and implementing the CSS. We collaborated through version control using Git, GitHub and Git Fork.
React, CSS & AI
To support the frontend, I implemented the entire CSS for both desktop and mobile by using a media breakpoint at 600px to make the layout adaptive. I also utilised global CSS variables for consistency. To do so, I collaborated with ChatGPT and Copilot, as well as the developer mode of Figma. This has considerably improved my CSS skills.
Additionally, I helped building React components which led to 56 components and 7 pages. Since I did not have experience with React before, this was a strong learning curve as well. Here, my previous programming knowledge acted as a strong knowledge foundation.
See below for an example of a small snippet of CSS code being used in components.
Click image to enlarge
Next project:
Leopard