The Little Robot:
The Magician's Nephew:
Illustrations, Visual Development
Logo Animation Test
Alexa Skill Video
Production, Motion Graphics
UX/UI Design, Branding
Verse of the Day
iOS Cafe Finding App
UX/UI Design, Branding
UX/UI Design, Branding, Front-End Development
Case-Study Coming Soon!
“Far from home, a wanderer longed for the land from which the shadows come…”
Hi, my name’s Naomi. When I was four, I saw the most beautiful cherry blossom tree as my mom drove us home. Looking at it made me feel a sense of awe and an intense longing for something I couldn’t name. Inspired, I pulled out my finger paints and started painting that tree… Or at least attempted to. I was highly disappointed with the result.
In my life, I have felt that very longing again and again; from beautiful art pieces to animated films. I have found that, if I want to invoke this feeling in myself as well as others, storytelling is key. More than the cherry blossom tree, stories have a way of connecting with people’s hearts that is deep and impactful. Stories can even shape their lives.
Since I was four, this inconsolable longing has shaped my journey. It has led me through a variety of art schools and an apprenticeship, filling me with an appreciation of all things visual. It has brought me from Oregon to California, where I’ve run into all manners of stories, one of which has changed my own life forever. It shapes my professional practice, whether that’s illustration or design. And now… I am still on this journey that I’ve been on since I was a child and look forward to wherever it will take me next.
Since I love storytelling so much, here’s quotes by my favorite authors.
“The value of the myth is that it takes all the things we know and restores to them the rich significance which has been hidden by ‘the veil of familiarity.’ The child enjoys his cold meat, otherwise dull to him, by pretending it is buffalo, just killed with his own bow and arrow. And the child is wise. The real meat comes back to him more savory for having been dipped in a story…By putting bread, gold, horse, apple, or the very roads into a myth, we do not retreat from reality: we rediscover it.”
― , On Stories: And Other Essays on Literature
“It's a dangerous business, Frodo, going out your door. You step onto the road, and if you don't keep your feet, there's no knowing where you might be swept off to.”
― , The Lord of the Rings
“About the middle of the plain they sat down to rest in the heart of a heap of shadows. After sitting for a while, each, looking up, saw the other in tears: they were each longing after the country whence the shadows fell. ‘We MUST find the country from which the shadows come,’ said Mossy. ‘We must, dear Mossy,’ responded Tangle. ‘What if your golden key should be the key to it?’”
― , The Golden Key
Illustrator & Graphic Designer
January - New Beginnings
February - Love (of Christ, towards others, etc.)
March - Community
April - Grace
May - Joy!
June - Kindness
July - Freedom!
August - Comfort
September - Encouragement
October - Hope
November - Gratitude
December - Peace on Earth
A Family Stations, Inc. video project targeting main demographic of 55+ years of age. As the in-house graphic designer, I played the role of script writer, storyboard artist, videographer, and editor. Produced under the direction of the Web & Writing Managers, with final approval from the CEO.
This project was first handed to me as a challenge to expand my skillset and give me a chance to work on a long-term project. The Family Radio (FR) Alexa skill was near completion and based on management’s understanding of our target audience, it was decided there needed to be a How-To video to help listener’s properly use it. Once handed the project, I was given a list of commands for the skill required to show in the video and researched similar videos other companies had produced for their own skills. After, I began writing a draft of the script and met with both the Web & Writing Managers to finalize it. Once the script was completed, I storyboarded potential shots and began filming.
While most videos displaying a company’s skill had filmed a person interacting with the Alexa device, I had opted to film a long take of the Alexa responding to the skill’s commands. This was done as a way to make editing the video’s timing easier and allow for the focus to be on simple motion graphics. These motion graphics became key, as they were a way to show the commands in text form but keep an otherwise simple video visually engaging. Also, by having the commands appear as text, it would allow the viewer to follow along with the video with their own Alexa.
After filming was completed, the Web Manager and I worked with one of FR’s radio announcers to record a voice over. We sat in with him to provide direction on timing and tone, as well as make edits to fit with his style of talking while keeping the Alexa commands clear. I began editing as soon as the voice over, and other assets such as music and branding, were gathered, adding motion graphics as dictated by the storyboard. When a draft was finished, I had volunteers from the target audience test to see if it accomplished the goal of being a clear, easy-to-follow How-To video. Once they gave the ok, I sent the video in for managerial and executive approval, and from there it was posted onto FR’s social media accounts and used for email campaigns.
With the help of this video, the customer engagement of Family Radio’s Alexa skill became one of the highest among custom skills, qualifying for Amazon’s Developer Rewards. On top of that the video has gotten 30,000 views as of the end of January 2020, with spikes in viewership corresponding with spikes in activations.
Overall, this project was a good challenge as my manager had intended. It allowed me to expand my skillset into the realm of simple motion graphics and to create a video that still remained within our brand guidelines. With these new skills on hand, I was giving more opportunities to create videos for Family Radio that have now been shown not only on social media, but at conferences FR has attended.
The design was inspired by cafes in the surrounding area that the target audience is familiar with. There were several features based on the research that other search sites, such as Yelp, didn’t display. The features that were important to the target audience were incorporated into the cafe page design.
An apprenticeship project in which I worked with my mentor to research and design a mobile app based on the given prompt.
Originally, the goal of the project was to design an app to find food trucks. During the initial research for this app I discovered that people rarely, if ever, searched for food trucks. It just wasn’t something they were interested in. As a result, I switched gears and started focusing on cafes, as I had noticed that cafes were among the top searched for food places. After switching the focus of the app, I did another round of research and found that users had specific needs when searching for cafes. Since the target audience was made up of college students, they typically went to cafes to study, meaning some of the features they looked for in a cafe were amount of seating, number of outlets, and surprisingly, ambience. These features aren’t a part of leading competitor’s designs, such as Yelp, making it more difficult for users to find what they may be looking for in a cafe. Thus, I decided these user specified features needed to be incorporated into the final design.
After the research phase, I mapped out the user stories and flows. I found the user research revealed that users wanted to be shown a variety of different features that would need to be displayed on a single page. Since this was for mobile, the challenge became how to organize and split different information between multiple pages. I also did research into other mobile apps, such as Yelp and Airbnb, to see how they were able to accomplish this through their page designs. From there I was able to sketch out different layouts of high priority pages and design a working solution for my own app.
Afterwards I did some user testing and found a problem with how I was designing the filter inputs for the map and list layouts. Originally, I created icons representing various filters in order to limit the amount of text needed. But when I started doing user tests, the testers were confused as to what the icons represented, such as the case for the “Amount of Seating”. The testers were able to register that the icon was a chair but were unsure if it meant how much seating they wanted to reserve or was available at that precise moment. It was a case where instead of icons I needed to use words in order to accurately convey what the filter would show.
Another issue I ran into was the app branding. I needed to design a logo that conveyed the goal of the app as well as reflect the aesthetics that typically appealed to the target users. I went through many variations, looking up classic cafe logos to gain inspiration and to harken to the purpose of the app. These logos were typically more complex and detailed, which looked great. However, I found that when these logos were shrunk to be used as the app’s tile logo, the complex designs simply did not work and became nothing more than fuzzy blobs. So, I started going for simpler shapes to represent the app.
I began by taking inspiration from the location of my target audience in the San Francisco Bay Area, i.e. the Golden Gate Bridge. Most of the designs still appeared too complex to be able to read properly at smaller sizes. Eventually I moved towards a coffee bean shape, as it was simple and recognizable. Through some extra research I saw that the coffee bean wasn’t used as much as I thought it would be as a logo in the café industry. But that was for a good reason. After bouncing ideas off a fellow designer, we concluded that the coffee bean by itself was plain and generic; not able to stand out on its own from the many different apps out there.
I went through more iterations of the coffee bean, changing how it was drawn in order to make it more unique. Then I tried combining my earlier idea of the Golden Gate Bridge with the coffee bean. It added the uniqueness I was looking for to help the logo stand out. It even worked at smaller sizes; according to user tests, the shape was still recognizable as a coffee bean. After a few more tweaks this idea became the current logo.
Overall, this was a good learning experience. One of the biggest lessons I learned is that what I perceive and what the user perceives can be completely different. Thus, the importance of careful research and testing in order to create a user-friendly design. The research I did drove a lot of the important decisions made, including changing the goal of the project into being a cafe finder. Through research I added filters that helped accomplish the user’s goals of finding cafe specific features for their needs. The logo was also able to convey to the users the goals of the app.
On the other hand, I think sections like the cafe’s menu needed more time and attention paid to them. The drop down sections in the menu make for a messy and slow process for users to find what they’re looking for. The next time I would make it one long menu with sections defined by bold headings.
Pass #1: Use pictures of people to invoke sympathy and compassion.
An apprenticeship project in which I worked with my mentor to research and design a charity crowdfunding website.
This was a project on which I made many mistakes and learned a lot of valuable lessons about what makes good design. As such this case study includes reflections on how I worked and what I will do differently from now on.
Description: I began this project by sending out a survey to gather information from potential users.
Mistake #1: I think the first misstep was that I didn’t lay down the parameters of this project, including target audience. As such the project itself ended up being broad and undefined. Without understanding who I was targeting, I didn't really have potential users to research.
What I’d Do Differently: Looking at the number of charity crowdfunding platforms, I would suggest a different approach to my client: “Perhaps this project could be a charity crowdfunding platform aimed at schools to assist in school sponsored fundraisers?”
Description: In the initial survey, I found that only 5 people responded in comparison to other surveys where I had 10+ people respond. That’s 50% less than what I was expecting. And unlike previous surveys where I had a smaller group of people I was distributing them to, this survey was sent to a larger amount of people. The impression that I got from the lack of responses was that people don’t really care or have the time to care about the needs of others.
Mistake #2: Instead of lingering on the problem of how to get people to care and conducting further research on this, I took what little information I had gathered to begin the design phase. This was a bad move because the information I had was useless since it was not an accurate representation of my audience.
What I’d Do Differently: Next time, I would take the time to research a solution to the problem of how to get people to care, then do another round of surveys.
Description: Following this round of user research I began looking into the competitors. Most of my research was into their layout: if they used 2-3 columns or what their onboarding process looked like.
Mistake #3: Instead of focusing on what they had to offer, what they did well, and what they needed to do differently, I focused mostly on how things looked and whether there was something in their design I would do differently. While it did help to generate my own layout ideas, the other information would have helped inform my design better.
What I’d Do Differently: Do a thorough competitor’s analysis and gather all related information instead of rushing into the visual design.
Description: As I continued to research other sites, a question came up. How do I know if these fundraisers are legitimate? People also indicated in the survey that they wanted key information about an organization in order to feel confident enough to donate. As I investigated this, I found websites that presented all you needed to know to make sure you were donating to a legit charity. They often had budget breakdowns to show where the money would go to and how much was allotted, which later inspired my own budget breakdown inclusion.
Mistake #4: While this is a good line of inquiry to research, I didn’t back it up with user research besides the initial survey. I designed mainly for myself instead of the user, assuming the user would want what I would want.
What I’d Do Differently: Next time, do more user research. After the initial research of how to get people to care I would then redo the user surveys and do interviews to create user personas, so I knew exactly who I was designing for and what they wanted.
Description: From there I created user flows and sketched wireframes to decide how I was going to arrange the mass amounts of information for each page of the website. When I was designing the wireframes, I gravitated towards including images to humanize the fundraisers. This was my solution to how to get people to care.
Mistake #5: Didn’t back up my solution with solid research.
What I’d Do Differently: Do research to test my hypothesis that images would make people more likely to donate through something like A/B Testing.
In the future I would figure out from the get-go what the big problem is that needs to be solved, as well as ask questions like “Who is our target audience?” and “How can I make this stand out in comparison to other products?”. I would also ask for a wider variety of feedback since the design process this round was very isolated from potential users.
Other lessons I learned:
- Design for the user, not for myself.
- Iterate as much as possible instead of pushing through with a few ideas.
- Get constructive feedback throughout the whole process.
- Always do user tests to get feedback from the target users.
- Don't jump straight into the visual design without first laying down good UX design.
Bonus: Visual Design
Description: I decided to go for a handcrafted touch in order to invoke a sense that this is a personal, friendly, and trustworthy website.
Name: Driven by observing how few people seemed to care, I believed that the product needed to be able to invoke that desire to help other people. At the same time the name needed to convey clearly what kind of website it was about. So, I went for a direct name to emphasize caring for these different causes: Compassion Fund. Compassion means, "sympathetic pity and concern for the sufferings or misfortunes of others." Then I paired it with “fund” to make clear that this is a fundraising site.
Font: I chose the font Roboto Slab as a header for it’s friendly & open curves, as described by its designer, which gives it a sense of a warm, soft look that fits in with the friendly characteristics desired for Compassion Fund. At the same time, its geometric form gives it a stable, dependable feel that would offer users the sense that they can trust this site. For the main text I chose Raleway as it is popularly used as a font pairing with Roboto Slab. Seeing the two together, Raleway looks open, seemingly not taking up a lot of space. Its thinner lines make it less bold, giving it an approachable look. Though initially designed for headings and large-size usage, when put side-by-side with Roboto Slab, the two fonts work off each other to give an overall friendly, non-intimidating look.
Colors: For the colors I went simply with blue and yellow. Blue, because of the association in web design with being trustworthy and dependable, and lighter blue to show that it’s friendly. Yellow was chosen as it naturally harmonizes with blue visually and because it’s associated with happiness, energy, and hope. This was to show that this site is hopeful and optimistic that change can happen.
Logo: I started off wondering about how to give this website a handcrafted feel. I began experimenting with watercolor, which later would be incorporated as an element of the website’s background. As I continued thinking about the problem of how to get people to care and see the human elements of the different causes that need financial help, I started incorporating hands and hearts as part of the logo sketches. Through several iterations of these two ideas, I finally stuck with just using a handprint to convey that these fundraisers are ultimately about people.
Case Study Coming Soon!
Early research and inspiration
Final Character Designs
Concept Illustration: The Wood Between the Worlds
Concept Illustration: The Lost World of Charn