UX/UI Design

Intuitive, beautiful user experiences created through elegant design solutions

Click images for more information

Web Design

Dynamic, informative, cohesive websites for individuals and small businesses

Click images for more information

Logo Design & Branding

Unique identities created through collaboration with clients in order to bring forward their personality and message

Click images for more information

Print Work

Posters and flyers, designed to be printed and distributed

Click images for more information

Snapchat Geofilters

Event filters reaching thousands of individuals through the social media platform Snapchat

Click images for more information

×
Atmosclear - Night View

View Code      View Video Demo

Technology Utilized: CSS, Preact, Adobe Photoshop

While creating a hifi prototype of a weather application for astronomers, my team found that one of the most important aspects of catering to our stakeholder group was the inclusion of a night view. This view is specifically designed so as not to ruin an astronomers night vision. While most bright lights require astronomers to give their eyes time to adjust, red light does not have this effect.

Selecting the symbol at the top right corner of the application transforms the color scheme from purples, useful while indoors or during daylight hours, to a strictly black and red view.
×
Atmosclear - Day View and General Concept

View Code      View Video Demo

Technology Utilized: CSS, Preact, Adobe Photoshop

As part of a team of developers, I helped design a hifi prototype of a weather app for aspiring astronomers. We collaborated to create an application which emphasized the elements that astronomers place most importance on, as discovered through a variety of data gathering techniques.

In particular, these methods included interviews, surveys, and user testing. We reached out to local amateur astronomy groups, professors and students of astronomy, and astronomy groups on social media to ensure that our application catered to our specific stakeholder group.
×
Atmosclear - User Testing and Data Gathering

View Code      View Video Demo

Technology Utilized: CSS, Preact, Adobe Photoshop

While creating the hifi prototype for Atmosclear, a weather application for amateur astronomers, my team of developers undertook many methods of data gathering and user testing in order to refine the application. Prior to beginning implementation, we utilized photoshop to create images used in lofi prototyping and user testing. These studies led to many adjustments in the general design, and assisted in our color palette selection.

Additionally we gathered data on general trends by distributing surveys among societies dedicated to amateur astronomy and students studying astronomy. We interviewed two individuals, one professor of astronomy and one member of an astronomical society who frequently stargazes, in order to better understand our stakeholders.

Once implemented, we used the hifi prototype for further user testing, making smaller adjustments and increasing intuitive aspects of the application.
×
Caffeinated Kitties - Application Prototyping

View Prototype

Technology Utilized: Sketch, InVision

Caffeinated Kitties is an app for iPhones designed to help cat owners find cat friendly cafés in their area. I created the application as an exploration of Sketch and InVision, building each board and adding appropriate hotspots in order to achieve functionality.

Workflow:To create this application, I started with the basic home page, deciding what features were necessary to include to ensure an optimal user experience. I then worked to create corresponding pages for each element requiring a level of interaction, revisiting the basic home page with each expansion to reasses the home page design. I tested the prototype personally to ensure hotspot functionality and intuitivity, before asking some friends to walk through the application as a secondary test. Each iteration resulted in slight adjustments to better optimize the prototype.

