300DTD-Orchestra-organizer-project

Sprint 1 - A Working UI Prototype

Sprint Goals

Develop a prototype that simulates the key functionality of the system, then test and refine it so that it can serve as the model for the next phase of development in Sprint 2.

Figma is used to develop the prototype.

Initial Database Design

a three part connected data base with the users, music peices and who they’re assigned to

SCREENSHOT OF DB DESIGN

Required Data Input

end users will be required to provide thier instrument upon account creation. when teachers add a song they will be required to provide a song name and any specifics about the song they want aswell

this will be done through various forms

Required Data Output

for the teachers

a list of classes
a list of students in said class, displayed with their name and instrument
a list of songs assigned to the class

for the student

a list of classes they are in
a list of songs assigned to thier classes
any notes or specifications for the song

Required Data Processing

classes must be filtered to only display to who is in them
songs must be filtered to only show in classes they are assigned to

UI ‘Flow’

The first stage of prototyping was to explore how the UI might ‘flow’ between states, based on the required functionality.

This Figma demo shows the initial design for the UI ‘flow’:

FIGMA FLOW - PLACE THE FIGMA EMBED CODE HERE - MAKE SURE IT IS SET SO THAT EVERYONE CAN ACCESS IT

Testing

Replace this text with notes about what you did to test the UI flow and the outcome of the testing.

Changes / Improvements

Replace this text with notes any improvements you made as a result of the testing.

IMPROVED FIGMA FLOW - PLACE THE FIGMA EMBED CODE HERE - MAKE SURE IT IS SET SO THAT EVERYONE CAN ACCESS IT

Initial UI Prototype

The next stage of prototyping was to develop the layout for each screen of the UI.

This Figma demo shows the initial layout design for the UI:

Testing

i finished off the flow and presented it to my main end user and a couple others. the general responses were

i like the simple and basic design of the pages, not too much to think about
i like how the display for the students in the classes not only display names but also instrument
it would be good if we could add a way to view and add practise times

Changes / Improvements

added a way to keep track of practice times for students and teachers and a way to for teachers to add practice times, both repeating and one off,on top of being able to remove repeating

i also had to update the database to adjust for this

Refined UI Prototype

Having established the layout of the UI screens, the prototype was refined visually, in terms of colour, fonts, etc.

This Figma demo shows the UI with refinements applied:

FIGMA REFINED PROTOTYPE - PLACE THE FIGMA EMBED CODE HERE - MAKE SURE IT IS SET SO THAT EVERYONE CAN ACCESS IT

Testing

Replace this text with notes about what you did to test the UI flow and the outcome of the testing.

Changes / Improvements

Replace this text with notes any improvements you made as a result of the testing.

FIGMA IMPROVED REFINED PROTOTYPE - PLACE THE FIGMA EMBED CODE HERE - MAKE SURE IT IS SET SO THAT EVERYONE CAN ACCESS IT

Sprint Review

Replace this text with a statement about how the sprint has moved the project forward - key success point, any things that didn’t go so well, etc.