BACK
TO TOP
// HEY, NICE SEEING YOU HERE! I'M
DANYL
STEPHAN
KOK
UX DESIGNER
I personalize my outputs
to my users to create
fun, memorable, and immersive
experiences for them!

// IN A NUTSHELL...

I'm Stephan, a UX designer based in Seattle with a focus in immersion and experiences.

My design philosophy is all about merging the phenomenal and immersive with the purposeful and effective — with a splash of fun!

I've also done other works involving graphic design, web design, visual art, and photography.

// I HAVE A BACKGROUND IN...

COMMUNICATION

SOCIOLOGY

IT

Visual / graphic design
Story-telling
Presentation design
Data visualization
Inclusivity
Identity
Decision-making
Personal experiences
Development life cycles
Information systems
Understanding developers
Technology as a medium

// CHECK OUT SOME OF MY WORK!

A mockup of the meal planning app Fresh Start, showcasing the welcome, courses, and planner screens.

Fresh Start

Fresh Start

A mobile app designed for young adults venturing into the world of meal planning and cooking by giving fun to the experience, making the planning easier, and keeping you motivated by involving others.

Keeping the interface easy and welcoming in a habit improvement use case like this is vital to the user's motivation to come back to the app and keep using it.

The visual design decisions made for this app's interface such as rounded corners and an orange-black combo is informed by insights from user research that match the motivations of the persona.

This was a solo project where I developed all the deliverables including but not limited to wireframes, style guide, affinity analysis, and prototypes.

A mockup of the habit-building app Habitate, showcasing the home, friends' tasks, and progress update screens.

Habitate

Habitate

A refreshing take on habit-building when it comes to balancing school, work, and personal aspects of life, made by and for college students. Users build & maintain virtual worlds as they build & maintain their habits with friends

This project touches on what motivates our target users to build habits meaningfully.

Aside from the satisfactions of visible progress through gamification, personalization through themes and a variety of objects to choose from and visually represent tasks, as well as the therapeutic gratification of arranging landscapes, Habitate also employs an "accountability buddies" system through habitat-sharing and nudging so that users can keep each other on task.

This was my capstone project for university, so creating a presentable, pleasant, and welcoming brand for the capstone exhibition was especially important. I proposed our logo as well as the appropriate font types and colors to my team and everyone concurred with these decisions. I also created our product banner and the slogan that goes on it.

A snapshot from the video prototype made for a speculative virtual window product showing a person standing in front of the window glass, looking in the direction of the mountains and the UI displayed by the window.

V. I. E. W.

V. I. E. W.

A video prototype showcasing a speculative window installation product that is capable of displaying fully immersive sceneries outside the room.

Even though this video prototype was made for a speculative design exercise, it served as an insightful practice and application of the "no-criticizing" ideation phase in general design.

The design of the product around immersion not only reflects my passion for creating captivating experiences but also represents the incredible opportunity to push the boundaries of traditional media. I explored how realistic sceneries, dynamic lighting, and surround sound can truly transform a space, offering viewers a momentary escape into new and exciting worlds.

A snapshot of what Canvas's messaging platform could look like if redesigned with UX principles.

Canvas Inbox Redesign

Canvas Messaging Redesign

A redesign of Canvas's messaging platform that aims to minimize its inadequate and confusing nature that demotivates both students and instructors from using it.

We paid specific attention to the intention behind the majority of messages sent over Canvas messaging and tended to these needs through a concept wireframe with additional native features that support them.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A tablet on a stand showcasing the interface of a puzzle game attraction designed for the Edmonds Historical Museum

Pieced Together

A proof-of-concept prototype for a puzzle game attraction, developed for the Edmonds Historical Museum's plan to overhaul and update its first floor to have more inherent support for accessibility and evolution of technologies.

One of the main drivers for the overhaul brought up by Arnie Lund (Vice President of Edmonds Historical Museum BoD) is to create reusable experiences that visitors would want to come back for because it would be new and different every time, so that was one of the considerations we kept closely in mind throughout the design process.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

The soft purple Dear Digital Equity logo featuring a clever arrangement of the letters D and E in a way that creates a Wi-Fi symbol between them.

