Hey! I'm Mallory, a designer living in the Windy City. I am an Ohio University graduate with a BS in Visual Communication, and an alumna of the UX/UI Digital Design Bootcamp, DESIGNATION.
Currently, I am a UX/UI Product Designer at Pandera Labs where I work on internal and client web, app, and branding projects.
I am an outgoing and fun-loving gal and I LOVE to travel. I have been to 11 different countries and plan to keep exploring. Some of my hobbies include chalk lettering, DIY projects, succulent planting, yoga, volleyball, being an avid Chicago Cubs and Iowa Hawkeyes fan, drinking coffee/wine/beer, and cuddlin' with my two cats.
Branding / UI
UX / UI
UX / UI / Branding
Client & Personal
Web Graphics & Infographics
Logos & Guidelines
Pandera Labs — Logo Design Process & Website Development
INTRODUCTION
Pandera Labs is not your average tech company. By utilizing data and analytics, and applying it to how we design and build, we are able to bring creative, high value solutions to the problems we are presented with. We work closely with our clients and are able to complement their industry expertise with our passion for data and digital. At the beginning of 2017, we began the process of rebranding ourselves from Pandera Systems to Pandera Labs, so that we can further highlight our unique abilities and services, while echoing the standards and quality of the original Pandera Systems. To begin this process, we wanted to start by creating a logo that encapsulated everything we represent and believe in, while also expressing where we originated.
DISCOVER & SKETCH
To start off the design process, I wanted to find visuals that could inspire directions I could take with our logo and visual style. I didn’t want to only focus on logo inspiration, so I looked at a wide variety of illustrations, websites, books, photos, and even symbolic shapes and gestures. I was very drawn to line art styles, and how they overlapped and interacted with each other to create interesting and meaningful compositions.
In my initial sketches, I tried experimenting with a ‘P’ lettermark. While the individual sketches were interesting, they began to feel similar to a sports logo. In our next iterations, I began to play with some circular, spiral marks, reminiscent of the original Pandera Systems logo. While this original logo felt very clunky and ‘snail shell-esque’ to us, I liked the symbolism of the spiral, which represents birth, development, and expansion.
I also began to outline what kind of ideas I wanted to represent within our logo for Pandera Labs. This included gathering insight from the whole Pandera Labs team about what the company means to them, which I compiled into a little ‘word-cloud’. Some of the most popular ideas thrown out were things like ‘building’, ’motion’, ‘creation’, ‘incubation’, and ‘growth’.
WORK IT & SHOW IT
At this point, I began to vectorize some of my sketches and started introducing a few different color palettes. I would then share some of the different versions with the whole team at intermittent reviews during the process. Now as most designers can attest to, getting everyone to agree on one particular design or idea can be a challenge, but our team was spectacular in voicing their opinions and really showing a passionate interest in how our company was going to be visually showcased.
In our first iteration of the circular/spiral visual, I wanted to combine lines and dots to create a sort of ‘data points’ feel, but I was concerned that it was a bit too busy and didn’t fully articulate all of the things I wanted to represent in our logo. In addition to editing this circular version, I went back and sketched some more and played with a few other shape treatments that share similar ideas of development and growth, but would act as a good contrast to confirm the direction I had been working in was the right one.
After meetings with the whole team and reworking different versions, I was able to narrow down to three final variations and one color palette. They each came back to the circular motion style, but in different executions.
By far, the overall favorite was the simplified version of our initial circle/spiral visual. In the first iteration of this, it was too complex and wouldn’t have translated well at a smaller scale. In my second iteration, it was still a bit too busy, but I got closer to fully representing what makes up Pandera Labs, with the five dots representing a specific quality or section of the company. In the third and final version, I ditched the dots and transferred their various colors to the lines that made up the circle mark and thicken them up a bit. It became a lot bolder and stronger of a visual, and while I will still be using the line + dot ‘data points’ combo in some of our other branding visuals, for our logo this treatment will allow it to be scalable and still be really attention-grabbing.
At this point I was also able to experiment with some different typography treatments, and landed on the Google Font, Poppins. With it’s round shapes and counters, it complemented the circular logo well without being distracting or cumbersome.
THE RESULT
In our final logo, “The Pandera Helix”, each color and layer has a specific meaning. The red line represents Analytics. It is at the core of our company and what our solutions are built upon. The cerulean line and aqua line represent Development and Product Design. These two facets work together in building and creating the solutions our clients need. And the blue line represents our Operations section, which supports the other areas and provides the guidance and efficiency for the others to function. In addition, the three layers of the helix represent the three services that Pandera Labs offers to prospective clients; Advisory, Product Development, and Data Science.
MAGIC MOVEMENT
Throughout our process, I also began to experiment with animations, to really drive home the idea of movement and growing. In the animation below, I was able to visualize the gradual growth from the inner layer to the outer layer. This type of visualization was important to me to really showcase the connection to the original spiral of Pandera Systems, and how the spiral represents development and expansion.
The Pandera Labs logo beautifully embodies all that we do and believe in. It is a clean and bold composition that is eye catching and colorfully exciting. It is an identity that everyone on the Pandera Labs team had a hand in building which makes it all the more meaningful.
Public Good — UX & UI Design Case Study
INTRODUCTION
Public Good has created a feature called the "Take Action" button, where an individual who has read a news article and feels compelled to contribute or change the story can easily be connected with causes and nonprofits in that moment of motivation.
THE PROBLEM
Initially, the T.A. (Take Action) flow was very limited (shown in the example below). Once the user clicked the T.A. button on the article and came to Public Good, there was nothing driving them to continue. My goal was to provide easier ways for the user to donate to nonprofits involved in the cause, or proceed with other options if they didn’t want to donate money.
THE SOLUTION
I had done multiple small iterations on the T.A. flow, but in these iterations the only action a user could take was to donate money, which could drive away many who may be wary of an unknown website. My solution was to create three distinct, equal options that the user could explore, without feeling that monetary donation was the only thing they could do.
THE PROCESS
1. COMPETITIVE ANALYSIS To begin my process, I wanted to research what successful nonprofits were doing on their websites that drove users to be involved. I explored the World Wildlife Fund, the ASPCA, and the American Red Cross.
Here are some of my common findings:
2. USER FLOWS My next step was to visualize the possible different flows a user could take, to ensure that the T.A. experience is cohesive. This is the final user flowchart I designed.
3. SKETCHING & WIREFRAMES After establishing the user flow, I began to sketch out lo-fidelity mockups of the T.A. flow, and then developed those further into hi-fidelity wireframes.
4. USER TESTING To test my wireframes, I interviewed a variety of testers, including a low-tech individual, a high-tech individual, an active nonprofit donator, and some of our media partners who feature the T.A. button on their articles.
Here are some of my common findings:
THE RESULT
After testing with users and updating specific elements, I came to this final version of the Take Action landing page. Users immediately see what the cause is, and are presented with three options to take action. If they want to learn more, they are able to continue scrolling for more in depth information about the cause and Public Good. Check out the video below to view the full experience.
FRIENDLY FEEDBACK
After shipping these updates to the T.A. flow, I sought more user feedback through the sites, User Testing and UsersThink. Below are a few quotes from the users tested on what they thought of the Take Action experience.
DESIGNATION — UX & UI Design Case Study
THE PROBLEM
Online learning can be a challenging experience for many. Between finding time and motivation to complete courses, to keeping up with instructors and retaining information being taught, it can be a difficult process. My team was tasked with finding a solution and creating a platform that caters more fully to the user's needs.
THE SOLUTION
Online students need a place to acquire skills by applying them to real-world projects and receiving constructive feedback on how to improve. Students need a place they can go to learn design that is interactive and engages them consistently through the use of critique and exercises.
THE PROCESS
1. COMPETITIVE ANALYSIS To start off our research, we compiled the top online learning platforms and compared them across multiple factors, such as subjects offered, content quality, price, and class type.
Here are some of our key takeaways:
2. USER PERSONAS After user interviews, affinity mapping, and competitive analysis, we developed two user personas to identify who are user-types might be.
Our first, Ana Riley, is a recent college grad who is looking to improve her skills to gain career opportunites in the digital design field. Our second persona, James Maven, is a casual user who wants to learn more about design as a hobby.
3. PAPER PROTOTYPING Once we understood who the users are and what their needs are, we began creating paper prototypes and testing them with users to see the things that worked and didn't work.
4. SITEMAP & WIREFRAME After user testing our paper prototypes, we developed a sitemap and wireframes for the user flows we wanted to focus on, created in Axure.
To view the full wireframe, check out this Axure link:
SEE WIREFRAME
5. STYLE & LOGO EXPLORATION To brand our learning platform, we explored many options for names through word mapping and research. Through our explorations, we found that bees are highly intelligent animals, who not only learn how to overcome obstacles by doing, but they can actually learn by watching others as well. This is the sort of mood we wanted to set for our learning platform. Beo, the Old English word for bee, is a unique twist that represents the spirit we wanted for our platform.
After group brainstorming we decided to refine my designs and landed on the honeycomb hexagonal pattern to represent the bee's work and the building blocks of learning.
THE RESULT
Once our group completed the wireframes and branding elements, I began our hi-fidelity mockups of key screens for Beo, which include the Landing Screen, Profile, Course Lesson, Course Challenge, Project Page, and more. I then took these screens into InVision to create a clickable prototype. Here are a couple of the final screens below.
LANDING PAGE One of our most important screens is our landing page, the first screen the user sees. I wanted it to explain Beo's mission, and include prominent calls-to-actions and incentives for the user to experience the system. Hover over this image and scroll to see the full page.
COURSE LIST Our course list, also known as The Honeycomb, is a place where users can explore a variety of courses and projects. I chose to create the unique hexagonal pattern to reinforce our branding. The courses are organized by level of difficulty.
STYLE GUIDE Below you can scroll through the style guide I developed for Beo, which includes elements such as colors, typography, logo usage, iconography, as well as UI elements. Hover over this image and scroll to see the full page.
A mix of professional & personal icon sets, showcasing a variety of styles & topics
"TRAENA ICONS" Presentation icons to represent different aspects of the new Traena app developed by Pandera Labs (Our Team, Our Experience, Our Vision, User Experience, High-Tech Delivery, & On-Demand Expertise) — March 2017
"WHO WE PARTNER WITH" Icons for the Pandera Labs website that represent the variety of companies we work with (small, medium, and large) and what those companies' goals are — May 2017
"PUBLIC GOOD ICONS" Categorization for the nonprofits & causes on Public Good (Icons: Arts & Culture, Animals, Environment, Health, Religion, Education, Human Services, Global Affairs) — August 2016
"PATTON ICONS" Ohio University Patton College of Education (Icons: Graduates, Professors, Students, International, Community) — March 2015
"MALLORY HAACK DESIGN" Iconography representing my skills and abilities — March 2017
"DRUG ABUSE CATEGORIZATION ICONS" Ohio University (Icons: Prescription Drugs, Tobacco, Opiates, Alcohol, Stimulants) — March 2015
"ESSENTIAL OILS" Personal practice (Icons: Jasmine, Eucalyptus, Lavender, Lemon) — June 2016
"Take Flight" Line experimentation with 'flying' objects — July 2016
Landing page graphics, advertisements, infographics, etc.
"PANDERA LABS SMART CITY" Based on the idea of the "Internet of Things", this 'smart city' illustrates the connectivity of smart people, to smart cities, smart homes, & smart technology — June 2017
"PANDERA LABS LINKEDIN" Eyecatching illustration for a LinkedIn job posting, which features personalized touches of company culture (ie. La Croix, Norman the dog, Chicago) and showcases what key technology knowledge is needed with the laptop stickers — March 2017
"A MENTOR IN YOUR POCKET" Line art illustration for the Traena website hero — March 2017
"TRAENA ON THE TRAIN" Graphic for the Traena website that represents the app being used anywhere at anytime — March 2017
"LEATHERBACK TURTLE" Infographic & watercolor illustration, Ohio University — April 2015
"CRICKET FOR THE UNTRAINED AMERICAN" Process infographic, Ohio University — March 2015
"TAKE ACTION ADVERTISEMENT" Public Good — July 2016
Variety of logo styles & clients
"Pandera Labs" Logo design & brand guideline — February 2017
Brand Guide PDF
"DEWITT LANES" Bowling alley in DeWitt, IA — January 2017
"PATTON LOGO" Ohio University Patton College of Education — September 2014
"Beo" Logo for creative learning website — August 2015
"FANGLE MAGAZINE LOGO" Student-run publication, Ohio University — February 2014
