200DTD-DnD-listings
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
This database contains a list of campaigns with information about them which is connected to a list of players with contact information about them which is connected by a list of involved players
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’:
Testing
I took this to my end-user and got some feedback:
so far this will work well however a confirmation page for deleting campaigns would be good
Changes / Improvements
I added a extra frame when the user clicks delete on a campaign they will be asked if they wish to proceed before it gets deleted
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:
FIGMA 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 PROTOTYPE - PLACE THE FIGMA EMBED CODE HERE - MAKE SURE IT IS SET SO THAT EVERYONE CAN ACCESS IT
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.