Timeline
Summer 2023 | 6 weeks
Skills
UX Design
UX Research
Motion Graphics
Role
UX Designer
UX Researcher
Motion Graphic Designer
Tools
Figma
Adobe Illustrator
Adobe After Effects
Role
UX Designer
User Researcher
Illustrator
Skills
UX Design
User Research
Illustration
Timeline
Summer 2023 |
6 Weeks
Project Description
A coffee website that supports rescue initiatives for dogs.
Project Description
A coffee website that supports rescue initiatives for dogs.
Timeline
Summer 2023 | 6 weeks
Skills
UX Design
UX Research
Motion Graphics
Role
UX Designer
UX Researcher
Motion Graphic Designer
Tools
Figma
Adobe Illustrator
Motion Graphic Designer
Background
PugMug is a solo project I created to get into the Cal State Long Beach BFA Program in Graphic Design.
Research
After researching various thematic coffee shops focused on animal rescue, I found that a majority appealed to an older audience.
Problem
"There isn't many coffee shops that support rescue initiatives and organizations for dogs in need."
I needed a deeper understanding to make PugMug appeal to a wider audience. After a discussion with my peers on the driving factors and key elements for PugMug, I found common points to be:
Showcasing their mission statement in a way where it can't be overlooked.
Introducing the mascot in his own section to connect with the audience and make them aware that the company also cares for their rescues as family.
PugMug was the second project I did to further understand UX/UI design. A majority of my summer vacation learning the basic fundamentals. I had a bigger focus on illustration, audience appeal, and thematic elements when making PugMug.
PugMug actively supports rescue initiatives and organizations that are committed to providing a new beginning for deserving dogs in need.
Background
A solo project I created to get into the Cal State Long Beach BFA Program in Graphic Design.
PugMug was the second project I did to further understand UX/UI design. A majority of my summer vacation learning the basic fundamentals. I had a bigger focus on illustration, audience appeal, and thematic elements when making PugMug.
Research
After researching various thematic coffee shops focused on animal rescue, I found that a majority appealed to an older audience.
I needed a deeper understanding to make PugMug appeal to a wider audience. After a discussion with my peers on the driving factors and key elements for PugMug, I found common points to be:
Showcasing their mission statement in a way where it can't be overlooked.
Introducing the mascot in his own section to connect with the audience and make them aware that the company also cares for their rescues as family.
Problem
"There isn't many coffee shops that support rescue initiatives and organizations for dogs in need."
PugMug actively supports rescue initiatives and organizations that are committed to providing a new beginning for deserving dogs in need.
Background
PugMug is a solo project I created to get into the Cal State Long Beach BFA Program in Graphic Design.
Problem
"There isn't many coffee shops that support rescue initiatives and organizations for dogs in need."
Research
After researching various thematic coffee shops focused on animal rescue, I found that a majority appealed to an older audience.
PugMug was the second project I did to further understand UX/UI design. A majority of my summer vacation learning the basic fundamentals. I had a bigger focus on illustration, audience appeal, and thematic elements when making PugMug.
PugMug actively supports rescue initiatives and organizations that are committed to providing a new beginning for deserving dogs in need.
I needed a deeper understanding to make PugMug appeal to a wider audience. After a discussion with my peers on the driving factors and key elements for PugMug, I found common points to be:
Showcasing their mission statement in a way where it can't be overlooked.
Introducing the mascot in his own section to connect with the audience and make them aware that the company also cares for their rescues as family.
I needed a deeper understanding to make PugMug appeal to a wider audience. After a discussion with my peers on the driving factors and key elements for PugMug, I found common points to be:
Showcasing their mission statement in a way where it can't be overlooked.
Introducing the mascot in his own section to connect with the audience and make them aware that the company also cares for their rescues as family.
Mid-fi Wireframes
Iterations based on User Feedback
Prototyping
Prototyping
Solutions
Solutions
In order to create more of a connection to PugMug customers, I chose to showcase images of the mascot himself. This gives the audience the opportunity to establish empathy and emotion to the brand by characterizing the pugs story. Having a connection with their loving pup gives the audience a sense of comfortability knowing that their support is greatly appreciated.
One of the solutions would be to make the mission statement and story prominent and unmistakable. The way I chose to do this was by implementing the hero section as a toggle button. This creates an engaging way to introduce PugMug brand and the mascot.
One of the solutions would be to make the mission statement and story prominent and unmistakable. The way I chose to do this was by implementing the hero section as a toggle button. This creates an engaging way to introduce PugMug brand and the mascot.
Final Prototype
In order to create more of a connection to PugMug customers, I chose to showcase images of the mascot himself. This gives the audience the opportunity to establish empathy and emotion to the brand by characterizing the pugs story. Having a connection with their loving pup gives the audience a sense of comfortability knowing that their support is greatly appreciated.
Final Prototype
Reflections
I really had so much fun being able to work with such intense colors and being able to create and experiment with various graphics. Mug the Pug was a constant doodle of mine and being able to create him into a mascot was amazing.
With this project I was able to understand more with web layout, as well as making the illustrations work within one another. I had a lot of constraints with this project in regards to making the slider on the hero work the way I envisioned. Looking back, I would like to experiment with more diverse design layouts on some pages.
Finally, I am extremely grateful to all the professors and friends that gave me a lot of feedback and insight on how to create a much better website in the end.
Next Project — Napa Valley
Timeline
Summer 2023 | 6 weeks
Skills
UX Design
UX Research
Motion Graphics
Role
UX Designer
UX Researcher
Motion Graphic Designer
Tools
Figma
Adobe Illustrator
Adobe After Effects