Tristan Phan's Portfolio

Nightlife

Product and Brand Development

UI/UX

Branding

Figma

Illustrator

Nightlife is a mobile app designed to invigorate the evening entertainment scene in Boston. It offers users a comprehensive directory of local spots, enabling them to discover spaces and moods tailored to their preferences. As part of their introduction to the app, users take a fun personality test, which guides venue suggestions based on their responses. Nightlife's lively and eye-catching visual design aligns seamlessly with its dynamic brand principles and youthful target demographic.

Nightlife

UI/UX

Branding

Figma

Illustrator

Nightlife is a mobile app designed to invigorate the evening entertainment scene in Boston. It offers users a comprehensive directory of local spots, enabling them to discover spaces and moods tailored to their preferences. As part of their introduction to the app, users take a fun personality test, which guides venue suggestions based on their responses. Nightlife's lively and eye-catching visual design aligns seamlessly with its dynamic brand principles and youthful target demographic.

Nightlife

Product and Brand Development

UI/UX

Branding

Figma

Illustrator

Nightlife is a mobile app designed to invigorate the evening entertainment scene in Boston. It offers users a comprehensive directory of local spots, enabling them to discover spaces and moods tailored to their preferences. As part of their introduction to the app, users take a fun personality test, which guides venue suggestions based on their responses. Nightlife's lively and eye-catching visual design aligns seamlessly with its dynamic brand principles and youthful target demographic.

Nightlife

Product and Brand Development

UI/UX

Branding

Figma

Illustrator

Album Set

Visual Design and Typography

Graphic Design

InDesign

Photoshop

Illustrator

Procreate

This project utilizes lyrics and visuals from the Angelic Buster Mini-album, "Shining Heart" to create a new album cover and lyric booklet. As a video game enthusiast, Maplestory is one of the games engrained in my long history, and Angelic Buster has been my character of choice. This project was a personal project, intertwining my love for video games, design, and k-pop.

I developed my vector illustration, typography, and 3D asset creation skills with this project.

Album Set

Graphic Design

InDesign

Photoshop

Illustrator

Procreate

This project utilizes lyrics and visuals from the Angelic Buster Mini-album, "Shining Heart" to create a new album cover and lyric booklet. As a video game enthusiast, Maplestory is one of the games engrained in my long history, and Angelic Buster has been my character of choice. This project was a personal project, intertwining my love for video games, design, and k-pop.

I developed my vector illustration, typography, and 3D asset creation skills with this project.

Album Set

Visual Design and Typography

This project utilizes lyrics and visuals from the Angelic Buster Mini-album, "Shining Heart" to create a new album cover and lyric booklet. As a video game enthusiast, Maplestory is one of the games engrained in my long history, and Angelic Buster has been my character of choice. This project was a personal project, intertwining my love for video games, design, and k-pop.

I developed my vector illustration, typography, and 3D asset creation skills with this project.

Graphic Design

InDesign

Photoshop

Illustrator

Procreate

Album Set

Visual Design and Typography

Graphic Design

InDesign

Photoshop

Illustrator

Procreate

Care-Wallet

Product and Brand Development

UI/UX

Branding

Figma

Illustrator

Relieving the burden of care taking

Care-Wallet is a platform dedicated to making the care taking experience more manageable. The app provides a medium for creating, tracking, and delegating tasks. Care-Wallet aids users in the already emotional process while emphasizing the importance of familial love and care.  

Since Care-Wallet existed in the healthcare space and targeted users with geriatric loved ones, it was crucial for us prioritize accessibility, and simplicity when it came to our designs.

Care-Wallet was designed and developed for an external Client (Em-Tech Labs) by Northeastern Students. We were given guidelines, goals, and restrictions to follow but still made Care-Wallet
our own.

Care-Wallet

UI/UX

Branding

Figma

Illustrator

Relieving the burden of care taking

Care-Wallet is a platform dedicated to making the care taking experience more manageable. The app provides a medium for creating, tracking, and delegating tasks. Care-Wallet aids users in the already emotional process while emphasizing the importance of familial love and care.  

Since Care-Wallet existed in the healthcare space and targeted users with geriatric loved ones, it was crucial for us prioritize accessibility and simplicity when it came to our designs.

Care-Wallet was designed and developed for an external Client (Em-Tech Labs) by Northeastern Students. We were given guidelines, goals, and restrictions to follow but still made Care-Wallet our own.

Care-Wallet

Product and Brand Development

Relieving the burden of care taking

Care-Wallet is a platform dedicated to making the care taking experience more manageable. The app provides a medium for creating, tracking, and delegating tasks. Care-Wallet aids users in the already emotional process while emphasizing the importance of familial love and care.  

Since Care-Wallet existed in the healthcare space and targeted users with geriatric loved ones, it was crucial for us prioritize accessibility, and simplicity when it came to our designs.

Care-Wallet was designed and developed for an external Client (Em-Tech Labs) by Northeastern Students. We were given guidelines, goals, and restrictions to follow but still made Care-Wallet
our own.

