hi, i'm emily!

I'm a fourth year Computer Science major at Georgia Tech specializing in human-computer interaction. I'm an artist, a developer, a UX/UI/Product designer/researcher, and a lover of all things creative.

Emi logo

Featured Case Study: Vespula

UX Research, Affinity Diagramming, Prototyping, UI Design, User Research, Usability Testing

Designing a friend- and event-finding app for Black students at Georgia Tech to foster a stronger sense of community on campus.

Case Study: The Pride Alliance Website

UI Design, Web Design, Website Management

Revamping the Pride Alliance website to enhance information accessibility and improve visual appeal.

graphic design is cool

and I enjoy doing it in addition to the other design and programming I do. I've used Canva, Clip Studio Paint, and Figma for my designs, and am hoping to expand to more softwares and mediums in the future!

WreckCon 2023 Flyer Design

Graphic Design, Canva, Clip Studio Paint

In January of 2023, I joined the design team for WreckCon 2023, a two-day convention founded by Georgia Tech students. I was responsible for creating flyers that would be posted around Tech campus advertising the event.

Coming Out Week 2023 T-Shirt

Graphic Design, Creative Ideation, Clip Studio Paint

As Pride Alliance's Design Chair, I was also responsible for leading the Coming Out Week subteam dedicated to designing merchandise and flyers for events. In 2023, I had the pleasure of creating the COW 2023 t-shirt design that we were able to give out at the end of PrideFest.

let's keep in touch!

I'm looking for internships in UI/UX design, product design, and web development for Summer 2024 onward. I'm also looking for more projects to work on in the meantime. Feel free to email me and say hello!

Vespula: The Friend- and Event-Finder

During Spring 2023, I took CS 3873 (Intro to UI Design) where my group of four worked to design an application that promoted the social wellness of black students on Georgia Tech's campus.

Tools

  • Figma

  • Google Workspace

Role

  • UX Researcher

  • UI Designer

Part I: Defining the Problem

The Problem

For black students, college can be isolating - finding a safe and inclusive community can be difficult, especially at PWIs. This can negatively impact mental health, and as a result, impact academic performance.From our initial research, we gathered that black students of all genders aged 18-24, especially those at PWIs, tend to feel less of a sense of belonging than their white counterparts. Having a platform where black students can easily connect to each other and build community on campus can help improve the general wellbeing and social health of black students.

The Method

Our group decided to conduct four interviews per person for a total of 16 interviews with various students at Tech. We primarily interviewed our main demographic, Black students, and additionally interviewed several non-Black students to gauge the views of our secondary stakeholders.I conducted four interviews, three of which with black students, and one with a non-black student of color. As a group, we put our findings together and created an affinity diagram in order to analyze common themes with our findings.

Interview Results

Interviewees were asked several questions pertaining to their schedules, their methods of making friends on campus, their preferred modality for finding community, and their feelings about being minorities at Georgia Tech.

Affinity diagram

Key Findings

  • Many students interact with others on campus through student organizations, or events hosted by those organizations

  • In-person socialization is hard for some due to busy schedules

  • As a result, some students use online means of finding community, like GroupMe, Instagram, or Discord

  • Some students desire a comfortable environment, especially one where their peers shared their identity

  • Some students want to connect with people similar to them, whether in interests or identity

  • Students want friendlier user interfaces for their social apps

Part II: Understanding Users

We took the data from our affinity diagramming and created various personas to represent our users. Then, we created storyboards to better understand their tasks and goals.

Personas

Maya is based on the extroverted end of our findings. Many students were highly socially active and participated in several social groups on campus. Several students noted their frustrations with current apps and were looking for equally effective ways of finding events to participate in.Joshua is based on the introverted end of our findings. Some students were not socially active and participated in few social groups. These students were more likely to use online means of finding community.

Storyboard

Some students indicated previously that they were more introverted, but still desired an expansion of their social circle. In this storyboard, Nia wants to find a social group on campus, and finds that the app she is recommended to use is not the most user-friendly. Instead, she finds community in person through events and achieves her goal of expanding her circle.

Storyboard

Part III: Prototyping

We took the information that we learned about our users and began planning our first prototypes. To do this, we critiqued the current design space and formulated design requirements. Then, we started on low- to medium-fidelity prototypes of our application.

Critiquing the Design Space

Some of the services mentioned for finding community online were Discord, Instagram, and GroupMe.Discord provides a versatile interface with lots of visibile information. However, this may be overwhelming for new users.Instagram is neatly organized and has high visibility of images, which makes it great for learning about on-campus events through advertisements. But, the non-chronological homepage makes it challenging to find recent information about club pages the user doesn't frequently interact with.GroupMe provides a streamlined way of connecting with others in large group chats. But, the app can be frustrating to use because of how frequently it crashes.

Design Requirements

