Web UX & UI
Branding Case Study
Mobile UI & Visual Design
Branding Case Study
Web UX & UI
Illustration & Conference Assets
Marketing & Education
Various icons and illustrations
Personal Project
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.
Most recently, I've been working as a UX/UI Product Designer at a consultancy in downtown Chicago, where I've collaborated closely with clients and my internal team of interaction designers, product owners, and developers on desktop and mobile applications, and responsive websites. In addition, I've been able to lead a variety of branding, marketing, and illustration-focused projects as well.
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. In my spare time, I illustrate artwork for kids, design wedding and baby shower invitations, play in a beach volleyball league, eat an ungodly amount of pizza, and enjoy cozying up on the couch with my cats to watch Game of Thrones.
Pharmaceutical Client — UX & UI Design
INTRODUCTION
A client I was able to work very closely with is a global, research and development-driven pharmaceutical company committed to bringing better health and a brighter future to patients. One of the many projects I've collaborated with them on is an internal iPad application, the Resource Allocation Tool. This app is used by pharmaceutical representatives to monitor and control allocations of samples and expense budgets to other reps and doctors.
This application was initially a developer-designed tool, and after I started at Pandera I had been working within the previously designed interface for a few months, making small updates and additions as needed. When the client introduced a new large piece of the application they wanted to collaborate with us on, I wanted to take that opportunity to redesign the interface, while also taking stock of the experience as a whole and make some minor updates there. The end goal was to improve user efficiency and visual appeal of the application.
REQUIREMENTS & IDEATION
The first step was to discuss and define the goals of these users, and what elements I needed to cover in the designs. I started by defining the basics of what the user needed to do in the app, and went through the process of whiteboarding, sketching, and wireframing.
FINAL DESIGNS
In my final designs, I wanted there to be a lot of consistency in the visual language across the application. One of the biggest visual elements I implemented was the horizontal progress bars, for tracking both budget usage and sample allocations.
Additionally, I made some big changes to the left hand navigation menu. To allow more screen real estate for the data visualizations, I designed the menu to be retractable, but still usable when it's in the closed state. I also took the time to design new custom icons to add to the visual appeal of the app, especially with the icon-focused menu.
FRIENDLY FEEDBACK
After shipping these updates to the resource allocation tool, I sought more user feedback from the stakeholders and reps who would be using the application. Below are a few quotes from some of the end users...
Case Study — Brand Design for OR Schedule Optimization Tool
INTRODUCTION
Forth Phase is an operating room scheduling optimization tool that leverages machine learning and deep industry experience to improve patient experience and increase revenue for hospitals and clinics. I collaborated with the Forth Phase founders, two leaders in the healthcare and wellness field dedicated to improvement in the industry. The goal was to define the brand voice and its style, and create a logo that would embody it.
BRAND DISCOVERY WORKSHOP
To start off the project, I conducted a full day workshop with the Forth Phase team, my experience-design lead, and two stakeholders in the company. We conducted several exercises, such as the Brand Deck, value charts, and image explorations to gain an understanding of what the brand and style could represent, and what it should not.
SYNTHESIS & CONCEPTS
After the workshop, I put together a deck to synthesize the information we gathered, reiterating which values and imagery the team thought best fit with their ideal brand. I then developed visual style concept directions we could take that tied back to those values.
SKETCHING
In addition to exploring visual styles for the Forth Phase brand, I brainstormed and sketched out a large collection of logo options. With some of these options, I worked on a classic monogram style; for others, I wanted to explore the origins of the Forth Phase name — the 'four phases' of surgical scheduling (Block Utilization With and Without Release, Out of Block Time, Total Block Time, and Operating Room Utilization).
REFINEMENT & COLOR EXPLORATION
At this point, I began to vectorize some of my sketches and started experimenting with a variety of color palettes. I would then share some of these versions with the whole team at intermittent reviews during the process.
After meetings with the whole team and reworking different versions, I narrowed down to three final concepts with variations for each, and one color palette. These each came back to the 'four phases' representation, but in different executions.
Additionally, I began to experiment with a variety of typography treatments. I was able to collaborate with the Forth Phase team virtually between our weekly meetings to share different options through the web app Mural.ly. With this tool, the Forth Phase team was able to provide input on styles they didn't like and those they thought might fit the Forth Phase brand.
FINAL RESULT
In the final logo, “The Forth Diamond”, each of the diamond faces represents one of the four phases of the OR scheduling tool; Block Utilization With and Without Release, Out of Block Time, Total Block Time, and Operating Room Utilization. Each face connects and works together to form a cohesive and efficient whole.
BRAND GUIDELINES
I compiled a set of guidelines for logo and identity use, including color palettes and typefaces, so that future contributors will have clear instruction on how to use the logo. The brand book includes sections on the logo's structure and specifications, color and monochrome versions, and potential business card designs.
FUTURE CONSIDERATIONS
In addition to finalizing the Forth Phase brand and logo design, I began to work on a few user interface mockups based on the prototype they currently had. These mocks show the potential use of the brand elements in the UI, while also illustrating some considerations for data visualizations. As Forth Phase grows in the health and wellness industry, I hope to continue my work on the UI, as well as contribute to how the brand will be used and improved upon.
Iconic Hot Tub Manufacturer — Visuals & UI Design
INTRODUCTION
In Fall 2017, I had the opportunity to work with a globally recognized hot tub manufacturer, to help design and develop the mobile application for their 'Smart Tub' — a new line of hot tubs that utilized IoT technology.
Myself and other members of my design team worked together to create a mobile application that would work in line the client's various related brands, while also showcasing a new, modern technology and product line in the client's hot tub arsenal.
MOODBOARDS
To start off the project, I put together a few moodboards to begin conversations with the client on what kind of visuals might work for the smart tub. My first moodboard is full of very cool-toned, refreshing visuals. The second is similar, but uses warmer tones to convey comfort and coziness. And the third is a darker visual aesthetic, with a single accent color for a minimal but luxurious feel.
After meetings with the client, we conducted a second moodboard round, with elements from the first and third moodboard combined. One thing we discussed that really drove the visuals of the app was what scenarios the customers would be using this app. In most cases, the user would be using their hot tub in dark settings, likely end-of-day relaxation or during parties with friends — so an app with a bright white background would be harsh on the eyes in that setting. With that in mind, the client liked the darker background and contrasting accent color of the third moodboard, but wanted to see how that could be used with the cool-tones of the first board.
TEMPERATURE DIAL DESIGN
As one of the most important and central elements of the app, the temperature dial was a large focus of the visual design. I spent a lot of time sketching and refining the dial to fit with the aesthetic that the client chose, while ensuring that it was easy and intuitive for the user.
FINAL DESIGNS
Pandera Labs — Logo Design Case Study
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 would 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 thickened 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.
Financial Data Analytics Company — UX & UI Design
INTRODUCTION
A leading international financial data analytics who helps businesses automate complex operational decisions like loan qualification, creditworthiness, and higher education admissions by connecting decision models to data sources & API’s, collaborated with my team on a decision flow tool to aid analysts in creating new decision modeling processes.
REQUIREMENTS & IDEATION
Collaborating with my Lead Interaction Designer and Product Owner, as well as the client's data scientists, we were able to define and map out the story of what the user could accomplish in this new system. We also threw in a few errors & obstacles to illustrate how the user could react inside of the tool.
FINAL DESIGNS
Leading up to the final designs, I found inspiration in a variety of creative tools, like video timelines, code editors, and design tools such as Mural and Sketch. Throughout the interface, I created custom elements such as the iconography used in the menu and data tables, as well as the shapes used in the decision flow builder.
Pandera Labs — Illustration & Conference Materials
INTRODUCTION
In May, 2018, Pandera Labs was invited to participate as an exhibitor in Chicago Connectory's Connexion IoT conference. For our booth, we created a series of assets to accompany our 'Data Stream' demonstration. One asset was a pamphlet with a description of what we were exhibiting and a high-level, conceptual illustration to visualize the data stream process. Below I've listed the various steps illustrated.
1. Data Input — Data from smart devices flows into the data stream.
2. Monitor & Process — Program actors process data, loops feedback to devices, and acts in response to significant events.
3. Data Analytics — Data streamed to the API is analyzed and able to continuously refine quality and efficiency.
CONCEPT SKETCH
ADDITIONAL ASSETS
For a more technical explanation, check out my colleagues' blog post about building the data stream demo: Making a Cardboard Piano Talk to the Internet.
Articles & cover art by Mallory for Pandera Labs
"Beyond the Interface: The Layers Beneath the Visual" A high level examination of the design process and its importance — March 2018
Read Beyond the Interface
"Dilligently Designed Data: Your brain & the balance between information and graphics" A look into the history of information graphics and data visualizations, and how to combine graphics and data for optimal reader comprehension — August 2017
Read Dilligently Designed Data
"Logos, Labs, & Lessons" A personalized case study detailing the design process of the Pandera Labs logo — April 2017
Read Logos, Labs, & Lessons
A collection of icons & illustrations
"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
"LANDING PAGE PORTAL LINKS" — September 2018
"BIRTHDAY PARTY DINOSAURS" Work in progress illustration pieces for my nephew's first birthday party invitations — March 2019
"HOUSE METAPHOR" An illustration from my blog post, Beyond the Interface, where I explore the relationship between engineering, user experience, and user interface design — March 2018
"EARTH'S ORBIT ANIMATION" — April 2018
"PANDERA LABS PROCESS" Presentation icons to showcase the different stages of our process (Discover, Launch, Grow, & Maintain)
In addition, Discover & Launch have expanded versions to pinpoint different areas where clients can begin the process with Pandera Labs — July 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
"GET GOING WITH DATA SCIENCE" Seamless pattern created from custom-designed icons for Pandera Labs' data science blog series — September 2017
"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
"PANDERA LABS BLOG COVER IMAGES" Various images created for Medium articles produced by Pandera Labs employees
Choice Architecture by Zeke Franco (3 part series) — July 2018
Terraform: Both Tool and Teacher by Adam Edwards — July 2018
How to Build a Software Development Team: The MVPT by Ryan Redmann — February 2018
"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
"HOLIDAY GREETING CARD 2017" Christmas cards sent to close friends and family, featuring my two cats, Buster & Tye, looking out the apartment window at our view of the Chicago skyline — December 2017
"HOLIDAY GREETING CARD 2018" This past Christmas' holiday cards sent to close friends and family, featuring my two cats, Buster & Tye, building their snowcatman in front of the Chicago skyline — December 2018
Personal Project — MadeByMalHaack
INSPIRATION
In November 2017, I found out I was going to be an aunt for the first time. And although my sisters and I live in different states, we're all extremely close, so we were ecstatic that we'd have a new member joining our family soon. I wanted to give my new niece or nephew a really meaningful gift, so in the months leading up to their arrival, I put together my largest illustrative piece, the Animal Alphabet. I've begun selling this on Etsy as well, and have created additional pieces since. I'm glad that my nephew will get to grow up with pieces of art I created always near him, and I hope that by sharing my work on Etsy it can bring other families and kids joy.
ANIMAL ALPHABET
DINOSAURS
View Etsy Shop
