GBM #4

​

Wednesday, Apr. 24

DIB 208

6:30PM

TSE x DCo

TSE x DCo TSE x DCo TSE x DCo

TSE x DCo

Sign-In Form

bit.ly/4aWtFSz

Agenda

1. Meet Design Co
2. Meet Triton Software Engineering
3. Handoff for Designers
4. Handoff for Developers
5. Workshop
6. Q&A

​

Meet our Speakers

Mandy Lai

Marketing Lead, Design Lead

Annie Wen

TEST Lead, Design Lead

Jocelyn Horng

Design Lead

Emily Marschall-Niswonger

TEST Lead, Engineer

Nicole Zhi

Designer, Design Systems

Justin Kim

Designer

Philip Zhang

Engineering Manager

01

​

Meet Design Co

300+ Designers

​

Bridging industry and community together

02

​

Meet Triton Software Engineering

TSE’s Mission

craft digital solutions for nonprofit organizations in our community.

TSE’s Mission

More than a team, we create opportunities to bond

TSE Org Structure

85 Members

• 90 Alumni
• 20 Clients

= 1 Community

In the org

1 PM, 1 EM , 1 Design lead

• 3 designers, 10 devs
• 1 client

= 1 Team

In a team

Demo – FixNation

Scan me!

Remember to check out our recruitment next fall!

TSE’s Social Media

03

​

Handoff for Designers

"Great things in business are never done by one person; they're done by a team of people."

​

- Steve Jobs

First, what is handoff?

Iterative process of the developers implementing finished designs.

• Converging on a solution everyone is happy with
• Shared goal of delivering for end-users

​

Core component of the product development process.

Product Development Methodology

Agile Methodology

Iterative approach that breaks down project into iterations or sprints.

​

Product Development Methodology

Scrum Methodology

Very specific agile methodology with an emphasis on roles, specific events, and artifacts.

​

What is handoff for designers?

Iterative process of handing off your finished designs for developer implementation.

​

• Showcasing your design reasoning
• Being open to suggestion and workarounds

Good Design Handoff Practices

Organize your files

Make sure your designs are consistently named and clearly labelled. Archive unnecessary files.

​

SHOW not tell (when you can)

Use prototypes to showcase interactions. Add notes explaining how the interface reacts.

​

Communicate intentionally and frequently

Be mindful of the design jargon. Explain design choices. Schedule regular check-ins with developers. Utilize design systems.

​

​

​

What is a Design System?

Definition: a design system is a set of building blocks and standards that help keep the look and feel of products and experiences consistent.

​

Why use a design system?

• Accelerates design & development process
• Replicate designs quickly by utilizing pre-made UI components & elements
• Allows designers to focus on larger, more complex problems
• Forms unified language between cross-functional teams
• Design handoffs go much smoother because engineers are familiar with components to translate into code

“Designers are not always aware of existing or intended reusable components and tokens in design either. In the absence of a design system, teams therefore end up doing a lot of redundant work that leads to inconsistencies, which delay the time to market.”

Designers

• Maintain design system, creating & updating documentation
• Establish design standards & principles for scalability, efficiency, consistency

​

Developers

• Work on visual and behavioral aspect of website
• Responsible for matching design systems with their UI

Design Systems /

How it works in cross-functional collaboration

Google Material

​

​

​

#1 tip: Look at prominent design systems from big companies, most of them are public.

Microsoft Fluent

IBM Carbon

Spotify Backstage

Design Systems /

Top Design Systems

At TSE, we want to expedite the process for both design & development with different projects.

Design Systems /

TSE’s Design System

Design Systems /

Style Guides

style guide: a resource that helps maintain brand consistency by providing guidance on how to use brand elements, such as fonts, typography, logo, color palette, and imagery.

Design Systems /

Visual Specifications

Guidelines to setup pages

Design Systems /

Components Library

Set of components to ensure consistency and improve efficiency

check out our storybook!

Additional Skills to Consider Learning

Naming Conventions

• Gives folder structure and reduces complexity

Auto Layout

• Easier workflow for designers and developers
• Standardizing components across workflows

Prototyping and Dev Notes

• Allows developers to gain better insight for original function of the design

HTML / CSS

• Having a general understanding of front-end programming can help guide designs process

Putting it ALLLLLLL together

Can you spot…

• Auto-layout
• Dev notes
• Prototyping
• Naming conventions
• Other practices?

04

​

Handoff for Engineers

At what point should developers get involved?

At the beginning of a project

A

After the user research stage

B

After wireframes have been completed

C

After hi-fi designs have been completed

D

At what point should developers get involved?

At the beginning of a project!

A

After the user research stage

B

After wireframes have been completed

C

After hi-fi designs have been completed

D

Finding the Sweet Spot:

Desirability + Feasibility

