Design Process

💙 My design philosophy

My first reaction to any situation I face is to understand the problem before I act on it. As such, I believe that the best design solution can only be achieved through a comprehensive and detailed analysis of the problem. This is why I employ an extensive research process - starting with capturing the perspectives of every individual involved in a project, such as the users, clients, and stakeholders. With these unique perspectives in mind, I discover numerous ways to interpret a problem and use this knowledge to create an effective solution that addresses the needs and desires of all involved parties.

👩🏻‍💻 My guiding principle

Before I graduated from design school, a professor left me with a memorable piece of advice. She told me that since UX designers often work with innovative services, products, and experiences, there is always a measure of learning that happens on the job. As a result, I adopt a proactive approach when faced with a new project and am eager to learn and apply new practices.

🗃️ Summary of workflow

Please find below a summary of the various tools, skills, and techniques I use within my design process to create positive user experiences.

💬 Interviews

I have experience creating quantitative surveys through Google Forms for purposes of research collection or gaining feedback about a user's experience.

Interview examples from
Interview examples from My Humber Schedule app and Nursing Case Study (Coming Soon)

💬 Surveys

I have experience creating quantitative surveys through primarily Google Forms to either collect research or gain feedback about a user's experience.

Google Form Surveys Example for
Google Form Surveys Example for Parks TO app

💬 Workshops

I have experience planning, leading, and facilitating successful sessions for a variety of focus groups. Since my sessions include numerous brainstorming and critical thinking exercises, insights about potential problems and solutions can be easily collected.

For example, I led multiple 30-minute brainstorming sessions with registered nurses and nursing students to identify and explore their top challenges regarding shift scheduling. I used Freehand, a free online whiteboard within Invision, as a tool to guide these discussions (please see below).

Step 1: Sailboat Exercise Stage 3, Nursing Students & Step 2: Dot Voting Exercise, Registered Nurses Screenshots (Case study coming soon)
Step 1: Sailboat Exercise Stage 3, Nursing Students & Step 2: Dot Voting Exercise, Registered Nurses Screenshots (Case study coming soon)

💬 Usability Testing

I have expertise in planning, conducting, and summarizing the results of usability testing to validate and collect feedback on prototypes. Some of my specific skills include (but is not limited to): creating scripts, organizing methodology of tests, preparing questionnaires, calculating usability scores, and summarizing results in a written form.

Summary chart and excepts for the
Summary chart and excepts for the ParksTO app

📱 Sketches, Wireframes & Mockups

My process for visualizing interfaces usually starts with low-fidelity sketches to mid-fidelity digital wireframes. After receiving feedback from users and stakeholders, I revise these sketches and wireframes to create a final mockup.

Example process of sketch → wireframe → mockup for
Example process of sketch → wireframe → mockup for My Humber Schedule app

📱 Prototypes

I am most proficient in Adobe XD for creating prototypes but I also have experience with Figma.

image
image

Take a look to browse through the mobile prototype of the ParksTO app.

📱 UX and Content writing

To facilitate smooth communication with users and other audiences, I ensure that all content for a project is copy-edited and revised accordingly to feedback.

Example of how my written copy is smoothly translated to the final UI for the
Example of how my written copy is smoothly translated to the final UI for the ParksTO app

Excerpts from Client Material

💡

Main USER of this website: Potential local and internal volunteers

💡

Purpose of Harsukh: To bring all social classes on one common platform and to promote South Asian culture.

💡

Focus of Harsukh: Humanity. To maintain an environment of joy for all participants. To help education and engage children living way below poverty line.

Rewritten Copy

Welcome to Harsukh Harsukh is an encouraging, supportive and collaborative environment in which all social classes are brought to one common platform to learn. Harsukh breaks the constructs of what a typical school or farm is by providing forms of authentic learning that is empowered by the earnest staff, volunteers and students. The achievement of Harsukh is it's consistent engagement of all participants - regardless of their status and abilities to mold them into confident, joyful and successful individuals. As well, Harsukh positively promotes South Asian culture throughout their program.

For the Harsukh website design, I decided to organize and revise all the copy (text components) to ensure improved flow in the overall website design while meeting the client’s objectives. The revised written content and content organization were noted as the main design strengths by the clients.

🎨 Icons

Category Icons created for ParksTO App

One of the main features of the app was the Interactive Posting System where users can use AR (Augmented Reality) to place 3D objects. Below are the 9 different icons I designed for the 3D objects categories.

Icons created in Adobe Illustrator and used for the
Icons created in Adobe Illustrator and used for the AR Object Drop page (ParksTO Mobile App)

A branded motion infographic for COSRX (Korean skincare brand)

