About

“Far from home dwelt a wanderer looking for a spark of light…”

Hi, my name’s Naomi and in one sense I was looking for a spark of light. I started off as an animation student who focused on how to light scenes. Light and color has held my fascination for a long time because it’s a hidden storyteller. These inseparable elements help to draw the audience into a story they may be watching, heightening dramatic moments, setting the atmosphere, all to get the audience emotionally involved. When I started doing design for my church, I found that the process of designing was much like telling a story. In design you may get only one glimpse to tell your story to the audience, but still a story is told. What is the value of this company? How might this new app make my life easier? Does this company care about children? All of these are stories that are conveyed through visual design, why I’ve been drawn into design myself.

Once I started focusing on design I became a student at Bloc in order to make the gear shift into ui/ux design from animation. It’s been a rewarding experience as I’ve been equipped with a new set of storytelling tools. I’ve learned how, much like lighting is icing on the cake for an animated film, visual design is the icing for good UX design. One has to “write the script,” to make an analogy using animation, before you “design characters and settings.” And much like animation, the way I interpret a design and how other people interpret a design will be much different. So I’ve learned to value research and take time to figure out how other people view life, and apply that to designs I’m working on.

Along the same lines of storytelling, I also create illustrations, particularly focusing on children’s picture books, enjoying the whimsy and imagination needed to tell a young child a story that will captivate them and help them to navigate through life. On the side I dabble in photography, videography, animation, and writing for fun, to grow and express myself in different creative ways. I also consider myself a green thumb, though my plants may disagree, and an amateur film critic.


Since I love storytelling so much, here’s quotes by my two 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.”
C.S. Lewis, 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.”
J.R.R. Tolkien, The Lord of the Rings

Contact

Naomi Hanson

UI Designer & Illustrator
[email protected]

Bay Beans

