SP-Request-Website-T3
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
Simple but functional 2 table DB connecting the users’ info with the Request:
Required Data Input
Users will need to create an account with a username and password. When a user places a request, a URL to another website will be required as well as a description and deadline. All data will be obtained through the user typing it in the appropriate fields.
Required Data Output
Required Data Processing
Replace this text with a description of how the data will be processed to achieve the desired output(s) - any processes / formulae?
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
Testing
After creating a basic flow, I asked members of my target audience to test the flow and give feedback. Most were satisfied but suggested that I add pages for previous projects and mod selection when filling out the “request form”.
Changes / Improvements
I added the missing pages along with appropriate ways to navigate them (buttons, labels etc.). I also added a “Terms and Conditions” page.
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
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.
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.