For the motion infographic, I created the following product icons to suit the current design branding. I first created 8 product icons and planned the layout in Adobe Illustrator before creating the infographic in Adobe After Effects. Information such as product details and the graph was inputted through a JSON file.

Description of the brand and rationale for the motion graphic:

Founded in South Korea, COSRX sells various skincare products that aim to solve particular skin problems. The following motion infographic is a comparison between the 2 top COSRX products in Asia and the 2 top COSRX products in Europe. Since the brand (COSRX) is part of the Korean beauty product category, it was relevant to consider the relevant buying factors for consumers and how important those factors were to them (represented as percentages).

Icons created in Adobe Illustrator to transfer to Adobe After Effects for animating
Icons created in Adobe Illustrator to transfer to Adobe After Effects for animating

Branded Motion Infographic (Europe) for COSRX created in Adobe After Effects

Branded Motion Infographic (Asia) for COSRX created in Adobe After Effects

🎨 Illustrations

Isometric objects created for ParksTO App

One of the main features of the app was the Interactive Posting System where users can use AR (Augmented Reality) to place 3D objects. Below are the different isometric park items I created that users could possibly select to place within their own images to create a suggestion post.

Isometric Park Objects created in Adobe Illustrator for all the users' posts (
Isometric Park Objects created in Adobe Illustrator for all the users' posts (ParksTO App)

A title motion animation for the brand, COSRX

For this animation, I created all the animation assets such as the product illustrations, background effects and the logo within Adobe Illustrator first. Afterwards, I imported them in Adobe After Effects to create animations.

Description of the brand and rationale for the motion graphic:

Founded in South Korea, COSRX sells various skincare products that aim to solve particular skin problems. From my initial research on the brand, I realized their commitment to simple skincare that allows its target audience to feel more confident in their natural skin. For my motion graphic, I highlighted the most popular products from the company. I also considered the brand's vision of promoting a better "tomorrow" or future for consumers when their skin troubles are solved.

Popular COSRX products illustrations (line art → full colour) created in Adobe Illustrator
Popular COSRX products illustrations (line art → full colour) created in Adobe Illustrator

Title motion animation for COSRX created in Adobe After Effects

🎨 Branding

Self Launch Brand

Launching a Brand called Self

With a partner, we created a fictitious company that launched a digital app called Self. Below are visuals that communicate the look, feel and voice of our brand. I primarily created the copy, UI (website & app) and the graphics for this project.

Positioning Statement of the Brand

Self provides guidance for stressed and overwhelmed adults with the best collective wellness experience, both mentally and physically compared to any other health and fitness app. This vision is achieved by having individuals craft their own personal wellness experience across 4 diverse categories (Mediations, Light Exercises, Positive Affirmations and Reflections), providing visual prompts to set a supportive, relaxing space and a daily archive function to keep track of your wellness progress.

Glimpse of Home Page/ Landing Page Mock-up
Glimpse of Home Page/ Landing Page Mock-up

Mock-up/UI of the Self app
Mock-up/UI of the Self app

Branded Merchandise Mock-ups
Branded Merchandise Mock-ups

Instagram Social Media Mock-Up
Instagram Social Media Mock-Up

Coffee Meets Bagel Redesign

A redesign of the online dating app, Coffee Meets Bagel's brand identity.

The assignment prompt was to choose a company to design a stationery brand identity for. I selected Coffee Meets Bagel - which is an online dating app where the user (the "Coffee") is delivered a match (the "Bagel") at noon every day. As a redesign project, I recreated the company's logo and other elements while ensuring that existing values that users associate with the brand were reflected.

Stationary Mock-up of Coffee Meets Bagel
Stationary Mock-up of Coffee Meets Bagel

🎨 Graphic Design

Album Cover and Track List art for the music artist ShyNE

I designed the "Freedom" album cover for the the client, ShyNE (a Korean/Canadian rapper/producer). Based on discussions with ShyNE, I incorporated a photo of their choice within the design to fit the album's concept. The "Freedom" album is available on Spotify, iTunes, Apple Music and other platforms.

Album Cover Art for the Freedom Album
Album Cover Art for the Freedom Album

Track List Art for the Freedom Album
Track List Art for the Freedom Album

Typographic Specimen Poster

Created by Firmin Didot, the Didot typeface has a prestigious history due to the creator’s other famous invention of stereo-typography, which strongly impacted the book industry. To pay homage to this history, I utilized a classic and book aesthetic style for the overall design to best represent the historical significance of the font.

Type Specimen Poster for the font Didot created in Adobe Photoshop and Illustrator
Type Specimen Poster for the font Didot created in Adobe Photoshop and Illustrator

Caroline Lee © 2021 — Created with Notion and powered by Super