GCES UpStart UI/UX Workshop

This is the supporting talking point document for the in-person workshop at GCES UpStart 2024. Presented by Anh H. Nguyen.

Workshop description on Notion

Sip the tea on the importance of programmatically executing an idea using the tools, tips & tricks in the industry.

Go on a whirlwind tour of what to expect in the journey of transforming and organizing the ideas in your head into (a rough) reality with popular prototyping tools, principles, and frameworks.

A quick rant by GCES VP of Tech.

Intro

Welcome everyone to my workshop. I hope you have your tea ready.

While you can definitely sit back, relax, and enjoy the show should you prefer, let's try to step out of our comfort zones and interact with each other for the fullest experience.

Now even though I put UI/UX in the title, I want to focus mostly on User Interface because of time constraint and the fact that it is the most visible part of a product. But I'll still briefly touch upon UX and some rules and principles that you can follow to improve the UX of your product.

Transition

Alright let's hop right into it.

The name of this workshop is "Practical Crash Course to UI/UX for Business Products".

Warum?

Ok, so why should we care?

When we have an idea of a product, we usually think of how much utility it provides for your potential users or customers. And then we put on some elbow grease and jump right into building the product.

We are inclined to think that the utility of the product will be the main attraction to potential customers and would be the primary force driving lead generation and user retention. Our customers would love to pay money to use our wonderful and innovative product.

Well, I'm here to change our mind.

`$> whoami?`

But who am I to dare to try and do so?

My name is Anh and I am the VP of Technology at GCES.

I have experience working both in user-facing roles, receiving feedbacks and implementing improvements; and in the backend, infrastructure development roles, building high-performing, resilient, and secured cloud services.

UI definition

Now, before we dive head-first into building a UI and improving the UX. Let's define what is UI and UX.

Is anyone here, who could give a one-sentence definition of what UI is?

I'll provide a very rough definition of the two.

UI is short for user interface. It is with which someone who uses your product interact with their senses: sight, hearing, touch (or tactile), smell, and the more ambiguous emotional feelings.
- The user can literally be anyone: someone who visits your site, someone who buys your product from a storefront, your grandmom, your colleagues, or even you yourself.
- As we can see, it is a multi-faceted concept that is as wide as ever and as old as time itself. While it is not necessarily to create a right UI at the start, otherwise every UI/UX designer would have been out of a job a long time ago, we need to hop on the right bandwagon at the start and iteratively improve that wagon into an STM metro.

Designing a UI

I believe that a UI should be developed with the intended audience at its core and not how pretty you think it'd look like, while adhering to some principles or standards or stylistic choices.

Principles

Consistency: the UI should be consistent across the board.
Clarity: the UI should be clear and easy to understand.
Accessibility: the UI should be accessible to everyone.
Efficiency: the UI should be efficient to use.
Familiarity: the UI should be familiar to the user.

A very tl;dr process

Define your target audience 🎯
Survey the market 👀
Define features and business requirements (user stories) 📜
Create a mockup 🤖
Test 🧪
Get feedback 👍

... and iterate over again 🔄

UI tools

Now that we define a process that we can follow, it would make sense to take a look at some tools and frameworks that we can use to perform those tasks.

Prototyping: Figma, Penpot, Webflow, Framer, v0 by Vercel(honorable mention)
Sketching: tldraw.com, Sketch, InVision
Diagramming: Microsoft Visio, Lucidchart, Draw.io, Miro, Whimsical
Design system: Tailwind CSS, Bootstrap, Material UI, Ant Design
Component library: Storybook, Bit, Chromatic
Testing: Cypress, Jest

UX definition

UX is short for user experience. Basically, think of it has having a sort of subconscious rating system inside the user's mind.
- Now, there are a lot of factors that affect the ratings:
  - Performance of the UI: how fast and responsive: the latency between a user's physical interaction and the system emits a signal acknowledging the interaction then the representation of the results
  - How easy it is to use, which then touches upon accessbility.
  - Does it spark joy when the users do stuff?

Demo

I will now show you a quick demo of how to use Figma to create a mockup.