If you ask my mom, she'll say a millennial who spends too much time on her laptop and not enough time at home.
Ask me, and I'll say a UX/UI designer who believes if I'm not delighting I'm not doing my job. I believe if a tax filing service can delight, so can an intranet CMS or a B2B retail site or a period app.
With so many options, users won't engage with something that doesn't make them happy.
Empathy always at the core, my psychology and journalism background drive my passion for human-centered design. Simply by listening and caring, I believe it's here we can change lives.
Travel.er was an app grown in a user-centered design course.
Challenged to envision a tool for the modern Chicago traveler, our team brainstormed an itenerary-generating concept before supporting it with extensive user-research, informed wireframes, and a functional prototype.
The foundation of good design, our research included a look at both qualitative and quantitative data. To better understand the travel industry, we analyzed user trends, conducted a landscape survey, performed ten coffee-shop interviews with a verbal card sorting, and carried out a root & cause analysis based on our findings.
Per our research, we saw 85% of millenial users check multiple sites before booking their travel to get the best deal possible. Concentrated around hotel and airline apps, users fill the human-review gap with sites like Yelp. We identified issues with the Yelp-like process Travel.er could address.
During our research we identified a few key friction points, like a fragmented experience, an overwhelming number of choices, and a time consuming process.
Even worse, once we started our interviews we realized users were busy. "Busy" wasn't clear enough though, so we broke the concept down into a few categories, like rigid restrictions, "FOMO" and planning haters.
New Information in hand, it was time to put it into action.
The first step was to organize our interviews into personas. These ranged considerably, moving from a social explorer to a business traveler, from a fiscally concious mom to a city-locked getaway planner.
Casting such a wide base helped ensure a useful and intentional representation.
After crafting and analyzing our personas, our group conducted a brainstorming session to pull out key brand associations to bring into our interface.
These associations - effortless, icon-driven, bold, fresh, and social - were guiderails to our user-flows and wireframes.
Moving our personas through our wireframes, we noticed a few things.
The first was that to ensure goal one - the affirmation of a modern traveler identity - we needed a bold and effortless interface. We alligned to this with fresh iconography and a fun UI.
The next was a need to limit the user time on the front end. Getting to the profile landing page immediately after signup was important for people interested in planning a trip, but not ready to do so yet. We found reducing this onboarding to be a good general rule.
The last was that the use of implicit memory, employing a nonlinear user experience, was of the moment, and could contribute to our modern aesthetic.
These implementations are featured in a functional prototype below & linked here.
While this process may seem...well...seamless, there were plenty of hurdles.
Our team was based out of the midwest but came from all over. This meant there were no in-person meetings. All interviews and card-sortings were done independently and then put together, analyzed over BlueJeans sessions and conference calls.
This also applied to our tech, where we colaborated on user-flows, wireframes and the final prototype from miles apart.
If anything this meant we had to be more intentional with our communication. Clarity matters more when your team isn't down the hall. Teams like this are a reflection of our modern economy, and good practice for remote work.
End Rape on Campus is an organization dedicated to ending sexual assault. Their targeted audience: survivors, policy makers, faculty and most directly, students on campuses across the nation. Founded in 2013, their digital reach has grown every year, meeting over 40,000 people online in 2016.
But there was a problem. Their site was overwhelming, awash with content that didn't fit the instant needs of their users. Worst of all it wasn't mobile-first, and struggled to meet students where they were native.
As part of Susan Mango Curtis' Graphics and Design course, we were tasked with widening their reach to include a younger and more diverse audience.
Cast specifically as the group's mobile UI designer, my first task was comparing EROC's mobile layout to similar sites. RAINN, the Rape, Abuse & Incest National Network's site did a lot of what we wanted. Although it was story-focused it did a great job providing context, giving the cause a face and calling its users to action at the same time.
Compared to this, EROC's site was less descriptive. Save for the name on the nav bar, it offered few indicators of the organization's goals.
Inspired by these differences, we broke our site overhaul into a few categories.
One of the most important things we addressed was tone.
In informal interviews with students, faculty-members and survivors of assault, they all mentioned the sensitivity of this material. Affirming our sensitivity would help EROC tell users "we understand you, we believe you, and we're on your side."
We brought this constant affirmation into all of our design considerations.
Color was huge. We chose the teal not only because it is the main color of EROC’s website, but because it is the color of assault awareness. Their teal was a little harsh though, so we lightened it to give a softer feel.
We discussed choosing brighter pinks and reds to compliment the teal, but decided to go with a soft pastel orange and peach instead. The less-gendered shades were useful pops of color, helping to direct the eye through our navigation.
We had similar thoughts about fonts, choosing Source sans and Nimbus sans for their scalability, boldness, and authorative voices.
Color, tone, and fonts in hand, we began creating.
Our first revision was the logo. The main goals of this were to incorporate our new palette, soften the lettering, and get across the unified efforts of EROC to end sexual assault. In displaying a male and female outline, we communicated that EROC didn't view this problem as gender-exclusive.
The initial mobile structure bucketed their content into a "laws, get support, bring to campus, and donate" section. This felt incomplete. By instead moving to a more user-based hierarchy - a "services, laws, take action, and about us" section - we could accomplish more with less ink.
The flow changed slightly during wireframing, moving the "Dear Betsy" section into the hamburger menu and the donate button onto the nav bar.
Revisiting the same interviewees with our new wireframes, the first thing they noticed was a change in navigation. As it goes, some of them got lost and struggled to find what they needed. We tightened our copy and shifted some content to address the issue.
All that was left was to flesh out the wireframes, bringing in the information, introducing our palette and attaching a hero image to a more high-fidelity mockup.
These implementations are featured in a functional prototype below & linked here.
Finding a unifying voice in such a large group was probably our biggest battle. It's one thing to find the tone, but making sure our corresponding social, video and audio efforts were on the same page was another.
This got better as the project moved on and our team gelled, but the slow start likely cost us a design sprint or two.
We also had limited time with our client. I reached out independently with questions, but at no point did we meet with them in person, presenting our final remodel on Skype.
Like any challenge, these made me better and I'm grateful for them.
Ask a Journalist was an app designed in my first course at Northwestern. The goal: create something that would simplify journalists' hectic schedules and enhance their reporting.
This in mind, we envisioned a categorized messaging system that would connect journalists of all skill levels.
After an initial brainstorming session, we knew our concept but not much else. Before anything started, we needed to know how what we created would apply to our user's goals.
Mapping a strong experience meant more than understanding how they used the app though. Instead, we were interested in the role the app would play in their lives.
We interviewed six journalists, asking them to self-assess on the behavioral variables above. These variable rankings accompanied questions about demographic info like age, gender, and occupation as well as questions related to individual experience, life and end goals.
We knew creating a platform where journalists could communicate wasn't unique, so we tried to differentiate. To avoid timely and sometimes uncomfortable social media stalking, our app would incentivize contributors to respond, both financially and reputationally.
This became part of our Hooked path, taken from Nir Eyal's book on building habit-forming products. Closely tying the variable reward - cash, likes, or comments to advice - made a lot of sense for us.
Interviews done, we began creating our informed personas. Anthony Bryant was one, featured for his work style, age, gender, and educational background. Our team affectionately called him "Tony B."
Walking Tony through a storyboard helped us visualize his process. This exercise provided one path of minimum viable product for Ask a Journalist.
From here we could design.
As you'll see in the wireframes above, our biggest challenge was designing a familiar, usable interface that limited friction for our personas.
This meant a simple bucketing, linking to just a home, favorites, share and more page. The goal of favorites was to encompass many things, like conversations and connections, by relevance and importance. The two-tone UI helped draw users to these correct sections, while assisting a modern feel. We added bold iconography on the bottom nav to really get it there.
The first and most significant challenge was scope. We weren't assigned to create an entire mobile experience, but rather to consider the app as a product and highlight a few screens.
This meant time spent designing valuable processes - how a user would onboard, purchase advise, etc - was swapped for a business plan.
At the end of the day this probably hurt our design but helped our idea. As CX and business thinking augment what we do, it's important to design for value. Buttons, styles and tones are space for conversions, and I'm lucky to have discovered that so early in my career.
Ours was also a team made up of drastically different backgrounds, many of them not design-related, which was great real-world experience.
Census Reporter is a tool that helps journalists find and tell stories with Census data. Founded in 2014 with support from the Knight Foundation, the website lets users discover and download thousands of datapoints for thousands of locations, from states to cities to small tracts.
Luckily, much of the UX was already well-liked by their users, but there was still something Census Reporter couldn't do: show how data changed.
Initially with a group and later solely under the guidance of Project Lead Joe Germuska, I designed a complex host of solutions for historical data that put users front and center. You can find this process in even greater detail, here.
A strong product already in place, my first challenge was to understand it.
Organized into profile and data sections, users could either search for a location and find predetermined values, like in the image above for Chicago, or they could search a specific data table by name and download it by locations.
In order to fully envision functionality, I crudely mapped out every page.
With well-structured data pages in place, the client wanted to see the most improvement for the profile sections. This meant significant data visualization, an area I'd only briefly played with before.
So I studied up.
In the massive and complex data visualization space, I found some guidelines: users should always know what they're looking at, ink should be used economically, and if information is hidden behind interaction, it shouldn't be the most important thing.
I discovered dozens of visualization types during this process and began seeing their unique values, like the power of lines in comparing data over time, or how scatterplots are dangerous, but can show a lot of data points extremely well.
Feedback feedback feedback! I spoke with 11 different users of Census Reporter and had them walk me through their processes, explaining how historical data was part of their work. Unfortunately, many users had frayed relationships with the data, stumbling around an ultimately uncomfortable and inefficient process.
That meant there was room for improvement.
Informed, I could iterate. And iterate I did. This collage is only a small selection from dozens of pages of iteration over six months. Concepts were explored and disproven like it was going out of style.
I tried lines, but when we compared many values along a y-axis it stretched, making the lines flat.
I tried bars, but as I looked at datasets with more than one category, like population by age range, providing data for many years crowded the space. Just too much ink to justify the value.
I even tried sparklines, essentially small trendlines similar to those used for stocks that would let users see change over time, per datapoint. But again, many of the lines were flat, and perhaps worse, the data wasn't apparent. It would need to be hidden behind interaction.
At a bit of a crossroads, I stumbled upon a solution that kinda worked. From there they kept coming and coming.
Small multiples! Popularization of Edward Tufte, modern father of data visualization, small multiples are perfect for scaling.
In concept, small multiples allow you to show a visualization once, and then based on familiarity with the pattern, apply it at a compressed scale for different years or categories without losing comprehension.
These worked great for some of our datasets with five or more categories. Already using bars on the current Census Reporter, these could be implemented with little to no user relearning.
Yes, these are still just lines...but notice what's changed? These are grey contextual lines. The idea is that by using these lines, users can see how similar locations compare on the same data. By default, a city could be grouped with all of the cities in its county, or a tract could be grouped with all the tracts in its city.
This shows how your area fits within a population...AND, if the lines are somewhat flat, users can see how the flatness compares to other places, giving it new contextual meaning.
This was kind of a bump, but a well-reasoned bump. Pie charts, used throughout the profile page, have a few things in common: two to five categories, large groupings, and relatively stable data.
Because the categories were similar to the bars, I tried small multiples. This unfortunately led to an indistinguishable small multiple nightmare. Likewise with lines, they were flat and, because of the multiple categories, difficult to add contextual lines to.
So, I added an x and told it like it is: "The data shows minimal to no change over time."
Adding everything together, the image below was my final mock-up!
*Please note that this mock-up proves concept, and could be simply translated throughout each profile page.*
One of my initial challenges was controlling the data. In all steps of the process - discovery, downloading, accessing, manipulating, and visualizing - I had to get better. Over time I did, but when you're doing anything seriously for the the first time it's a struggle. I would've loved for that not to have held me back in the beginning.
Unlike other projects, my work with Census Reporter began in a group setting - Tuesday and Thursday, two hours a day with three other people. Even with your developer, designer and researcher at the same table, speaking the same language takes practice. It was exciting to see our growth in that area, which prepared me for my individual work going forward.
For further detail and more ideations, you can go here.