UI/UX

Figma

Branding

Illustrator

Care-Wallet

Product and Brand Development

UI/UX

Branding

Figma

Illustrator

Type in Motion

Visual Design and Typography

Figma

Illustrator

Procreate

Personal development
This project utilized concepts, characters, and text from the Star Guardian series in League of Legends. I started this project to develop my skills in Figma, focusing mainly on components and smart animations. I decided that I would enjoy the process more if I based it on a topic I'm enthusiastic about, such as video games!

Learning how to showcase
Creating this project also enlightened me on the reality of such projects. No one is going to click through my whole prototype. Thus, I also learned how to adapt my content into forms that are easy to consume. I created a long-form image of my prototype as well as a video walk through. Furthermore, I compiled all my assets into separate images to show off.

Type in Motion

Figma

Illustrator

Procreate

Personal development
This project utilized concepts, characters, and text from the Star Guardian series in League of Legends. I started this project to develop my skills in Figma, focusing mainly on components and smart animations. I decided that I would enjoy the process more if I based it on a topic I'm enthusiastic about, such as video games!

Learning how to showcase
Creating this project also enlightened me on the reality of such projects. No one is going to click through my whole prototype. Thus, I also learned how to adapt my content into forms that are easy to consume. I created a long-form image of my prototype as well as a video walk through. Furthermore, I compiled all my assets into separate images to show off.

Type in Motion

Visual Design and Typography

Personal development
This project utilized concepts, characters, and text from the Star Guardian series in League of Legends. I started this project to develop my skills in Figma, focusing mainly on components and smart animations. I decided that I would enjoy the process more if I based it on a topic I'm enthusiastic about, such as video games!

Learning how to showcase
Creating this project also enlightened me on the reality of such projects. No one is going to click through my whole prototype. Thus, I also learned how to adapt my content into forms that are easy to consume. I created a long-form image of my prototype as well as a video walk through. Furthermore, I compiled all my assets into separate images to show off.

Figma

Illustrator

Procreate

Type in Motion

Visual Design and Typography

Figma

Illustrator

Procreate

Flick

Human Computer Interaction and UX Research

UI/UX

UX Research

Figma

Flick is an app designed to alleviate the time sink that comes along with selecting a movie/show to watch on a streaming platform. We all have shortened attention spans due to social media, and picking out a movie can be time consuming for indecisive people. So why not have the process replicate how we scroll through social media?

Focusing on the process
The team and I focused a lot on validating our design decisions through interacting with our users (interviews, focus groups, usability studies).

Flick

UI/UX

UX Research

Figma

Flick is an app designed to alleviate the time sink that comes along with selecting a movie/show to watch on a streaming platform. We all have shortened attention spans due to social media, and picking out a movie can be time consuming for indecisive people. So why not have the process replicate how we scroll through social media?

Focusing on the process
The team and I focused a lot on validating our design decisions through interacting with our users (interviews, focus groups, usability studies).

Flick

Human Computer Interaction and UX Research

UI/UX

UX Research

Figma

Flick is an app designed to alleviate the time sink that comes along with selecting a movie/show to watch on a streaming platform. We all have shortened attention spans due to social media, and picking out a movie can be time consuming for indecisive people. So why not have the process replicate how we scroll through social media?

Focusing on the process
The team and I focused a lot on validating our design decisions through interacting with our users (interviews, focus groups, usability studies).

Flick

HCI and UX Research

UI/UX

UX Research

Figma

Product and Brand Development

Figma

Illustrator

Branding

UI/UX

Good Dog Licensing is a media-match-making website that allows Northeastern students to obtain soundtracks for their media or submit their music to be utilized by other students' projects.

Rebranding an existing product
Good Dog Licensing had an already existing website that was very rough around the edges. This allowed us to approach the visual identity from scratch, with the only aspect the clients emphasized wanting to keep being including a dog in their logo. Despite the silly name, our clients envisioned a more sleek and serious identity for their website.

Figma

Illustrator

Branding

UI/UX

Good Dog Licensing is a media-match-making website that allows Northeastern students to obtain soundtracks for their media or submit their music to be utilized by other students' projects.

Rebranding an existing product
Good Dog Licensing had an already existing website that was very rough around the edges. This allowed us to approach the visual identity from scratch, with the only aspect the clients emphasized wanting to keep being including a dog in their logo. Despite the silly name, our clients envisioned a more sleek and serious identity for their website.

Product and Brand Development

Good Dog Licensing is a media-match-making website that allows Northeastern students to obtain soundtracks for their media or submit their music to be utilized by other students' projects.

Rebranding an existing product
Good Dog Licensing had an already existing website that was very rough around the edges. This allowed us to approach the visual identity from scratch, with the only aspect the clients emphasized wanting to keep being including a dog in their logo. Despite the silly name, our clients envisioned a more sleek and serious identity for their website.

UI/UX

Branding

Figma

Illustrator

Good Dog

Product and Brand Development

UI/UX

Branding

Illustrator

Figma