Areas for expansion: Adding user personalization is a key part of user experience, and when translated into code it would be important for the user to be able to adjust their settings according to their own preferences. (This particular ability is beyond InVision's current capabilities.) Additionally, adding a way for users to favorite cafés would enhance the user experience.

Though the application is currently populated with dummy data, and is image based rather than created with code, the use of APIs, location services, and potentially a web scraper would take the app to a functional level. If an API does not exist for such a function, the custom web scraper would need to search the area for cafés that are specifically cat friendly.
×
Christina M. Casteel, MD, FACS

View Website

Technology Utilized: CSS, HTML, Adobe Photoshop

Dr. Christina Casteel came to me in search of a minimalistic but welcoming site for her practice treaing breast cancer. Utilizing a signature pink, symbolic of the fight against breast cancer, complemented by a deeper pink and simple yet effective neutrals, I helped Dr. Casteel achieve this goal.

The website now serves as an effective marketing tool for Dr. Casteel, inspiring trust through the presentation of testimonials, videos, and procedural information. Its user friendly, easily navigable format allows potential patients to find information quickly.
×
Maggie Phillips

View Website

Technology Utilized: Adobe Photoshop, Wix.com Sitebuilder

As a USC student studying Cinematic Arts, Maggie Phillips is an up-and-coming director and producer. I worked with her to create a platform from which she could showcase her work on a variety of projects. The site now functions as a dynamic resume and portfolio, and as an extension of her projects, allowing Ms. Phillips to show off her personal style and brand in film production.
×
Montessori Learning Center

View Website

Technology Utilized: Adobe Photoshop, Wix.com Sitebuilder

The Montessori Learning Center in San Diego is a school for children between 2-6 years of age, focusing on self-directed, non-competitive activities that help children develop strong self-images and confidence. As a member of staff, Diane Anderson was charged with maintaining MLC's presence online, and approached me looking to revamp their outdated site.

Throughout the design process, I strove to reflect the mission of Montessori schools. Moving away from traditional primary colors frequently utilized in websites revolving around preschool education and young children, but maintaining a bright color scheme, sets the site apart while still embracing MLC's target audience.

Accessibility was also a key component of the site, as it is a primary form of communication between parents and staff. It was therefore important to ensure that all pertinent information is easily accessible.

Finally, it was important that Ms. Anderson be able to maintain the website herself, as they release monthly updates on the site in the form of a newsletter. I gave Ms. Anderson personal training and written instructions in order to ensure that she would easily be able to achieve her desired tasks, and have since maintained an open line of communication in case she should have any questions.
×
The Party Link

View Website

Technology Utilized: CSS, HTML, Adobe Photoshop

With a general website concept but somewhat outdated design, Roxi Link wanted to modernize her party planning company site. By brightening colors, adjusting page layouts, and ensuring easily navigable content I was able to freshen the general appearance of her site and give The Party Link's online presence a more competitive edge.
×
Montessori Learning Center

View Website

Technology Utilized: Adobe Photoshop

As a part of my work with Diane Anderson on her website for the Montessori Learning Center, I helped build the company's brand with the creation of a new logo. Ms. Anderson wanted to incorporate the sun, now featured at the right side of the logo, and emphazied that the logo should reflect a fun and welcoming atmosphere. I achieved this through the use of bright colors and a legible but stylized font.
×
Maggie Phillips

View Website

Technology Utilized: Adobe Photoshop

Due to the prominence of Maggie Phillips logo on her website, it was important that the logo reflect Ms. Phillips' personal style and brand - strong and bold, with a dark flare.

I wanted to immediately represent her role in the film community, utilizing old-style film strips to form Ms. Phillips' initials. Through the use of shadows these film strips took on a 3D effect, allowing them to pop from the backdrop.

I then embraced her desire for a dark site, utilizing a black backdrop, while creating a bold, architectural design in gold to add visual intrigue.
×
Christina M. Casteel, MD, FACS

View Website

Technology Utilized: Adobe Photoshop

While working with Dr. Casteel to create her website, I designed a logo for her so as to increase the cohesion of her online presence. While the emphasis of her presence is professionalism, I also wanted to introduce some interesting visual elements. I achieved this by creating a clean interplay between the letters of her logo, made legible through the use of color blocking. Additionally, the use of a pink ribbon, widely recognized as a symbol of the fight against breast cancer, allows individuals to easily recognize Dr. Casteel's field of work.

Dr. Casteel has since maintained a consistency in her branding by embroidering the finalized logo on her lab coats and printing it on business cards.
×
Big Game Week 2015

Technology Utilized: Adobe Photoshop

On the UC Berkeley and Stanford University campuses, the week leading up to the rivalry football game is called Big Game Week. On both campuses, various events are held throughout the week to get the student body excited about the upcoming game.

The design concepts for each piece stemmed from iconic images of the UC Berkeley campus. The piece created for the Rally is a cross between our school mascot, a bear, and a torch. Fire is a traditional component in our Big Game Rallies, but in 2015 we were unable to have our usual large bonfire due to the California drought. As a result, I strove to emphasize the exitement inspired by bonfires of the past while looking towards the future and our new incorporation of cauldrons and fireworks.

The piece designed for the week of events is centered around the Campanile, the large clock tower on UC Berkeley's campus. Previous years' posters had made use of the same imagery, so I strove to create a new sensation by building a sense of industrialism. As the general theme of the week was creating a bridge between old and new traditions, particularly with the revamping of the Rally, which is the largest event of the week, it was fitting to create a sense of new construction.

As the Director of Publicity for the University of California Rally Committee, I was charged with creating these publicity materials. I led fellow students in putting up these posters around campus and handing out flyers to the student body, successfully bringing in large audiences for each of our events throughout the week.
×
Homecoming Week 2015

Technology Utilized: Adobe Photoshop

A celebration of the campus community, Homecoming Week offers an opportunity for the community to visit UC Berkeley and attend various events. As the Director of Publicity for the University of California Rally Committee, I created posters (top image) and flyers (bottom images) advertising the events we were putting on throughout the week.

The design of the poster was inspired by nostalgia, evoking the style of an old fashioned movie theater marquee. As Homecoming is often a time for alumni to revisit their alma mater and parents to return to their college days by visiting their children, it is often a time to look towards the past.

The flyers were handed out to students as they were walking to and from campus, thus the main point of importance was visual interest. Many groups hand out flyers on Sproul Plaza, a main area of campus, and thus it is important to stand out. Consequently I worked to design elements that were both informative and aesthetically unique.
×
Welcome Week and General Flyers

Technology Utilized: Adobe Photoshop

During the first weeks of school UC Berkeley hosts a week meant for new students to explore social groups, clubs, and societies. As a part of that week, the UC Rally Committee puts on several different events, all of which we advertise through flyers and Facebook events.

As the Director of Publicity, I was charged with creating publicity materials for this endeavor. I utilized our mascot, the bear, for the top flyer design as the week is meant to bring together fellow bears. For the lower right flyer I used images from various activities the Committee undertakes to emphasize that which is unique about the Committee and encourage students to see the benefit of becoming a member.

We also put on a class during each semester on the spirit and traditions of UC Berkeley. We publicize the course using flyers as displayed on the lower left. As the course centers on Cal, I pulled images of iconic traditions from the University and incorporated them into a geometric design to add more interest and intricacy to the flyer.
×
Charter Week 2016

Technology Utilized: Adobe Photoshop

A celebration of the founding of UC Berkeley, Charter Week represents a time for members of the campus community to remember the wonderful things associated with the University.

The top poster was created to alert members of faculty, alumni, students, and staff to the events taking place throughout the week in honor of the University's founding. Inspiration for the design was pulled from the various elements of UC Berkeley that inspire pride in the campus community.

The bottom poster was designed specifically for a separate eSports event held during Charter Week. The poster design was inspired by large scale eSport events, held in arenas.
×
Big Game Week Filters 2015 & 2016

Technology Utilized: Adobe Photoshop

As part of the week leading up to the rivalry game between UC Berkeley and Stanford University there are a wide variety of events held around campus. As part of this week I successfully submitted geofilter designs to Snapchat, and subsequently reached out to thousands of individuals. In utilizing technology already in the hands of faculty, students, and the wider UC Berkeley community, I achieved a maximum effect while conserving Committee resources and efforts.

Additionally, the filter designs were made to match flyers handed out to the student body, reinforcing visual association between the filters and the events put on by the UC Rally Committee throughout the week.
×
Charter Week Filters 2016

Technology Utilized: Adobe Photoshop

Celebrating the founding of UC Berkeley, Charter Week is all about the history of the University. In 2016 I designed and successfully submitted several Snapchat geofilters dedicated to specific buildings around campus. Each filter was meant to not only celebrate but educate, giving bits of information about each building.
×
Homecoming Week Filter 2015

Technology Utilized: Adobe Photoshop

A time for the campus community to come together, Homecoming brings thousands of people to UC Berkeley. I successfully created and submitted a geofilter to Snapchat to help advertise the week, letting those around campus know that the week of festivities had arrived. The filter was designed to match posters which were put up around campus, encouraging students and faculty to think about the events whenever they utilized the geofilter, and thus encouraging event attendance.