• Let’s be real: No matter how awesome a design looks, it may not be feasible to implement
• e.g. timeline, technical or skill set limitations
• It is OKAY to push back
• Finding the sweet spot TAKES TIME!
• Super duper important skill: Breaking down complex technical topics for a non-technical audience!

Feasibility:

What the developers can successfully complete

Desirability: All plans that the designers dream up

THE SWEET SPOT!

Aside: Web Dev Overview + Jargon

Frontend

• What the user sees/interacts with

Backend

• Provides data and functionality to frontend
• ex. Database, User Authentication

CRUD

• Stands for: CREATE, READ, UPDATE, and DELETE
• Functions that can be performed on data

​

API

• Stands for: Application Programming Interface
• How the frontend talks to the backend

REST

• Stands for: Representational State Transfer
• API architectural standard
• Used to design APIs
• Main verbs: GET, POST, PUT, DELETE (notice how these correspond to CRUD functions!)

​

​

• Collections of tools to help build UI/UX of a web app
• Common ones: React, Vue.js, Svelte, Angular
• Why??
• Faster development (less code to write!)
• Simplicity
• Reusability

Frontend Frameworks

Backend

Frameworks

• Collections of tools to help build backend servers (e.g routing, database management, authentication)
• Common ones: Django, Rails, Express.js, Spring
• Why??
• Faster development (less code to write!)
• Security
• Scalability

Version Control (Git)

Why use it?

• Can un-do mistakes
• Make collaboration possible
• Allows for iterative development

Common Terms Explained

• Repo - collection of code files
• Commit - save a snapshot of changes
• Branch - separate “copy” of code
• Push - “upload” changes
• Pull - “download” changes
• Pull Request - request for a code review
• Merge - bring in new changes from a branch

​

​

Important commands:

• Add: prepares changes to be saved/staged
• Status: shows you what changes are staged
• Commit: saves changes
• Push: Lets everyone see your changes
• Status: shows you what changes are staged

… and even more

• Infrastructure
• Hosting/serving code to user
• Reliability
• Observability
• Continuous Integration / Continuous Delivery (CI/CD)
• Automated Testing
• Automated Deployment

Implementation Time!

Step 1: Decompose design into components

​

…

Implementation Time!

Step 2: Create functions/classes for each component

​

Step 3: Style components and their containers

​

Implementation Time!

​

Step 4: Build app back up from components

• Component = atom
• Page = molecule
• App = organism

05

​

Workshop

Scenario

You are a group of designers and developers working on a new E-commerce website.

​

Designers, you are tasked with creating product carousels using the existing anatomy of a Figma component from the design systems.

​

Developers, following the design of these carousels, you are tasked to export the newly designed carousels and upload them onto Replit.

​

​

Group up!

1 Developer : 1+ Designer(s)

Developers

Designers

bit.ly/3vXmUkP

bit.ly/3Q3Srbv

Instructions - Designers

1. Save a local copy of the Figma file
2. Copy 3 of the recipe cards components
3. Referring to the documentation, design a carousel and homepage using images and your color palette
4. Paste them onto the homepage frame.
5. Handoff to the developer :)
6. Make sure to share your Figma File copy to your developer! [Share → Anyone can View]

​

​

Instructions

- Developers

1. Collaborate with your designer: discuss the design, ask questions and reel-back anything too difficult to design at this time
2. Open up the linked codepen and get to work using ReactJS to implement the designs
3. Feel free to ask us any questions about implementation
4. Make an account with Codepen if you want to save your work and reference it later!

Instructions Recap

Designers bit.ly/3Q3Srbv

1. Save a local copy of the Figma file
2. Copy 3 of the recipe cards components
3. Referring to the documentation, design a carousel and homepage using images and your color palette
4. Paste them onto the homepage frame.
5. Handoff to the developer :)
6. Share your Figma File copy to your developer! [Share → Anyone can View]

Developers bit.ly/3vXmUkP

• Collaborate with your designer: discuss the design, ask questions and reel-back anything too difficult to design at this time
• Open up the linked codepen and get to work using ReactJS to implement the designs
• Feel free to ask us any questions about implementation
• Make an account with Codepen if you want to save your work and reference it later!

​

Take-Home Messages

1. Handoff is an iterative and collaborative process of handing over a finished design for implementation
2. Start early and often
3. Designers superpower: well-documented and organized process
4. Developers superpower: communicate constraints - bonus: learn animations!

Jocelyn Horng (jhorng@ucsd.edu) • Justin Kim (juk034@ucsd.edu) • Mandy Lai (mslai@ucsd.edu) • Emily Marschall-Niswonger (emarschallniswonger@ucsd.edu) •

Annie Wen (x7wen@ucsd.edu) • Philip Zhang (phzhang@ucsd.edu) • Nicole Zhi (nzhi@ucsd.edu)

Thank you