Based on our users' goals, we devised the following requirements:

  • Enable Self Expression

  • User Communication

  • Informative with Social Outlets

  • Usability

  • User Expereince

We decided that these five requirements would strongly inform our design choices. Our app needed to allow for self-expression of our users, allow them to communicate with each other, let them know information about social events, be easy to use, and yield an overall positive user experience.

Prototyping

After defining our design requirements, we began prototyping our application. As a group, we created 10 prototypes in Figma. I created two of these.

Solution 1: Vespula

Vespula is a dating app-style swiping app that allows students to find other students to befriend on campus. The algorithm will suggest to the user other students that match the same interests in their bio and suggest campus events based on their shared interest. The student can chat with people that they match with given that the match also swipes on that student.The motivation for this design was to incorporate the feel of both Bumble BFF and GroupMe. Several students indicated that GroupMe was their primary source of event and social information, so we wanted to include several important features from that service, namely direct and group messaging. We wanted to incorporate a more personal aspect to it, so the app heavily resembles a dating app that allows users to customize an "about me" section.The goal of this design is to meet both the need for meeting new people and the need to find on-campus events by consolidating these into one user-friendly interface.

Vespula design

Solution 2: Meetup

Meetup is an app where black students can host small meetups specific to certain interests independent of official school clubs. When signing into the app, students are suggested events based on their personal interests. If they RSVP, they join a small in-app group chat where they can message other students attending that event. Each user’s bio is visible from tapping on their icon within the group chat.Meetup's design is a minimalist take on services like Engage that allow students to discover on-campus events.

Meetup design

Part IV: Feedback & Final Iterations

The last part of our project consisted of receiving feedback and doing our final design iterations.

Feedback

After completing our prototypes, we created and presented a poster of our most promising prototypes to our peers. From this presentation, we decided to merge the Vespula concept with another concept more focused on event-finding. This way, we would have a more balanced, general-use application.

Heuristic Evaluation

We created a survey for our peers to complete as they reviewed our prototype. From the Nielsen and Norman Group's list of usability heuristics, we highlighted five that we felt were most crucial for our prototype to maintain: match between system and the real world, user control and freedom, consistency and standards, recognition rather than recall, and aesthetic and minimalist design.

From this evaluation, we concluded that our app needed improvements on having confirmations for actions and with maintaining recognizable icons.

User Study

We performed our user study with four users, three of which Georgia Tech students, and one a university student, not at GT. I acted as a note-taker who watched the participants as they completed the tasks we outlined for them.We concluded that our app was simple to use, as our testers had very little difficulty performing the tasks we'd outlined. Participants' feedback mainly consisted of desires for progress tracking when creating an account and, like with the heuristic evaluation, better feedback.

Final Solution

The final version of Vespula included a thorough login screen that allowed for the customization of users' profiles from their name to their pronouns, to their interests, to their clubs, etc. Users would match with other users on the app. When searching for events and RSVPing for them, they could see who of their matches also intended on attending those events. They could join groups chats with others intending on attending those events to get to know their peers better in an online context before meeting up in person.

Final Thoughts & Reflection

My team and I were very satisfied with the outcome of this project. If we could do it over again, I would like to see what changing the data collection method would affect with the design; here, we took a very qualitative approach, and it would be interesting to see what a more quantitative (e.g. survey with a Likert scale) approach could reveal about our users. Also, having a larger survey base would be interesting; we interviewed a very limited selection of potential users, and it would be highly informative to have more feedback.

The Pride Alliance Website

A deep-dive into the process behind fixing, transferring, and "zhuzh-ing up" the Pride Alliance website.

Background

When I became the Pride Alliance Design Chair, I was informed by the previous Design Chair that the website was in dire need of an overhaul in addition to the basic updates that needed to be made, like updating the list of officers to match the new executive board. At the time, the site had lots of formatting issues and still contained advertisements for outdated events that needed to be removed.

Changes

And so, the WordPress switch began. There were several things about the old site I wanted to keep, and several I wanted to change.

KEEP: Header navigation bar

The header navigation on the old site is simple and clean. It gives links to our resources and officer information, which are some of the most crucial pieces of information for someone trying to access LGBT resources at Tech or get in contact with one of the officers.

CHANGE: Navbar links

Though the header navbar was a good design choice, the listing of links didn't match the most logical listing of links for the club as it was in 2023. For the time when that version of the site went live, it was perfectly appropriate -- but Pride Alliance's professional development had consolidated greatly, and lots of the information under that tab was no longer accurate. Same for the Rainbow Bulletin -- lots of those events wouldn't be happening at all in 2023.The header links had to change, so from left to right, the links now read: Home, Events, Our Story, Our Officers, Resources
We wanted to make it more known how Pride Alliance came to be, since not many people even knew it wasn't always called Pride Alliance! Adding our story to the navbar makes that much easier. In addition, a link to jump directly to the events on the main page was added -- more on that in the next section...
We also wanted to make the resources section easier to navigate, so I utilized drop-down menus instead of in-page navigation to break the resources into themed sections.

