200dtd-course-planner-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

database will have 3 tables, one for classes, one for topics with the class as a separate key, and one for assignments with the topic and class as separate keys

SCREENSHOT OF DB DESIGN

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

steveCopley.feedback()

Generalise to be steps rather than assignments

Due date not needed

Fields: title, notes, url1/2/3

Possibly to have a done field

Visually show done steps and possibly fully done topics (e.g. greyed out)

I changed all the assignments to steps, I removed the due date, and I added several url columns to the steps table, and added a done column to the topics and steps table

Changes / Improvements

Screenshot of DrawSQL plan post feedback

I then showed it back to Mr. Copley and he gave me some more feedback.

Anything you can do to minimize clicks would be good… For example, on the class overview page showing the current topic/step for each class would mean I could see at a glance what I was up to…

to do this I added a current column to topics and steps in drawsql, and added it onto each individual class from the classes overview in the Figma prototype.

Screenshot of DrawSQL plan now with "current" column

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.