Designed to help college students find the perfect cafe for studying or hanging out.

  • View Prototype
  • Solution

    The design was inspired by the cafes in the surrounding area that the target audience was familiar with as well as having coffee related colors to reflect the app’s focus. There were several features based on the research that other search sites, such as Yelp, didn’t display. Features that were important to the target audience’s needs have been incorporated on a cafe’s page for quick access.

    Backstory

    A Bloc project in which I worked with my Bloc mentor to research and design a mobile app based on the curriculum’s prompt.

    Process

    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 used in the final design.

    After the research I mapped out the user stories and flows, I found that what the user research showed is that users wanted to be shown a ton of information, in particular different features that would need to be displayed on a single page. Since this was for mobile, it was a matter of how to organize and maybe 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 their layouts. From there I was able to sketch out different layouts of necessary pages and design a working solution.

    Afterwards I did some user testing and found a problem with the how I was designing the filter inputs for the map and list layouts. For the filters, to make it as easy as possible for the user to use the app without an overwhelming amount of text, I started creating icons that could be readable at extremely small sizes. But when I started doing user tests, the testers were confused at what the icons represented, such as the case for the “Amount of Seating”. The testers were confused, able to register that the icon was a chair, but 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 do.

    Logo Process

    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 button logo, these complex designs simply did not work and became nothing more than fuzzy blobs at these smaller sizes. So I started going for simpler shapes to represent the app.

    I started taking inspiration from the location of my target audience in the San Francisco Bay Area, began trying to incorporate the Golden Gate Bridge into the logo. Most of the designs still appeared too complex to be able to read properly at smaller sizes. Eventually I started settling for the 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 standalone logo. But it was for good reason. After bouncing ideas off of a fellow designer, we came to the conclusion that the coffee bean by itself was plain, and generic, not really able to stand out on it’s 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 using the Golden Gate Bridge with the coffee bean. It added uniqueness to help the logo stand out, worked at smaller sizes, and was still recognizable as a coffee bean according to a user test. After a few more tweaks this iteration became the current logo.

    Conclusion

    Overall, this was a good learning experience. One of the biggest lessons I learned is that what I perceive and what the user perceives is completely different and thus the importance of careful research and testing in order to create a user-friendly design. The research drove a lot of the important decisions I made including refocusing the project onto 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 from the beginning the goals of the app.

    On the other hand I think sections like the cafe’s menu needed more time and attention paid to it. 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 made into sections with bold headings.

    Compassion Fund

    Designed to raise awareness of various causes & needs around the world.

  • View Prototype
  • Solution

    Pass #1: Use pictures of people to invoke sympathy and compassion.

    Backstory

    A Bloc project in which I worked with my Bloc mentor to research and design a charity crowdfunding website.

    Process

    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 a lot of reflection on what I could have done differently. I’ll also be talking a lot about my process with the idea in mind to show you how I worked, not necessarily how successful it was, and thus how I’ll work differently from now on.

    Description: I started out by sending out a survey to gather information from potential users.

    Mistake #1: I think the first misstep of this project was that I didn’t clearly define 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 angle to come at it to my client. Perhaps this project could creating a charity crowdfunding platform aimed at schools and other educational programs 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 scope of people I was distributing the survey to, I distributed this survey to a far larger audience. The impression that I got from this 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 to do further research, I instead moved on and took what little information I had gathered and began the design phase. This was a bad move because essentially after discovering how few people responded, the information I gathered was essentially useless to accurately represent many people.

    What I’d Do Differently: Next time, I would take the time to research a solution to “How to Get People to Care” THEN doing another round of surveys for a charity crowdfunding platform.

    Description: Following this round of user research I began research 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 UX I would do differently so it would be easier for users to navigate. While it did help to generate my own layout ideas, the other information would have helped inform my design as well.

    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 legit? As I looked into 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, inspiring my own budget breakdown inclusion. Since the idea is to make it as easy as possible for people to find a charity, and feel reasonably confident they’re donating to a trustworthy organization, I wanted to present key information that would make the charity more transparent, as people in the survey indicated that’s what would make them confident to donate.

    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.

    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 as a way 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.

    Final Thoughts

    In the future I would figure out from the get go what the big problem is that needs to be solved, ask questions like “Who is our target audience?” and “How can I make this stand out in comparison to other products?”. And I would pull in a wider variety of feedback. As I was working with my mentor, the process became more insular, without too much effort to reach out to others, specifically non-designers, to get their opinions and thoughts on the designs.

    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 feedbackthroughout 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 personal, friendly, and trustworthy website.

    Name: Driven by seeing the how few people seemed to care, I believed that the product needed to be able to invoke that desire to help other people (web of words). 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." And 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 the 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, because of it’s geometric form, it gives it a stable, dependable feel that would give 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, not taking up seemingly a lot of space. It’s thinner lines make it less bold and give it an approachable look. Though initially designed for headings and large-size usage, when put side-by-side with Roboto Slab, the two fonts worked 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, but a lighter blue to show that it’s friendly. Yellow was chosen as it naturally harmonizes with blue visually and also because it is associated with happiness, energy, and hope. This was to show that this is a site that is hopeful and optimistic that change can happen.

    Logo: I started off with thinking about how to give the website a sense of a handcrafted feel. I began experimenting with watercolor, which I later incorporated as an element of the overall 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 designs. Through several iterations of these two ideas, I finally stuck with just using a handprint to convey that fundraising for these causes is about the people on the receiving end in order to go for a clear, simple design.

    The C.S. Lewis Collection

    Designed for book-lovers and the curious to explore the many works of C.S. Lewis.

  • Coming Soon!
  • Solution

    Case Study Coming Soon!

    Klesis Fellowship Projects

    Various design projects for Klesis Fellowship at UC Berkeley, including splashes to be projected at events, lanyards given out to members, and forms.

    The Little Robot

    An original reimagining of "The Little Mermaid" with the illustrations done in Photoshop. Printed book was given to Malcolm X Elementary school of Berkeley.

    Color Keys

    Summary

    The Magician's Nephew

    A collaborative project to visually design a look for a potential animated adaption of C.S. Lewis' "The Magician's Nephew".

    Early research and inspiration

    Character Explorations

    Final Character Designs

    Environment Explorations

    Lighting Explorations

    Concept Illustration: The Wood Between the Worlds

    Concept Illustration: The Lost World of Charn

    Photography

    Summary