300dtd-SnowPlaner-website-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

Replace this text with notes regarding the DB design.

SCREENSHOT OF DB DESIGN

Required Data Input

Replace this text with a description of what data will be input, and where / how it will be obtained.

Required Data Output

Replace this text with a description of the outputs for the system - what types of data will be displayed?

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’:

Testing

The way i tested this first ui prototype was making other’s experience it like how it would work. I am going to use their feedback to make improvements to my design. Ill put the notes here as evident on what my user had said: User Feedback:

  1. Change “logged in” to not be a button
  2. Add “Sign out/Log out” button
  3. Add A register page where users can create an account before they log in ( via login page). This is better for managing multiple accounts one user may have
  4. Display Group join code at the top of the screen “Group Info” page.
  5. Add a filter to the URL box to nly allow maprunner URLs
  6. “Leave Group” Button should have a confirmation message that requires the group code to proceed( as safety measure )
  7. Change layout so that the important stuff stay fixed on the screen.

Changes / Improvements

Replace this text with notes any improvements you made as a result of the testing. I changed the design and how it would work. Here are the changes made:

  1. I changed the logged in button to be a sign out/Log out button
  2. I added a sign in page and added a create a account page
  3. I added round buttons that would be stuck and not move from the screen to make it more accesible.
  4. I changed it so that you need to use the group code to leave the group and i added the group code to where you will see the hole group
  5. I changed the url to only accept maprunner urls.

Here: is my updated prototype:

Further Testing

i tested my website further with my end user

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.