I'm a designer, software engineer, and artist, currently a senior at the University of Maryland. I love ice cream all months of the year.
Empathetic
I understand people and connect with them. I have a strong sense of what makes good user experience, but I also iterate and adapt.
Technical
I have a computer science degree and have learned how to write clean, maintainable code in industry codebases. I can understand design from a technical point of view and am extremely comfortable in Javascript, HTML, and CSS.
Creative
Above all, I am constantly creating. I am constantly thinking of new ideas for animations, apps, stories- you name it.
During my internship at FiscalNote, a DC tech startup that aggregates and analyzes legislation, I re-designed their core platform interface. My first iteration introduced a modular, responsive design. This design put in place a flexible template for the addition of future features, and although the product is proprietary, I have outlined the process below.
Process
The first consideration for the new user interface was what users, who were professionals working in legislative affairs from a wide variety of companies, used the most when looking at bills. We had to pinpoint what was important to them in their daily jobs.
Next was making this information easily accessible and convenient for them when first clicking into a bill. We chunked the information by relatedness and organized them within cards. The card design helped structure the information and look forward to future mobile design. We put the most-used cards at the top for minimal scrolling. One challenge was grouping information based on relatedness to each other (legislators, committees) versus importance to the user. We listened to the user and summarized the most essential information from multiple areas into one of the top cards. Another challenge was that the analysis tab was rarely found. We removed the tab completely and combined the analysis with the informational page into one. Removing extra clicks made this once-hidden information readily available for users.
With every challenge, I iterated over designs with feedback from engineers, a project manager, and a policy expert. I made dozens of wireframes to explore the user interface and experience as new features were built, mapping out product flows and interactions on paper and digitally before they were built.
Challenges
As the 20th employee and first designer, I was thrown into a lot of roles at once. This was amazing beause I got to try my hand at graphic design, UI/UX, product design, and web development. It was challenging because I had to teach myself a lot these skills, make critiques of my own work with limited feedback, and grow as a designer without strong mentorship.
I developed a tool in Dart and Angular 2 for Google's new AdWords to test ads again with custom selected keywords and locations. As part of this project, I modified a location suggestion component for general usage across the entire AdWords division. My additions allow developers to customize the component for their needs without having to implement the customizations individually for each usage.
I researched past and current user experiences to maintain consistency with feature behavior. I had to understand and implement solutions for many edge cases, from invalid inputs to limitations in the API.
Skills:
Software Engineering, Web Development, Project Management
At Microsoft, I was a half-PM, half-SWE intern in Office365. My partner and I built a tool to monitor the health of the services in Office365 using Angular JS, C++, and SQL. We built multiple components to create a flexible, customizable dashboard that can be modified based on the user's needs.
Problem: Young girls don't know computer science exists, and if they do, the toys and media are catered towards boys.
Solution: Rubygirl is an animated, interactive superhero comic to introduce young girls to computer science. Featuring Ruby, Java, and Cici, who fight bad guys with code while breaking gender stereotypes.
Girls can read the comic, watch the animations, and crack the code (with helpful tips if they get stuck).
Animated comic panels to draw readers in.
Screencap of the first logic puzzle and step-by-step explanations of each line.
Motivation & Audience
When I was growing up, I didn't have any computer science activities as a girl. I didn't even know it existed. And when I did find out about it in high school, I still thought that it wasn't for people like me.
Rubygirl aims to inspire young girls in middle and high school to try out computer science and to encourage the idea that women can and should pursue STEM fields. It hopes to bring awareness to the lack of diversity in computing.
Character Design
I wanted the characters to be friendly, relatable, and diverse. Each are inspired by a programming language. Ruby is easy to get along with and quick to act, though she maybe thinks a bit slower. Java works a lot with hardware, and Cici has a great memory and loves to read.
Structure
Rubygirl consists of comic panels, short animation clips, and an interactive code puzzle portion. I aimed to make the comics and animations bright, colorful, and dynamic. Images pop out of the rectangular comic panels, and looping animations liven up the comic panels. I really wanted the story to be fun and interesting, not just another skin over a top a coding tutorial. By participating in the story through the puzzle, the reader can feel more connected to the girls and invested in their conflict.
Feedback and Iteration
At my capstone fair, many people enjoyed the cute drawings and wit behind the story. People without any coding experience were able to get through the interactive code when I read the code out loud in plain English terms. Since I can not be present to readers online, the summer after my capstone fair, I added explanations for each line of code when you hovered over it. I also implemented a popup for additional feedback and explanations for why an answer was incorrect or correct after a reader clicked on one. On the few elementary-age children it's been given to, Rubygirl is so far kid-approved.
Chibird ♥ Nutella
I was contacted by Ferrero to put my artwork on a limited edition 50th anniversary Nutella jar. The jar mockup is for a collectible glass jar found in Europe.
Problem: Women computer science students didn't feel welcome at other hackathons, which are overwhelmingly full of men students and "bro" culture. Women in tech still face discrimination and drop out of tech at alarmingly high rates.
Solution: Technica is the first women's hackathon at the University of Maryland, providing an exciting and welcoming community for girls and women to explore , learn, and build tech. I served as the Design Lead for 2015 and 2016, working with a team of student designers to bring Technica to life and make creativr and beautiful designs. In 2015, Technica was the first hackathon for 40% of our attendees, and 20% of hackers were high-school students. In 2016, we became one of the largest women's hackathons with over 800 attendees.
Work
The design team worked on everything from web design to social media to physical product design. 20 Days of Technica was one of our popular social media campaigns with a new graphic every day leading up to the event.
2016 - The website: gotechnica.org.
2016 - Promo graphic for 100 days.
2015 - 20 days of Technica, dot characters.
Branding
Key elements of our branding include the font DINPro Bold and the gradient from cyan (#00fff) to pink (#ff7bac).
The first year, we wanted to soften the original branding- which seemed cool and intense, but not welcoming or friendly enough for first-time hackers. The dot characters were our way of attracting a wider range of attendees. They were really popular in our social media posts and became the mascots for 2015.
2015 - Dot characters brought to life.
2015 - Physical bags, shirts, stickers, and dot plushies.
Wushu Design
Company:
TerpWushu, UMD
Date:
2015, 2016
Skills:
Graphic Design
TerpWushu practices traditional Chinese martial arts. I was asked to design posters and shirts for their annual competition.
League of Legends
Company:
UMCP LoL
Date:
2015, 2016
Skills:
Leadership, Graphic Design
As Art Director for our League of Legends club, the largest gaming club on campus with over 1,000 Facebook members, I created some promotional posters for our club's events. Artwork from League of Legends.
Problem: People think a hacker is a guy in a hoodie who has been coding since 2nd grade and downs energy drinks in order to keep hacking throughout the night.
Solution Show that anyone can be a hacker. At Spectra, I undertook a solo project to re-define what a "hacker" looks like. I spent less than 8 hours (the entire length of the hackathon) illustrating and coding up the site and ended up landing in the Top 3. The project serves as proof of my ability to quickly prototype and develop an idea that truly connects with people.
Hackers can customize their hacker to represent themselves.
Motivation
While my previous project Rubygirl was intended to show younger girls that computer science existed and was fun and cool, this project was driven by the idea that everyone and anyone can be a hacker. The typical stereotypical hacker is a male in a hoodie, chugging energy drinks late into the night. This image is something that really affected me and others as well to feel that I didn't belong, and it's part of why hackathons have an image of being unwelcoming. I strove to break that image by allowing users to customize their own hacker- starting with turning on the lights.
Reception and Feedback
Ultimately, I was so touched by the amount of people who connected with my project and understood what it stood for. People had a lot of fun playing around with it, and I was so happy when groups of friends would finish customizing and says "Now that's me!". The reaction was exactly what I had hoped for. One feature that many people thought would be useful is a way to save your custom hacker and share it. If I had a couple more hours, this is definitely something that I would have liked to accomplish, as a way to connect more people to the idea that a hacker can look like anyone.
Marauder's Map
Hackathon:
HackUMBC, Top 4
Date:
2014
Skills:
Mobile, UI/UX Design
Designed an Android app that tracked users on a map of the UMBC campus. Represented different users with floating name tags and animated steps to represent their movement path.
Chibird is my passion project starting in high school. I draw positive, motivational art and animations for hundreds of thousands of people across the world. My artwork has blown up across the Internet, and I've been featured on Tumblr, GIPHY, the Huffington Post, and more.
Emottie, the emotional witch, is a game about a young witch mastering her emotions. You play as Emottie in this first-person 3D game. By controlling your emotions, you can manipulate the environment and solve puzzles to complete levels. Each level has a different trick to it, and many require multiple emotions to solve. Sometimes the effects on the environment won't be entirely obvious. The game focuses on exploration and problem-solving in order to reach the peace star at the end of each stage, helping yourself find inner peace.
Screencaps from Level 1 and Level 2 of the game.
Game Design
The idea of indirectly affecting the environment really appealed to me, especially tying in the abstract feelings of emotions to the character's powers. I focused on the aspects of light and gravity as primary mechanics given the time constraint.
Side by side of two different emotions and example of lighting-controlled gameplay.
Game Dev
My game programming class was my first experience with Unity. I used Blender to build all of the models myself. I coded everything up in Unity and modified the environmental lighting, background colors, fog, and kinematics for each emotion.
Hidden Gems
Class:
Human-Computer Interaction, CMSC434
Date:
2016
Skills:
Mobile, User Research, Prototyping, HCI
Problem: Current recommendation apps like Yelp or TripAdvisor show only the most popular places, which then become overcrowded and overhyped.
Solution: Create an app that re-instills a sense of discovery and only shows locally-recommended "hidden gems" near you. As a semester-long project for my Human-Computer Interaction class, Hidden Gems took us through stages of user research, different stages of prototyping, user testing, and Android development.
Brainstorming & User Research
The original idea was an app that would give you a more authentic, local-recommended experience when travelling. It would only show you "gems" nearby within a mile radius and aimed to promote a sense of discovery and exploration when travelling.
Initial group brainstorming.
One part of our formative research consisted of a survey of about 30 participants about their travel habits. From these survey results, we found that it was very important for individuals to know what type of food was served at a restaurant and how much it would cost for them to go. This information should be clear for every gem. We also found that most people would be willing to walk at most a mile to visit a place they knew was good, so we aimed to show gems within a mile's radius.
The second part of our formative research was interviews. From interviewing a dozen individuals we knew were frequent travellers, our target audience, we found that they had a strong trust for local recommendations. In addition, our interviewees said they enjoyed exploring and trying something new when they travelled, and they would enjoy going to a smaller establishment that might be more unique. This research supported a main motivation and distinguishing factor of our app, which was to promote a sense of discovery.
Our three primary tasks were refined to: finding gems near you, leaving a review, and adding a new gem.
Prototypes & User Testing
We created paper prototypes and tested 2 primary interfaces with our target audience to test user experience for each prototype. Testing showed that the map-interface was very well received. Leaving a review and adding a new gem were all very straightforward and easy to navigate through. Some individuals didn't understand what the different gem shapes meant. The key was very important for them to figure that out. Most individuals liked the pop-up with quick information before navigating into the gem information screen with more details.
Then, we created an interactive prototype in InVision with mock-ups created in Photoshop. Overall, users understood the navigation between screens and could complete all three tasks without trouble. InVision Link
Final Prototype
Landing screen mockup.
Our final prototype was built in Android Studio using a Google Maps API. Our next goal would be to polish the UI, including adding more whitespace, refining the color palette, and updating the graphic assets.
Looking at gems near you.
Leaving a review.
After clicking "Add Gem", submitting details, picking a location, and seeing new gem.
