--- ## Dev Team  --- ## Product Owners | Lucy Cranwell-ward | Suraj Rai | | -------- | -------- | -------- | || | --- ## What is UpSkill >"Upskill Me provides students with the skills of the future, so that no one is left behind in the ever-changing future of work." --- ### User Journey "To be able to access a unique account on the UpSkillMe platform, add in experiences/events/achievmnets and get points that contribute to skill badges." --- # Design  Black and white prototype to conduct user testing ---  --- # User Testing User testing was conducted on the 03/10/2019 with four Year 12 students from Ark Academy school in Lewisham --- Skills * Unclear what the badges refer to in current form * Unclear that the badges are clickable - add shadow --- Activities section * Not totally clear what the 'view confirmation' link is for. * Not totally clear that these are activities in the past or things to sign up for in the future? * Could rename the section 'Activity history' - "see a list of you past achievements" * "Skills" - explain these are achievements?? * 'Activity+' button looked like 'add document' or link to start a new page. Not obvious it's for adding another activity. * Could use that same 'Activity+' icon to where the view confirmation box is currently. ~~ * Could change the add activity button to a bigger floating button that just says 'add activity' * 'View confirmation' was not clear what it referred to. --- Activity sign-up form * Linking from the activity section should be optional, and that should be clear * Could lose the link thing entirely?? * Link in the activity add section is phrased differently to how it appears in the activity section box * Arrow to click through the form could be bigger --- # Demo --- # Lambda Function * Our app is serverless with Lambda functions that query the API without exposing the API key --- ```javascript= const axios = require("axios"); exports.handler = (event, context, callback) => { let parsedEmail = JSON.parse(event.queryStringParameters.email).email; const { API_URL, BASE_ID, API_KEY } = process.env; const SEARCH_FILTER = `&filterByFormula={schoolEmail}=`; const SEARCH_INPUT = `"${parsedEmail}"`; const URL = `${API_URL}${BASE_ID}${API_KEY}${SEARCH_FILTER}${SEARCH_INPUT}`; const send = body => { console.log("about to send body", body); callback(null, { statusCode: 200, headers: { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept" }, body: JSON.stringify(body) }); }; const getUserData = () => { axios .get(URL) .then(res => { console.log("axios request ", res); send(res.data); }) .catch(err => send(err)); }; // if (event.httpMethod == "GET") { console.log("about to make getUserData request"); console.log(URL); getUserData(); // } else { // console.error(`Expected get request, but recieved ${event.httpMethod}`); // } }; ``` --- # Styled Components + Theme ```javascript= import React from "react"; import styled from "styled-components"; import { animateScroll as scroll } from "react-scroll"; //Styled components const ActivityButtonStyle = styled.button` display: ${props => props.activityButtonDisplay}; border-radius: 100%; width: 100px; height: 100px; position: fixed; bottom: 10px; right: 10px; font-size: 1.2em; font-weight: 800; background-color: white; text-align: center; color: #109cf1; cursor: pointer; font-family: "Roboto", sans-serif; border: solid 4px #109cf1 transition: all 0.4s ease 0s; -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); ``` --- # DevRun Command ```shell= export API_URL=https://api.airtable.com/v0/ export BASE_ID=appjQS3ko8p1xLggG/UserData/? export OPPS_ID=appjQS3ko8p1xLggG/Opportunities/? export API_KEY=api_key=xxxxxxxxxxxxx npm run lambda-serve ``` --- ## Thank You ### Questions