KEEP: A list of events

It's important that the Pride website advertises our events -- after all, though the website isn't the primary way that people find out about Pride events, it is an important part of the club. We're social! We do events! That should be known!

CHANGE: Upcoming Events list

The old site's way of displaying events was an embedded Google Calendar that hadn't been updated in a long, long time. That had to change.I altered the site to utilize a widget that lists the title, time, date, location, and description for our events! Eventually, I'd like to see a more elegant solution for syncing updates to the website by adding events to some external calendar, since this one has to be updated manually through the site itself. Either way, this solution is more aesthetically pleasing than the previous version.

WreckCon 2023 Flyers

In January of 2023, I joined the design team for WreckCon 2023, a two-day convention founded by Georgia Tech students. I was responsible for creating flyers that would be posted around Tech campus advertising the event.

The initial mockup I created followed WreckCon's website theme with a construction service motif. I included elements that were reminiscent of this idea, adding a construction sign whose logo would be replaced by a silhouette of the WreckCon mascot, Rivet.The initial instructions I was given included that the flyer should be minimalist and emphasize text more than images. For this reason, I made the convention title text and the dates the largest elements.The image to the right shows my initial "sketch" in addition to the notes (the red text) that I added prior to getting feedback from the team to show my thought process.

The second iteration altered the alignment of the title text to be straighter for better spacing. A list of events and features of the convention was added, so it was optimal for the title to be pushed closer to the top of the flyer to reduce negative space.I was asked to emphasize the website and the fact that tickets for the event were free, so I added a box at the bottom right with very high contrast mirroring that of the title. Ideally, the viewer's eyes would scan the title, the (work in progress) frog logo, then the means of acquiring tickets.This design saw away with the QR code, which later iterations bring back.

The third mockup was very similar to the second, but added sponsor logos and brought back the QR code for convenience of acquiring tickets.The major issue with this design was the color - the intention was for the flyers to be printed and distributed across campus by either handing them to students or posting them on boards or taping them outside. Printing costs for full color, especially full colored backgrounds, would be unnecessarily high with this design.

The fourth iteration was a near complete overhaul of the previous ideas. It introduced a printer-friendly white background and did away with the large construction stripes on the side, instead opting for them to be used as a separator between the event title and date/location. A list of participating clubs was added alongside the events the convention would offer. I added more contrast between the "free tickets" and website link in the bottom box, and added a much cleaner square framing to the entire design.The overarching idea for this design was to incorporate minimalistic elements that evoked the WreckCon theme without making it overbearing to the point that crucial information was lost in decoration.

The fifth and final design improved on the spacing of the fourth design. At the suggestion of the organizational team, the clubs were listed separately from the events, with those featured in a smaller font to emphasize events. The sizing for individual elements was improved, and the "free tickets" advertisement was no longer being said by Rivet.This design was printed and used to advertise the event across campus, with a total turnout of over 1,000 attendees.

PrideFest 2023 T-Shirt Design

Designing the PrideFest 2023 t-shirt to 'bee' extra proud.

Ideation

In Fall 2023, I was asked to create the t-shirt that was to be used as a reward for completing the activities during Pride Alliance's annual PrideFest. To get started, I sought out sources of inspiration.

Two main ideas came to mind that informed my first thumbnail drafts.1. Include bees. Yes, our mascot is a yellowjacket, not a bee. However, throughout the semester, our PR chair (who posts to our Instagram) had been using the phrase "bee gay, bee proud" to sign off our posts. I thought this was very cute and a great succinct message that could be used to sum up the whole purpose of Coming Out Week -- to be gay and proud at Tech!2. Include cows. Really, truly, what is Coming Out Week -- which we all call COW anyway -- without the titular cow somewhere to represent it? COW's logo is a cow! I created cow stickers for it in 2022! Where's the cows?!Wanting to put both bees and cows in the design, I made a bunch of sketches in my sketchbook:

Iteration

I thought about aesthetics that would resonate with our community and translate nicely to a shirt. A simple design with bees, flowers, and hearts with a nice message would be similar to the minimalist flower design from COW 2022. A more punk approach would have great visual appeal, too -- but neither of these approaches considered involving the cow. From there, I drafted something that would include it all: bees, a cow, a flag, possibly some flowers, and a good message.From there, the first digital draft was born:

Iteration... iteration!

The design went through lots of minor tweaks, including altering the cow's head size, changing the flag from the progress flag to the standard six-striped rainbow flag (to avoid potential copyright issues), and adjusting word placement.The final design included the words "BEE PROUD!" along with the name of the club and of the event (as suggested by our President). I filled much of the blank space between the words and the other visuals with dashed lines resembling the trails you'd associate with bees flying.In the end, we had a wonderful shirt design that we could truly wear with pride.