User Journeys / User Stories/ Flow

[Alexreid95]

User Journeys

Main user journey

1. As a creative professional I want to upload my work in progress and get useful feedback from a relevant community.

Supporting user journeys

2. Browsing / Searching / Learning

• As a user, I would like to explore the WIP community and leave contructive feedback on projects.

3. Adding / Creating / Sharing

• As a user, I need a way to add projects to my profile, organise them and read feedback the WIP community has left on them.

4. Accessibility / Inclusivity

• As a user, I want to feel included regardless of my accessibility requirements. I want to feel safe in this online space, and comfortable to interact with the website's community.

---

User Stories

A11y

• User Journeys / User Stories/ Flow #1 As a keyboard user I want to be able to navigate without a mouse.
• Home Page #2 As a colourblind user I want to be able to interpret the site without difficulty
• Log in form #3 As a visually impaired user I want to be able to navigate with a screen reader.

Safety

• Top Navbar #4 As a user I want to be clear about the copyright laws/infringement surrounding posting my personal work to this platform.
• Feedback Page #5 As a user I want to feel reassured that my personal details are safe.

Useability

Based on the 10 Useability Heuristics

• Sign up form #6 As a user I want a clear understanding of how to navigate the website.
• 404 page #7 As a user I want a way of removing certain feedback on my projects.
• Bottom Navbar #8 As a user I want confirmation that I have successfully added information.
• 500 page #9 As a user I want information to be communicated in clear simple language.
• Landing Page #10 As a user I want to be able to exit tasks quickly if I change my mind.
• Project page #11 As a user I want meaningful error message when something goes wrong.
• Notification page #12 As a user I want clear instructions on how to perform tasks.

Content (stories from user research)

• User page #13 As a creative professional I would like to sign up to use the app.
• User set up #14 As an interested designer I would like to view a feed of projects in progress from people I follow.
• Add project page #15 As a cautious user I would like to control how my uploaded work should get feedback.
• Create Database Structure #16 As a growth-focused user I would like a page for my project's works where people can leave specific feedback.
• Deploy React app on Netlify #17 As a curious user I would like to view specific works and their feedback.
• Create file and folder architecture #18 As a collaborative user I would like to view other profiles on the site for inspo and collab.
• Create Express routes for REST API #19 As a multi-platform user I would like to add external links to my profile.
• Test set up #20 As an aesthetic user I would like a pretty way to filter by content and skills through categories and tagging/colour categorisation.
• Project Card #21 As a user of WIP I want to be notified when I have received feedback on a project.

---

Main technical goals

• Front-end built in React - deployed on Netlify wk10
• Back-end database built in Express - API deployed to Heroku wk2 wk5 wk7
• Home and explore feed can be filtered by vocation wk5
• Forms that submit info to database: wk1 wk5 wk6
  • User info (hashing and jwt)
  • Project info and comments
• Pages that inform user of errors:
  • 404
  • 500
• Nav bars linked to different endpoints wk4 wk7 wk10
• Cookies and local storage wk6
• New projects are rendered chronologically
• OAuth
• Tests for the app
• Time stamping and area specific likes

---

Main Flow

Whole site #1, #2, #3, #6, #12, #9

• Top Navbar Sign up form #6
  • Add new project/work link
  • WIP Logo - link that navigates to home
  • Sign out link
• Bottom Navbar Sign up form #6
  • Home link
  • Users's own profile link
  • User's own notifications link
  • Explore link
• Landing User page #13
  • Sign up link
  • Log in link
  • Description of website Top Navbar #4, Notification page #12
• Log in form Landing Page #10 User page #13, Bottom Navbar #8
  • Input for username/email
  • Input for password Feedback Page #5
  • Submit button
  • Form validation with meaningful error messages Project page #11
  • OAuth Feedback Page #5
• Sign up form Landing Page #10 User page #13, Bottom Navbar #8
  • Input for username/email
  • Input for password Feedback Page #5
  • Input for repeat password
  • Submit button
  • Form validation with meaningful error messages Project page #11
  • OAuth Feedback Page #5
• Step up Bottom Navbar #8
  • You can input your name, vocation, experience in a form, structured like a user story (insp from Wix)
• Home page Sign up form #6, User set up #14, Test set up #20
  • Filter for vocation Bottom Navbar #8
  • User specific followed projects in chronological order
  • Clickable projects, users and following (watching)
• Project page Deploy React app on Netlify #17 Create Database Structure #16
  • Leave feedback for project (perhaps on same page) Bottom Navbar #8
  • Creator can remove feedback on own projects 404 page #7
  • Swipe through project with labels for versions
  • Click on users to navigate to their user profile
• User page Create file and folder architecture #18 Create Database Structure #16
  • User info from database
  • Your info is editable Feedback Page #5 Bottom Navbar #8 Create Express routes for REST API #19
  • You can add/update/delete projects on your page Add project page #15
  • You can mark your projects as 'finished'
• Add project page Bottom Navbar #8 Landing Page #10 Add project page #15 Test set up #20
  • Drag and drop or file modal to upload media
  • Add relevant tags that specify feedback categories (colour co-ordinated)
  • Form to submit the new project
  • Method for adding multiple steps to the project
• Feedback Page Bottom Navbar #8 Landing Page #10
  • You can submit feedback on a project
  • Bonus (Add tags to feedback, i.e. compliment, improvements)
• 404 page Project page #11
  • 404 message when Not Found error occurs
  • Back button
• 500 page Project page #11
  • 500 message when Internal Server error occurs
  • Back button
• Notification page Project Card #21
  • Stream of chronological notifications
  • Click on users to navigate to their user profile