LGT GridIron Design KickOff Presentation 3-14-2024 Notes

[choir241]

Design KickOff

1. Intro
   • Shashi introduces self
     • Introduces purpose of project
       • Missing piece for self taught or bootcamp graduates with a real client, using a corporate process, doing it right by giving feedback, and the hope is to garnish these individuals to find opportunities
2. Agenda
   • Sponsors
   • 1 presentation
   • Wrap up conversation
   • Next week
3. Sponsors
   • Pastel
     • Carlos
   • Frontend Masters
     • Mai
   • Appwrite
     • Jason
4. Design Kick-off: Presentation By Jayna (Product Design)
   • What is a design kick off?
     • It’s a collaboration between designers and the developers, where you can see the visual representation and the solutions to the problem at hand
     • We’re looking at the potential solutions that we want to see
     • Some companies do design kick offs, some don’t have design kick offs
     • We’re going to include development and design throughout our entire process
     • As a team, we want to negotiate and give feedback and it should be bi-directional so that we can work together
     • We want to start small, pointing out better ways to implement things, and the limitations we have and iterate on top of it
     • Biting off smaller chunk and find what works, focus on making the MVP
   • Figma MVP
     • Starting point of how we’re going to do this
       • Rough UX designs: core features we want to focus on with the MVP - Most simple way we can pull it off
     • Pages
       • Landing page
       • Logging in
       • Player UX
       • Admin page
       • Home page after login
     • Design Tokens
       • Set of standard elements (variables in development)
       • Spacing, text, colors, radius, etc
       • Can be applied everywhere
       • It’s pixel perfect, but important
       • All created with Tailwind in mind
       • Colors are set to default tailwind colors for now, but can be customized later
       • They’re basically reusable styles.
       • Right now it’s simple and not a lot, but perfect for our current application as it’s not that large yet and is not design heavy, but the larger the project becomes, the more complex the tokens become and the amount of design tokens increase
       • We want to keep scalability in mind when it comes to all the design tokens
       • Look at the consistent pattern that ideally should follow the golden ratio if the naming convention is confusing
     • Pages
       • Dark and Light Mode
         • Starting with dark mode first
           • Go with the more fun visual effect
           • Can be difficult to sell to corporate
         • Can introduce both dark and light mode and toggle between them eventually
       • Went with a mobile first design, than increase screen sizes
         • Most users are on mobile phones these days
         • Add more finetune control on the Desktop
       • Login
         • Set the look of the input
         • Set the look of the continue button
         • Potentially could add rotating quotes
         • Magic links don’t need a password, only need their email for login. Potential tool to keep the current design as simple as possible
       • Loading Animation
         • Enhances the experience
         • Tells the user something is happening
         • A skeleton is really good for all applications, it’s a visual indication for users that something is happening
         • Accommodating for mobile users, which will most likely be the majority of our users
         • We want to show proof of concept first, than add other things on top of that later
       • Weekly picks
         • One page for now
         • Header is only sign out, eventually will add a hamburger menu with more links
     • Application focus
       • MVP focused only that is a working model, then add on to it like a leaderboard, ai, etc
       • We want to build slowly with one flow, and a super simple happy path, than we iterate and implement new things
     • Screenshots
       • Other application similar to ours, their flow and how they do it
       • We have a niche, there are not many competitors in the field of NFL football survivor pool
       • How we do things the same and/or differently from our competitors
       • Jason asked if Jayna considered other similar applications flows
     • Select Teams
       • Went for visually interesting yet simple so we can fit the Logo
         • Maybe a swipe left/right like Tinder
       • Didn’t want to deviate too much from the consistent design with the mobile first approach
       • Sometimes simple is best
         • Craiglist is also very simple but it works because it’s straight to the point
     • Timocodes from twitch asks if there is betting involved or just a competition whose team gets best results
       • Shashi answers it depends on the commissioner, but our team is only going to handle the results
       • Shashi explains the core rules of football survivor pool
     • Mai suggests showing data so user is able to make informed decisions
       • A long press on the team card that pulls up their record/basic data
     • Hamburger menu
       • Tab or route to any of the teams so the user can do the research
     • ShadCN for drawers and sheets that don’t take you to a new page, but overlays over them
       • When you click on a card, a drawer can come from the bottom and the user can choose to select/not select
       • Could also hover over the card to pull up the drawer
     • Appleverse like tooltips but more robust
     • Think MVP first, but these are good conversations to have, and once we push the MVP, we can add additional things
       • AB testing, data and push this application out
       • Feel like a company where we push out an application
     • Em asks if all the assets are custom or self made. Jayna uses robust icon set, where you can set stroke, fill, etc, which will also work on assets for the logo, and make a consistent transparent logo for the loading screen
     • We could customize a svg or we can find what we need
     • Chris has a good script, which makes it really easy to pull
   • Shashi Thanks Jayna for the Design kick off
     • Next steps are the user stories
     • Over the weekend, we want to get the ball rolling
   • Shashi suggests using a point system for tickets
     • Points are for tracking purposes, and they are a general gauge of the velocity for the producers and time period the ticket would take, while tracking performance
     • Consists of the sprint process, where we as a team vote how long we think a ticket will take, we have a discussion as a team on why we we think its x amount of points, we vote again, then we take the average of those points and distribute them
     • Generally a good measurement on how long a task will take
     • We want to underestimate and over deliver
     • If a ticket has too high of a point value, that might be an indication that we need to break down the task more and redistribute the points
     • Chris asks how we’re going to handle these tasks, shashi says we will be using github for now
   • Recap
     • Went over designs from Jayna, design tokens, few pages setup for MVP
   • Next steps
     • User stories and tasks for next week
     • Sprint planning for next week
     • How many points we think a certain task will take
     • Setup infrastructure, domain, etc
     • More for future implementation
     • Please ask Jayna if you have any questions in the general chat so everyone else can see it
   • Sprint demos
     • What are they
     • You build a feature and you want to demo it to the team
     • It doesn’t need to be pushed to the site
     • They are meant to showcase what you built and informative of the features and what is going to be coming up
     • So we can anticipate what will be included and we know what to document
     • Demonstrates what you have done and what you have researched
     • Play it by ear and see how it all goes
     • Shashi thanks everyone, wants to announce live presentations ahead of time to bring awareness of the project, which is open source, and push out some updates