Giter Site home page Giter Site logo

universal-credit-support's People

Contributors

ashatat avatar cemalokten avatar cyberteenie avatar dupreesi avatar fadeomar avatar ibrahim-jarada avatar israa91 avatar ramyalshurafa avatar remaininlight avatar thejoefriel avatar yosefanajjar avatar

Stargazers

avatar avatar

Watchers

avatar avatar

universal-credit-support's Issues

Create Margin Component

Everything always needs margin :D

So it's always useful to have a common margin component that all the common components then use in the styling

Acceptance Criteria:

  • Set up common margin component (using the one we've built before)

Create backend

Summary
Now need to add a back end to the MVP we've built so far

Acceptance Criteria

  • Set up all the empty files so the structure is clear
  • Create list of end points
  • For each end point add top level use cases
  • Install initial agreed packages
  • Set up Node and Express

Set up project codebase

Please set up the codebase to create an initial front-end MVP using Create React App

To confirm, there is no back end for this app, but there will be in the future, so still set up the structure in a similar way to other projects (just no need to create a server file etc at the moment)

Acceptance Criteria:

  • Set up initial codebase
  • Install initial agreed packages
  • Sort out git ignore file
  • Set up eslint configuration

User Stories

Summary

This issue is to build out all the steps for each user journey (i.e. what are all the steps in which the user will interact with our digital platform to reach the final outcome)

Something we find very helpful to do is also always bear in mind how the user is feeling. Are they strapped for time (e.g. maybe they have 10 minutes in between making dinner for the family), are they feeling anxious, are they making an important decision etc? This helps us constantly review our steps and see what information we need to provide to best get them to their goal.

Example Template:

Bildschirmfoto 2020-11-23 um 18 31 34

Presentation for more information:

https://docs.google.com/presentation/d/1JWVDThFGPnLyM5Dmw5hpN_6v87gHaj8_djWh1maTrBg/edit?usp=sharing

Links

https://whimsical.com/user-stories-EV7NPsNAgysYnGSXvQxcsZ

Create interactive card

Related issue(s)

Add any issues here that may be dependent or must be completed before this issue can be tackled

Wireframe link

https://www.figma.com/file/F87oFi7DgtgoJ0KNJYyy2L/Wireframes-Prototype?node-id=1509%3A619

Acceptance Criteria:

REMEMBER THAT WHOEVER WORKS ON THIS ISSUE MUST TICK OFF ALL THE POINTS IN THIS LIST UNLESS THERE IS CLEAR AGREEMENT IN THE COMMENTS TO SAY OTHERWISE. DO NOT REVIEW A PR INVOLVING THIS ISSUE UNLESS THIS HAS BEEN DONE

  • Set up Card button
  • Ensure colour follows these formats:
    • Next stage to work on -> Orange
    • Completed -> Green
    • Others -> Blue
  • Include text as a prop
  • Show in storybook
  • Use common margin component so we have a consistent way of adding margin across all components:

Approve Design and User Stories for MVP

Hi @Katie-Hyde @maggiehoughton , just sorting out final bits so we can start building the initial quick MVP next week 😄

Which design do you prefer?

Apart from sorting the content (#9) the only other thing we need for this initial MVP we will look to start building next week is to agree which visual design you prefer. To show you what I mean, and the two options, I've recorded a quick video for you (please turn on audio): https://www.loom.com/share/62ec9ed3b944429993a848f14afcb6f1

  • Please let me know your preference by leaving a comment in this issue

User Stories

I have also mapped out the journeys that lay out what we will be building: https://www.figma.com/file/2iSQivVTUotX0WfYfpLj9Y/User-Stories-for-MVP?node-id=0%3A1

They are informed by the prototype (whereas normally you do it the other way round! i.e. map out the journeys before creating wireframes/designs), but I thought it would be useful to use the existing MVP to build these out and we can develop them further in our design work over the coming weeks.

Updates + User Testing - Round 2

Link to synthesised user feedback
https://www.notion.so/yallacooperative/UX-Testing-Feedback-f3a9be4b9b8941da8a84c57069c4efcc

Key Things to check with user testing
Overall for UX and layout there aren't many things to test (I've labelled them as 'need to test' in the Synthesised Changes table. These are purely for claimants really so I'd suggest we only do testing with claimants next week

The main changes are actually the content. Overall the content style was positively received, so we are in a good space with the style.
However, there was lots of feedback from advisors as to:

  • extra tips to add
  • extra items in check list to add

My suggested approach to implement these changes

  • 6/08 - Yalla & Hyde to do a review of all the elements that say copy review and make the changes together in our word document. We would do this in our wireframe review meeting
  • Hyde to circulate with the internal team and get everyone to add comments by 10/08
  • 10/08 - We then do a final content review session to determine which bits to implement

Proposed approach

  • Get content finished following the approach outlined above by 10/08
  • 11/08-12/08 - Carry out testing with 3-5 claimants to get feedback on the UX and content changes
  • 13/08 - Final review as planned ahead of development

Content Discussion

@maggiehoughton @Katie-Hyde @jema28

Spent the past day or so sifting through all the various content links, and actually going through the UC process - up to the point of submitting my claim I think so hopefully won't get in trouble 😅

What I've done is put together a very initial draft that is an iteration on the steps in the wireframes and from the existing journey mapping you had done

https://www.notion.so/yallacooperative/Working-out-Content-19c3a5d68bfb4e6f9c9ae5bcfad0af71

Actions

  • Please let me know what you think - add any comments or notes you like either on the document or in here
  • Should we arrange a meeting to talk through properly? Is there time tomorrow that might work?

Create Button

Related issue(s)

Add any issues here that may be dependent or must be completed before this issue can be tackled

Wireframe link

https://www.figma.com/file/F87oFi7DgtgoJ0KNJYyy2L/Wireframes-Prototype?node-id=1507%3A6898

Acceptance Criteria:

REMEMBER THAT WHOEVER WORKS ON THIS ISSUE MUST TICK OFF ALL THE POINTS IN THIS LIST UNLESS THERE IS CLEAR AGREEMENT IN THE COMMENTS TO SAY OTHERWISE. DO NOT REVIEW A PR INVOLVING THIS ISSUE UNLESS THIS HAS BEEN DONE

  • Make sure all types are created - primary, secondary, tertiary, remove, back...
  • Make sure all states are covered - loading & disabled
  • Show in storybook
  • Use common margin component so we have a consistent way of adding margin across all components: #20

Technical Stack + Database Architecture

Hi @maggiehoughton @Katie-Hyde - here is the document outlining the proposed technical stack for the application and the database architecture, that we just ran through together with Katie.

If any problems arise then please let me know, otherwise we'll consider this a reference issue for people to use in future if wanting to do further development.

https://yallacooperative.notion.site/Tech-Stack-External-Services-Deployment-Recommendation-5ec178e909bf48659a38c46c7e6cbf2a

Set up Heroku and deploy app

Acceptance Criteria

  • Create an account for Heroku (details on which email to be covered in #50 )
  • Ensure we are tracking properly
  • Deploy the product
  • Add the link to the Readme of this repo
  • Provide any useful documentation on how to use Heroku and add to the #1 issue as a comment

Build boards of UX and Visual inspiration (Landscaping)

PLEASE NOTE, LINKS TO BOARDS TO THEN BE PASTED HERE:
TBC

Summary

In this issue we are trying to get a better sense of the type of user experience we want to try and build for our users (i.e. the best way for them to interact with our digital tool in order to achieve their needs), how it might look and the overall content style.

What other people are doing in this space:

  • What already exists and why it's not fitting the problems we're looking to solve - what are our users needing
  • The language other platforms use - what works and what doesn't

UX / User Experience:

  • User experiences our user personas know and like
  • inspiration from platforms that we can use for how users might interact with our own digital platform
  • what apps / websites do your clients tend to use?
  • what apps / websites do your therapists use?

Content:

  • What is the tone of the platforms and tools our personas use?
  • What is the tone of other similar platforms looking to support people?

Visual:

  • What visual language do you think suits the user personas in terms of typography, colour and graphics/illustrations. What would be attractive to them?
  • What is the visual identity or the app? Are there Chiltern Music Therapy brand guidelines for us to work under?

Accessibility
This has an important part in our design. We need to agree what level of accessibility, following agreed standards. Our assumption would be AA as a minimum but aiming for AAA.
Details here: https://www.w3.org/WAI/WCAG2AAA-Conformance

Please watch below videos and check Acceptance Criteria for further instructions of how to do this exercise

Please try and comment on this issue with your feedback by X

  • Using the template below, add comments on this issue for each digital tool you feel worth discussing

Template:

  • App/website name:

  • App/website link:

  • What is it relevant for: Other Person in Space / UX / Visual / Content

  • If possible, the specific part(s) and/or flow(s) you like (with link or a few screenshots if possible!) and a description of why you and our users would like it. Why do you feel it's useful to look at with our project in mind?

  • List links / documents for any brand guidelines we need to follow

  • Please let us know in a comment your views on the level of accessibility

Video explanations

https://www.loom.com/share/bce88cc1ee3f4aa9833fd8bdd439e94d
https://www.loom.com/share/4a8ee418f94e48b6a6435bd79420a3ac

Update button

Wireframe link

https://www.figma.com/file/2b1vIUlRczjuwhWr9cE9OY/Wireframes?node-id=2482%3A37911

Acceptance Criteria:

REMEMBER THAT WHOEVER WORKS ON THIS ISSUE MUST TICK OFF ALL THE POINTS IN THIS LIST UNLESS THERE IS CLEAR AGREEMENT IN THE COMMENTS TO SAY OTHERWISE. DO NOT REVIEW A PR INVOLVING THIS ISSUE UNLESS THIS HAS BEEN DONE

  • Add new button variations to existing button component

Note: Ignore the Help button for now, that will be picked up in a separate issue

Set Up Database

Refer to database schema agreed in #48

Notes
I don't think anything has changed data wise in the wireframes since the db schema was created, but I've added as a criteria just to be sure

Acceptance Criteria:

  • Double check wireframes to ensure no changes
  • Set up connection
  • Build tables
  • Add dummy data, (this doesn't include the content which will be covered in a separate issue)
    • 1 x admin
    • 1 x super admin

Send over provisional content for the MVP

Summary
We need to see all the provisional content required to help guide our users in the UC process. This will then help us:

  • Think further about how to shape as part of our design sprint
  • Get initial content in the first digital iteration we are looking to build next week for some early user testing

Actions

  • Hyde to send over provisional content

Admin

Important App Info

This is a protected document. If you feel you should have access please contact @thejoefriel

https://docs.google.com/spreadsheets/d/1gHzpjitlXnoywgDoL8hd_pgn4Mo64RwuwRWFFkKYX2E/edit?usp=sharing

Details on using third party apps

If any third party apps are used (e.g. Google Analytics), then documentation should be created and stored here on how to access them and what they are for

Quick Jargon Review

  • Issue
    These are effectively the 'tasks' that are added to Github so we can manage the project
  • Pull Request
    These are when a developer has created new code to tackle one or more issues and is requesting for it to be reviewed and merged into the overall codebase
  • Merging
    When a pull request is approved, the reviewer will merge this new code into the overall codebase
  • Commits
    For every small bit of work a developer does, they will effectively save it before moving on. This means that if any mistakes are made, they can 'roll back' to an earlier stage of their work
  • Branch
    So everyone can work on the product at the same time, people will create their own 'branches'. This is where they have all the code but any new changes they make are only seen by them on this new branch they have created. Then once they are ready for their work to be added to the overall codebase, they will carry out a Pull Request for this branch with their work to be merged into the overall codebase
  • "App is redeploying"
    When the Develop / Master branches are updated it will sometimes take 5-10 minutes for the product to fully update and show the features.

Create Icons + Add Logo

Note
Use the stand icon component set up we normally use

Wireframe link

https://www.figma.com/file/F87oFi7DgtgoJ0KNJYyy2L/Wireframes-Prototype?node-id=1509%3A197

Acceptance Criteria:

REMEMBER THAT WHOEVER WORKS ON THIS ISSUE MUST TICK OFF ALL THE POINTS IN THIS LIST UNLESS THERE IS CLEAR AGREEMENT IN THE COMMENTS TO SAY OTHERWISE. DO NOT REVIEW A PR INVOLVING THIS ISSUE UNLESS THIS HAS BEEN DONE

  • Create Icon component, making sure width, height and color all covered
  • Create icon with text component (using the Icon component you've just created above)
    • Decide whether it's a link / button
  • Add to storybook
  • Make sure to use the common margin component #20

Set up Content & Language System

Summary
Even though we are just creating a static front end app right now, there are two future features we need to consider:

  • Ability to change the language
  • Ability to edit the steps and the content within the steps (so basically CMS functionality)

This means we should put:

  • Put all the content into a constants file system
  • Put into a language system

Further information
Refer to the language setup we built on Tempo as that works well and will suit our needs on this

Acceptance Criteria:

REMEMBER THAT WHOEVER WORKS ON THIS ISSUE MUST TICK OFF ALL THE POINTS IN THIS LIST UNLESS THERE IS CLEAR AGREEMENT IN THE COMMENTS TO SAY OTHERWISE. DO NOT REVIEW A PR INVOLVING THIS ISSUE UNLESS THIS HAS BEEN DONE

  • Create constants file for content
  • Ensure the content is split into languages (just have english for now as the default)
  • Each step (to consider in the content) includes
    • title (e.g. Check eligibility)
    • subtitle (e.g. You can check your...)
    • External button title (e.g. eligibility calculator)
    • External link
    • Check list of items (each with a title)
  • Create language helper (always defaults to english)

User Testing - UX

Summary

We want to use an interactive design prototype to carry out testing with our potential users. This lets us test and validate the user journeys and stories we have built, making sure the tool can be used in the way we intend it to be used, and then making any changes.

By doing this we can really define on the most essential features and make changes at the design stage which is always quicker to do than in development stage.

In addition...
We are also going to test the first iteration of the digital app. This will let us assess initial thoughts of the tool in an actual digital, fully interactive format

Tasks:

Booking in user tests
This has been tackled - refer to #8

Preparing for user tests

  • Add link to the Figma prototype
  • Add link to the MVP
  • Add link to User Testing script(s)
  • Add link to User Testing Feedback Form

Storing testing results

  • Store the first round UX / low res user testing sessions in the link below

Overview of testing schedules, scripts and feedback pages:

https://www.notion.so/yallacooperative/User-Testing-ecd56e7c43f04f7787c38a3380791533

Prototype links

In the notion doc scripts

Accessibility report

Hi @maggiehoughton @Katie-Hyde @thejoefriel,

We've gone through all the colours this afternoon and written up a report for you: https://www.notion.so/yallacooperative/Accessibility-Report-58699b01213340df88c4636721e7edee.

It includes:

  1. An explainer of accessibility levels and scores
  2. The brand colours
  3. Brand colour contrasts. As you'll see in the document there are quite colours that fail. We have a few options:
    a. We tweak the colours so more reach AA(+). I have added examples of this at the bottom of the document.
    b. We avoid the failing combinations

As you'll see it's unfortunately really hard to make red and orange accessible! You have to really darken them to pass even AA+ and they lose their vibrancy.

I've added some comparatives that pass AA+ and also the slightly tweaked MVP colours for comparison. It's much easier to make cooler colours like blues and greens vibrant for UI.

If we want to keep the original vibrant red and orange we can do so but avoid adding white text on it and use it instead for accents (e.g. borders, lines etc)

Look forward to your thoughts on this!

Show Progress

Related issue(s)
#27 #28 #26 need to be completed first

Wireframe link
https://www.figma.com/file/F87oFi7DgtgoJ0KNJYyy2L/Wireframes-Prototype?node-id=1517%3A4826
https://www.figma.com/file/F87oFi7DgtgoJ0KNJYyy2L/Wireframes-Prototype?node-id=1517%3A5869

Acceptance Criteria:

REMEMBER THAT WHOEVER WORKS ON THIS ISSUE MUST TICK OFF ALL THE POINTS IN THIS LIST UNLESS THERE IS CLEAR AGREEMENT IN THE COMMENTS TO SAY OTHERWISE. DO NOT REVIEW A PR INVOLVING THIS ISSUE UNLESS THIS HAS BEEN DONE

  • Show the Next Step green button once all checklist items are ticked
  • When the user clicks Next Step, then take them to the landing page and do the following:
    • scroll down the page so the next step is center of the screen and the step just completed is top
    • animation turning the step completed from orange to green
    • animation turning the next step to complete from blue to orange
  • If user leaves app then comes back to landing page, always check for token and load the correct state on the landing page (you don't need to do the animations above or scroll down though in this situation)
  • If user leaves app then comes back to a step page, always check for token and load the correct state (i.e. items checked that were previously checked)

Update theme file

Acceptance Criteria:

REMEMBER THAT WHOEVER WORKS ON THIS ISSUE MUST TICK OFF ALL THE POINTS IN THIS LIST UNLESS THERE IS CLEAR AGREEMENT IN THE COMMENTS TO SAY OTHERWISE. DO NOT REVIEW A PR INVOLVING THIS ISSUE UNLESS THIS HAS BEEN DONE

  • Update colours
  • Check Typography and update if different
  • Add gradients
  • Check Spacing and update if different

Create inputs

Wireframe link

https://www.figma.com/file/F87oFi7DgtgoJ0KNJYyy2L/Wireframes-Prototype?node-id=1503%3A4

Notes

  • Most likely use Antd but this isn't essential

Acceptance Criteria:

REMEMBER THAT WHOEVER WORKS ON THIS ISSUE MUST TICK OFF ALL THE POINTS IN THIS LIST UNLESS THERE IS CLEAR AGREEMENT IN THE COMMENTS TO SAY OTHERWISE. DO NOT REVIEW A PR INVOLVING THIS ISSUE UNLESS THIS HAS BEEN DONE

  • Dropdown Input - suggested, use Select component.
    • single choice
  • Checkbox (including option with text)

Provide email address

Hi @Katie-Hyde @maggiehoughton - we need to set up a few accounts for you:

  • Google Analytics
  • Sqreen
  • Sentry
  • Sendgrid
  • Heroku

Is there an email address you would like us to use? We could also create a google account for you and then use that if you prefer.
What would be great is if you could get your IT team to set up an email like [email protected] which we can then store the log in details for.

Let me know what you would prefer.

Set up Sqreen

Acceptance Criteria

  • Create an account for Sqreen (details on which email to be covered in #50)
  • Ensure we are tracking properly
  • Provide any useful documentation on how to use sqreen and add to the #1 issue as a comment

Set up Google Analytics

Acceptance Criteria

  • Create an account for Google Analytics (details on which email to be covered in #50 )
  • Ensure we are tracking properly
  • Provide any useful documentation on how to use analytics and add to the #1 issue as a comment
  • Record a Loom video

Set up Sentry

Acceptance Criteria

  • Create an account for Sentry (details on which email to be covered in #50 )
  • Ensure we are tracking properly
  • Provide any useful documentation on how to use Sentry and add to the #1 issue as a comment

Create Step Page

Summary
This is the page that shows a breakdown of information for that step

Important information
Even though it looks like a modal, for accessibility and UX reasons I would recommend it is its own page with its own naviation route. This means that if the user reloads or wants to share just that step, it's a lot easier (i.e. no resetting of the state etc)

Wireframes
https://www.figma.com/file/F87oFi7DgtgoJ0KNJYyy2L/Wireframes-Prototype?node-id=1517%3A4908

Acceptance Criteria:

REMEMBER THAT WHOEVER WORKS ON THIS ISSUE MUST TICK OFF ALL THE POINTS IN THIS LIST UNLESS THERE IS CLEAR AGREEMENT IN THE COMMENTS TO SAY OTHERWISE. DO NOT REVIEW A PR INVOLVING THIS ISSUE UNLESS THIS HAS BEEN DONE

  • Create page in line with wireframes
  • Clicking the cross goes back to the landing page
  • Ensure we are using the content from the constants, so this should dynamically look for the information for this particular step
  • Same for language - it should look for the available languages in our file system (in this case it'll just be english) and render those as options in the dropdown
  • This won't include tracking the user's progress, that will be picked up in another issue

Set up grid component

Setup common component for grid layout covering desktop / tablet / mobile for consistent width and spacing throughout the app

Acceptance Criteria:

  • Add common component
  • Add to storybook

Bug Testing -> MVP

This the important phase where you go through the app to make sure it works as agreed and to help us spot remaining bugs (always inevitable unfortunately, especially with brand new products!)

It is essentially playing with the product pretending you are the different types of users and carrying out all the user journeys / testing the features in the feature plan.

App

https://universal-credit-claim.netlify.app

Logins

No log ins needed

Process

Outline of what you do here: https://www.notion.so/yallacooperative/Bug-Testing-812a97b1c6574b80943e83a1fda421c5

Spreadsheet

Here is where to add all bugs:
https://www.notion.so/yallacooperative/ea8dc60f6dc64786ad5cb0fead62acf0?v=9a68cfbd3cde45ff8552a1de3ac1aaac

Timings

21/07 - 23/07

Acceptance criteria

  • Test the app following the agreed user journeys and features completed for this sprint
  • Add any bugs you come across to this spreadsheet

Add all Content

Related issues
#56 needs to be completed first

Content doc to use
https://docs.google.com/document/u/1/d/1Fq7vB5LZW8lachRyZZcPg9_ZDaYsmHxEaOv_somyf6s/edit?usp=drive_web&ouid=114879239832987647932

Acceptance Criteria:

REMEMBER THAT WHOEVER WORKS ON THIS ISSUE MUST TICK OFF ALL THE POINTS IN THIS LIST UNLESS THERE IS CLEAR AGREEMENT IN THE COMMENTS TO SAY OTHERWISE. DO NOT REVIEW A PR INVOLVING THIS ISSUE UNLESS THIS HAS BEEN DONE

  • Set up content data folder
  • Add all content as part of npm run build:db (or whatever command gets created in package.json)

Note: This isn't pulling it into the front end yet, just ensuring all required content is in the database

Recruit People for User Testing

Summary
This issue is to track our discussion and progress recruiting people for user testing.

Who we want to test with?

  • Claimants
  • Advisors
  • Administrators

Dates for user testing

  • w/c 26th July
  • w/c 9th August (optional based on first round of feedback)
  • w/c 30th August

Actions
Here's the current plan we're agreed

  • Yalla to send across potential questions to include in survey
  • Hyde to send out survey and feedback with those potentially interested
  • Yalla to then reach out and arrange the interviews

Useful links

Set up theme

This is to put in place the basic design system set up for this app.

Acceptance criteria

  • Set up theme and global-style including agreed font etc
  • Tidy up any legacy css files we're no longer using (e.g. App.css)
  • Add constants (either one file or a collection of folders to cover the various constants)
    • Spacings
    • Colors
    • Media breakpoints
    • screen widths

Build UX Wireframes + Prototypes

Link to wireframes

Prototypes

Wireframes
https://www.figma.com/file/2b1vIUlRczjuwhWr9cE9OY/Wireframes?node-id=1867%3A12967

Please remember to click the different pages on the left to see each of the wireframes for each user type

Acceptance

  • Build wireframes
  • Turn wireframes into prototype
  • Make agreed changes following user testing
  • Create design system to be used for development

### Demos
Jem has also put together a couple of videos to take you through as well

Add new icons to Icon component

Use the existing Icon component, this is just adding further icons.

Wireframe link

https://www.figma.com/file/2b1vIUlRczjuwhWr9cE9OY/Wireframes?node-id=2482%3A45090

Acceptance Criteria:

REMEMBER THAT WHOEVER WORKS ON THIS ISSUE MUST TICK OFF ALL THE POINTS IN THIS LIST UNLESS THERE IS CLEAR AGREEMENT IN THE COMMENTS TO SAY OTHERWISE. DO NOT REVIEW A PR INVOLVING THIS ISSUE UNLESS THIS HAS BEEN DONE

  • Add new icons
  • Include icon with text
  • Replace Hyde logo with the svg we have in Figma

Set up Typography

This is to set up all the typography for the app

Wireframe link

https://www.figma.com/file/F87oFi7DgtgoJ0KNJYyy2L/Wireframes-Prototype?node-id=1503%3A4

Acceptance Criteria:

REMEMBER THAT WHOEVER WORKS ON THIS ISSUE MUST TICK OFF ALL THE POINTS IN THIS LIST UNLESS THERE IS CLEAR AGREEMENT IN THE COMMENTS TO SAY OTHERWISE. DO NOT REVIEW A PR INVOLVING THIS ISSUE UNLESS THIS HAS BEEN DONE

  • Add all typography types
  • Use common margin component so we have a consistent way of adding margin across all components: #32

Create landing page

Summary
Create the main landing page that shows the steps.

Wireframes
https://www.figma.com/file/F87oFi7DgtgoJ0KNJYyy2L/Wireframes-Prototype?node-id=1517%3A5656

Acceptance Criteria:

REMEMBER THAT WHOEVER WORKS ON THIS ISSUE MUST TICK OFF ALL THE POINTS IN THIS LIST UNLESS THERE IS CLEAR AGREEMENT IN THE COMMENTS TO SAY OTHERWISE. DO NOT REVIEW A PR INVOLVING THIS ISSUE UNLESS THIS HAS BEEN DONE

  • Create landing page in line with wireframes
  • Ensure we are using the content from the constants, so this should dynamically look for the available steps and then map them out
  • Same for language - it should look for the available languages in our file system (in this case it'll just be english) and render those as options in the dropdown
  • This won't include tracking the user's progress, that will be picked up in another issue

Create token to store user's progress and language

Summary
We are not creating a user log in system, so we need to store the user's progress in local storage / via a cooke. There are two key things to track:

  • their progress
  • their chosen language

Acceptance Criteria:

REMEMBER THAT WHOEVER WORKS ON THIS ISSUE MUST TICK OFF ALL THE POINTS IN THIS LIST UNLESS THERE IS CLEAR AGREEMENT IN THE COMMENTS TO SAY OTHERWISE. DO NOT REVIEW A PR INVOLVING THIS ISSUE UNLESS THIS HAS BEEN DONE

  • Store language in token
  • Ensure token doesn't expire for at least 30 days
  • Store step progress in token (e.g. Check Eligibility)
  • Store information progress within the step, i.e. the checklist (e.g. income details)

Set up Hyde on Heroku

For now please set up this on heroku using the hello@yalla account. We can set up a proper one in the future with Hyde's email address

Add new layouts

Update existing Layouts component with two new layouts

Wireframes
https://www.figma.com/file/2b1vIUlRczjuwhWr9cE9OY/Wireframes?node-id=2482%3A37764

Acceptance Criteria:

REMEMBER THAT WHOEVER WORKS ON THIS ISSUE MUST TICK OFF ALL THE POINTS IN THIS LIST UNLESS THERE IS CLEAR AGREEMENT IN THE COMMENTS TO SAY OTHERWISE. DO NOT REVIEW A PR INVOLVING THIS ISSUE UNLESS THIS HAS BEEN DONE

  • Add side layout
  • Add half page layout

Note that the side bar isn't always a menu, this is the layout used for the Step page and the right hand side would be an empty div

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.