Dear Digital Equity

Dear Digital Equity

A website-building and outreach project featuring stories and insights from advocates and practitioners of digital equity across the state of Washington to heighten the general public's awareness for them and for digital equity.

Our general design team of 23 were split up into teams that worked on different aspects, and one of the teams I was on was the web design and management team. We ideated and converged various wireframe designs and translated our cherry-picks into the limitations of SquareSpace.

I also proposed a logo design idea that is now used as the icon part of the complete logo. It features the Wi-Fi symbol denoting connectivity cleverly fitted behind the D standing for Digital. The arms of the E do not have a visible straight spine but rather appear as though they are supported into alignment by the curve of the Wi-Fi symbol signifying the concept of equity itself. The logo's overall impression also appears to suggest infrastructure.

// OTHER FUN THINGS I DO

Sound Design

A screenshot showing all the layers of individual sounds making up the recreated helicopter noise.
// Helicopter (Robinson R44) Sound Recreation
A screenshot showing all the layers of individual sounds making up the recreated helicopter noise.
// Helicopter (Robinson R44) Sound Recreation Breakdown

Visual Art

A photograph of a physical collage of a semi-abstract self-portrait of Stephan, consisting of pictures that are personally relevant to him.
// "So You Can See Them Too"
Eerie digital painting of stylized mountains and water featuring different shades of purple and orange, representing the artist's imagination of the idea of contradiction.
// "Talvassus"
Lineless digital artwork of the map Atlas from Hypixel Skywars in Minecraft, featuring semi-pastel colors
// "Atlas"
A digital drawing of The University of Washington Bothell Campus with the W at the center and UWB1 and UWB2 buildings on the side, done in lo-fi style featuring a purple palette, yellow building lights, and a starry night sky.
// UWB campus drawn in lo-fi
A playing card back design art for the tabletop game Amphibian Ambush, featuring colorful amphibians with different personalities arranged in a circle and a swamp that they all live in as the background.
// Amphibian Ambush card design

Illustrations

A character sheet of Stephan.
// Stephan
A character sheet of PieSamurai.
// PieSamurai
A character sheet of Zoren.
// Zoren
A character sheet for Saber.
// Saber

Animation & 3D Modeling/Printing

An animation of PieSamurai, a robot character with a CRT monitor for a head, talking and inadvertently rebooting mid-sentence.
// Animated Discord profile picture
A 3D printed model of a fox diving into the snow, but here it's diving into the table surface that it's placed on.
// 3D printed snow-diving fox

Minecraft Skins

A Minecraft skin for PieSamurai, a gray robot with a CRT monitor for his head, wearing a blue hoodie and shoes.
// PieSamurai
A Minecraft skin of Nit, an alien who stole items from beach-goers after he crash-landed onto a shore somewhere in the world.
// Splottato
A Minecraft skin of Zoren, an anthropomorphic turquoise fox-wolf hybrid with flip-flop eyes and patterns all over his fur.
// Zoren_Folf
A Minecraft skin for Saber, a bright orange fox with neon green and gray highlights and patterns all over his fur.
// Saber_Foxxo
A Minecraft skin for Cobalt, an orange fox with green eyes.
// CobaltFoxpaw

Photography

A dramatic photograph of the Sydney Harbour Bridge in the evening.
//
A cozy and nostalgic photograph of a Chinese plate, with diagonal planks of warm, red wood under it.
//
A product photograph of Space65 R3, a spacey custom mechanical keyboard featuring light bars, a clean metal body, and keycaps with stylized letters, on a space-themed deskmat.
//
A menu-ready photograph of angel hair pasta from a restaurant named Oku.
//
A photograph of the head chef and owner of Haruta Omakase broiling fish on a nigiri sushi on his bare hand with a blow torch.
//

// OTHER THINGS TO DO HERE

// HIT ME UP!

Please excuse my unresponsiveness!

I'll be ready for mobile viewing soon. For now, please revisit me on desktop or tablet :D
TAP TO EMBRACE THE CHAOS AND VIEW ANYWAY