LinkedIn Learning

Search redesign
2020

LinkedIn Learning

Notification center
2020

LinkedIn Learning

Onboarding
2018

Groupon

Exposed Filters
2016

EverActiv

Onboarding redesign
2016

ITP Solutions

Responsive Web Design
2015

Inline

Logo Design
2015

Radical Road Brewing co.

Custom Animated Navigation
2013

Jackson Associates

Responsive Website Design
2013

Palette

Logo Design
2013

LinkedIn Learning

Search redesign

Problems with current search experience

1. Confusion of offerings

  • Existing confusion between content types (video, course, learning path)
  • New confusion between new content types (Articles, documents)
  • New providers are confusing (getAbstract, HMM)
Hybrid

2. Overwhelmed by options

  • More offerings = more content
  • Current search cards do not do a great job displaying subtle differences between content types and providers
Hybrid

3. Inconsistent experiences across search & browse

  • Topic pages only display LinkedIn Learning content and filters
  • Topic pages display an unnecessary “All” filter by default
Hybrid

Data & Research

Search data

  1. Most used filters are "Content type" and "Skill level". (In graph, "Entity" is referring to "Content type")
  2. Top 10 used filter account for 80% filtered searches
Hybrid
  1. Filter group that leads to the most successful searches
  2. Filter that leads to the most successful searches
Hybrid

User research key findings

  1. Users care most about “content type” and “skill level” filters
  2. Results do not feel relevant
    • eg. User is a beginner, but seeing advanced content
    • eg. User wants to look in depth at a topic, but only seeing 5 minute videos
  3. Overwhelmed by search results page
  4. Content types blend together
  5. Multiple providers feels very confusing
  6. Too many filters are displayed. Most filters will not be used, do we need to display them all?

Exploring new search models

Exposed filters

The data we pulled regarding most used filter groups and filters, and most successful filter groups and filters makes it pretty clear that certain filters are more useful to users than others. The idea for exposed filters is to only display a small subset of filters (likely most used or most successful), and allow users to expand the filter list to access all other filters. By displaying filters at the top of the search result, we’re also freeing up the right rail for other potential search tools.

Hypthothesis: By only displaying the most used filters, can users easily filter down results to help them find what they need, while also reducing cognitive load on search results page.

View Designs

Search verticals

The data indicates that a users’ mental model is to evaluate content based on “Content type”, since this is the most used filter. The idea of search verticals would break down search results into smaller subsets, organized by content type, displaying a small list of results in each vertical to give the user an idea of the type of content they’ll see in that vertical.

Hypothesis: By breaking search results into verticals, does this reduce the cognitive load of fully a mixed search results and help guide users into a content type? And does this make it easier for the user to find what they’re looking for?

View Designs

Guided search

Users with high intent generally know more about their search, than what their search queries might reveal.

For example

  • Skill/topic they want to learn
  • Their leveling in that skill/topic
  • How in depth they want to dive into a skill/topic
  • ie. Do they want to learn something very specific that a video would cover?
  • Or are they intending to do a deep dive on that skill/topic

With slightly more friction up front, can we ask users more about their search so that we can display far more relevant search results.

View Designs

Final Solution

Phase 1 - Exposed filters

We felt that all of the concepts we tested would benefit from the exposed filter model, so we decided to build this for phase 1 of this project.

Phase 2 - Guided Search

We did some follow up research with a round of concept testing. In these sessions, the guided search model scored the highest, and was also the preferred option of the team. We decided to build this as a phase 2 of this project, however left LinkedIn shortly after delivering finalized exposed filter designs.

LinkedIn Learning

Notification center

The problem

Users were limited by the types of reminders & updates they could receive. We were missing a very valuable channel of communication for both the user & the business. Our goal was to create a channel of communication that is available to all user types to help those users reach their learning goals.

The process

Research

We had very limited research resources at the time of this project, however we knew that the research team had done extensive research on notifications for LinkedIn.com over the past few years. We worked with a researcher to analyse the data from 3 separate studies to help create a foundation for our design approach.

Defining user/notification types to support

LinkedIn learning has several different user types we needed to think about. From regular consumers, to enterprise learners, to admins, curators & instructors just to name a few. Each of these user types have very specific reasons for being notified. We used the needs of each user type to help group the notifications into notification types that we would support. Defining these notification types was incredibly important for two main reasons: 1. To make sure the users are only receiving notifications about things that are valuable to them & 2. To provide guidance to other teams looking to create notifications, & make the approval process more streamlined

Selecting a channel to send a notification

One of the key findings from the user research was that users were annoyed when the different communication channels weren’t working together. For example if they might receive a push notification, an in app notification & an email about the same thing. Channel selection was a very important part of designing the notification center. An ill timed push notification could potentially annoy the user enough to shut down the channel completely, which is almost impossible to get back when that happens. We designed a set of rules & principles to follow to make sure that only the most important notifications would be sent as a push notification, & things that are less important would be sent as an in app notification.

The anatomy of a notification

What elements would the notification consist of. The elements that we explored were: an entity image (person or company), headline, timestamp, overflow menu, a piece of content, & a call to action. It very quickly started to get very busy. From the user research we learned that the only things the user cared about were the headline & timestamp, so we decided to start with a very simple version, & test our way into other elements like content cards & call to actions.

Writing the headlines

We worked closely with PMM & UX writing to write the headlines for all of the notifications that we were going out with for MVP.

MVP

We decided to initially go out with a very simplified design. Our intention was to only have elements in the notification that were absolutely necessary: a headline, a timestamp, an unread badge & an overflow menu to allow users to perform certain actions, & then test into other elements that we thought could be helpful: content card, calls to action.

This direction was inspired by a cooking analogy: If you start with quality ingredients, & use them thoughtfully, you won’t need to use much salt to make it a great dish. If you do need to add salt, it is easier to add more salt to a dish, than it is to take salt out.

MVP

Testing into content cards in notifications

The first thing we want to test is adding a content card in notifications. Almost all of our notifications refer to a piece of content & land you on that piece of content when you tap on the notification, so we wanted to look into surfacing that piece of content in a card in the notification.

Notifications with content

Next steps

Documentation will be crucial to maintaining a healthy ecosystem for notifications. Other parts of the product have been extremely interested in building notifications & being able to provide them with solid documentation & guidelines is a priority for us right now. While we are designing this documentation, we will be designing an approval process for other teams who are interested in creating a notification.

LinkedIn Learning

Onboarding

The problem

New users were experiencing a negative first time experience on the product - from the onboarding experience to the first time on the homepage.

Some context

Our previous onboarding designs forced users to make too many tough decisions up front before they had any context of what the product was. We were promising high, and delivering low in terms of personalization and relevancy. Also the language, designs and overall experience lacked any kind of personality.

The goal

Our main goals with the onboarding redesign were to:

  • Understand the intent of our users to provide them with a positive first time experience on the homepage
  • Be transparent with users. Briefly introduce users to the product. Explain why we’re collecting information.
  • Create an emotional connection with user

The process

Understanding the goals and needs of all user types

There are several different user types that all have different goals and needs, and have entered the product in multiple different ways. We needed to design an experience that allowed these users to reach their goals, and seamlessly transitioned users from their entrypoint into our product.

Understanding data/metrics

Data showed us that users who watch 5 minutes of content are far more likely to renew their consumer subscription and re-engage with the product. The biggest drivers of EQL (Our true north metric) were users following skills, ensuring that users are reachable, and activity on courses like saves and likes. We used this data to guide our initial design explorations.

User research

We conducted user research in seven 60 minute sessions with 3 women and 4 men, all from the Bay Area.

Our main research goals were to:

  • Identify and understand pain points in the assumptions made in the experience we had designed
  • Understand a user’s relationships with our high level interests/topics
  • What do users expect in terms of discovering content during onboarding

What we found:

  • People trust LinkedIn. We shouldn’t do anything to breach that trust
  • Displaying content in the onboarding experience did not meet user’s expectations.
  • Confirmation on the voice and tone of copy
  • People were interested in setting a goal within the onboarding experience

UX Writing / Design systems

We learned in our user research that users responded well to the voice and tone of the copy, however we wanted to make sure that our voice and tone matched that of the voice and tone of our brand.

In that research, users also responded well to the colorful illustrations that we used throughout the experience. As one of our main goals was to give more personality to the experience, we decided to work with our design systems team to create custom illustrations to use throughout the experience. These illustrations along with the copy were used to help clarify what the product does, introduce users to the product and be transparent about why we are asking them to complete certain tasks.

Test and iterate

We worked with data science, product and user research to define a set of tests that we wanted to run in the future to improve the experience. One of the bigger tests that we ran was creating a goal setting experience, which increased EQL and retention significantly.

The designs

Welcome
Categories
Topics
Goal
Congrats

Groupon

Product Designer

The problem

The main problem we were trying to solve was to help users refine their searches more easily. In the old filter design, the filter button was hard to find and people didn't realize they could filter by certain things like food type or date. We wanted to look at some models that would make the filter controls more prominent, but also expose some of the most used filters to allow for easy filtering.

Early explorations

We explored some versions that exposed specific filters. Some versions exposed filter groups and others had some versions were a hybrid version of the two where the filters are exposed but were still grouped together. The products we drew inspiration from were Airbnb, Yelp, Houzz, Foursquare and some others.

Explorations

Research

We narrowed down our explorations to two models: Filter groups, and an exposed/grouped hybrid. We created two prototypes in Framer to test with users in a User Research study

Filter groups

Filter Groups

Hybrid

Hybrid

Conclusions

Both versions had pros and cons, however what we learned from the user research was that the simplicity of the filter group model made it much easier for users to refine their results. The hybrid version was interesting to explore and was the model that the product team wanted to move forward with, but we ultimately knew that the interactions would be too complicated so we moved forward with the filter group model.

EverActiv

Onboarding Redesign

Context

My good friend Kareem built EverActiv about a year ago with a different designer. When that designer left, Kareem asked me to work with him. I thought it was a really great app with a lot of potential, it just needed a bit of design love. I wanted to improve the UI & UX and eventually work on elevating the brand. The branding was put on hold, but we started overhauling the UI & UX.

We wanted to redesign this app from the ground up, so we started with the onboarding experience. We tackled this fairly recently, and with both of us having full time jobs, it's not going as quickly as we had initially anticipated. Here is where we're at currently: I've redesigned the new onboarding experience and Kareem is currently implementing it. I do want to be clear about something: we are considering these designs a quick first rev of the new experience. We wanted to put something in front of users quickly so that we could get feedback and learn from them quickly. We plan to test this experience and find out as much as we can so that we can continue to iterate and improve.

As i had mentioned before, I inherited all of the UI & UX and branding from another designer. While redesigning the onboarding experience, I've kind of been chipping away at all three simultaneously, however most of my attention has gone to the UI & UX. By redesigning this one experience on the app, I've already started to unofficially create a design system and visual language. Over the next few months, i'll be continuing to expand on this design system, and will be using Brad Frost's Atomic Design as inspiration and guidance.

I'll start by running through the initial onboarding designs. I'll explain some of the issues I had with them, and then I'll run through our design solutions and how we chose to improve the experience.

The Task

The three screens I will focus on in this article is the opening page, the onboarding screen(s) and the strength test page. I'll stop here and I won't go into individual workouts, because we haven't finalized any designs for those yet.

My main issues with the initial onboarding designs are that it gives the user no comprehension as to what the app does, it does not give the user any kind of direction or goal to achieve, and there is very little feedback throughout the experience.

Fig. 1 Initial Onboarding Flow

Old Onboarding Flow

Fig. This is the opening page of the app in the old design

Old Designs - Opening Page

  • There is no indication as to what EverActiv is or does.
  • There is no clear direction for a user to take. It gives me two identically treated rectangles, that don't look very actionable.
  • There is no branding.
  • The copy in the buttons are not very effective. "I'm new" doesn't give the user any direction or incentive to continue. I don't know if i'm going to go to an explanation page, or if I'm signing up. "I'm new" really doesn't tell me anything, i just know i should tap it if i'm new.

Fig. 3 This is form where we collect the user's information

Old Designs - Onboarding Page

  • There is no indication as to why we need to collect this data from a user. Again, at this point they don't even know what the app does.
  • The UI for setting your weight is quite frustrating. It defaults you to 175lbs. To get down to 150, I had to tap the '-' button 25 times.
  • The order of 'I want: Strength, Both, Looks' is awkward. It makes more sense to list the two main values, then add both: 'strength, looks or both', or to just have the two values but make them a multi-select form element. (I'll explain why we don't end up doing this in the new designs below)
  • The button copy,'Save', again, doesn't tell a user anything. It doesn't even tell them what the next step is, or even that there is a next step. Usually when I save a document, i'll stay on the same page and it will save in the background.

Old Designs - Strength Test

For a bit more context, we put a user through a strength test to find out how strong they are. Since we recommend weight and reps for the user, we want to make sure we are very accurate for their own safety. They are encouraged to actually do the exercises, but if the user is a more advanced gym goer, we give them the ability to simply input their lift numbers.

Fig. 4 Strength Test Old Design

  • When the user taps 'save' on the previous page, we take them to this strength test. It's very likely they are not at a gym while they download the app, and go through the onboarding experience. Our data shows that users often get to this screen, close the app and never open it again.
  • The user has no idea what a 'strength test' is. Is this a workout? Is the app already doing what it's supposed to do? Again, at this point the user still has no idea what the app does.
  • What does that '1' mean beside each workout? It looks pretty important
  • 'Start' CTA could be more descriptive
  • Why are these pages so drastically different in color from the onboarding experience?

The Process

The process was very intense. There was a sense of urgency from Kareem to fix the UI, branding, and all of the UX issues all at once, in a very short period of time. My process is to usually do a lot of research and wireframing before I even touch visuals, but for this project I kind of did all of this together.

I did a ton of competitive analysis. Apps like FitStar, Nike+ Training, Fitocracy were some of the apps I researched to get a sense of what competitors were doing. I was very inspired by the app, Human, as well as Google's material design for UI elements like colors, shapes, look and feel and iconography. And I was very inspired by Quartz's onboarding experience and Siri for our onboarding experience.

A few wireframes started in black and white, then I started to quickly incorporate color and more polished elements to get a sense of the look and feel that I wanted for the app. I very quickly began to see patterns that I liked and started to develop a visual system while wireframing.

The Solution

Since EverActiv is "your personal trainer in your pocket", I wanted to make the onboarding more human and conversational. The main concepts that I wanted to achieve in this redesign are to make it more conversational, to give the user a lot of feedback on every action they take, to give the user more direction, and to not overwhelm the user by throwing a big form in front of them and say "Here. Fill this out please."

We've broken up the form in the onboarding page from the old designs completely. We are now gathering this information by posing one question at a time. We only ever give the user 1 - 4 options to answer the question, so it is very easy for them. As they progress through the answers, an orange progress bar will appear around the circle of the trainer's avatar giving feedback to user.

The section at the top with the dark background is where the app's side of the conversation lives. The bottom half of the page is where the user's responses live. The user will always respond by tapping a button at the bottom with their answer inside. This onboarding flow was very much inspired by the onboarding for the app Quartz.

Fig. 5 New Onboarding Flow

Old Onboarding Flow

Some important things to call out in Fig. 5:

  • On screen 8, we allow users to select dates and times of day for their initial 'strength test'. The default values would be 'today' and 'now', however if a user selected any other date than 'today', 'now' would disappear. The answer in the button at the bottom would always create a grammatically correct answer based on the user's selected values. If a user selected 'Monday' and 'Afternoon', the button might say 'Let's schedule Monday Afternoon'.
  • I thought screen 9 was a clever place to put the prompt to allow notifications. The user has shown intent to schedule their strength test. By prompting the user here, we can have a friendly screen asking the user if they want EverActiv to remind them about this scheduled workout. If they tap "Allow", they'll then see the system level prompt, which if they had just tapped allow on the non-system level prompt, theres a higher chance they'll allow at the system level. If they tap "no thanks" on screen 9, the system level prompt will not pop, and we will prompt them again when appropriate.
  • On screen 5, it would normally make sense to just have the two options “strength” and “looks” and make them a multi-select form element rather than a radio button, but we couldn't do that without getting rid of the conversational nature of the answers inside the button.

Fig. 6 Opening Page Redesign

Redesign - Opening Page

  • Simple description of what EverActiv does. In the future the plan is to tell this story with a few side-swiping screens, taking a more visual approach.
  • The user can clearly either 'sign in' or 'get started'. 'Get started' is the primary CTA because most users will already be logged in and won't see this page
  • The branding is still lacking a bit, however I've come up with a color scheme that will be used throughout the app which helps represent the brand. Next steps would be a nice shiny new logo.

Fig. 7 Onboarding Pages Redesign

Redesign - Onboarding Pages

  • Answers are very simple and clear actionable buttons for the user to interact with
  • Each element on the page would animate in order to emphasize the conversation. eg. Personal trainer's question would fade in, and user's answer would only appear the question's animation is complete.
  • User's answers/actions are all displayed at the bottom of the page for easy access for thumb making it easy for a user to onboard with just using one hand.
  • Progress displayed with orange outline around the trainer's avatar giving user feedback.

Fig. 8 Strength Test Redesign

Redesign - Strength Test

  • Rather than having a “start” button and having to do the strength test in a certain order, I've made each individual exercise an actionable button which gives the user the freedom to select the order in which they want to do the exercises. This is important because it really doesn't matter which order they do this in. Also not every machine will be available so having a preset order, allows very little flexibility to the user.
  • Having the avatar of the personal trainer present, gives the user the illusion that they are not by themselves, and they'll have somebody help guide them through the experience.
  • Added in a brief description of why we need to do the strength test.
  • Only display lift numbers once the user has inputed them on the exercise page. The old designs have recommended numbers in each exercise which actually make it look like the user has already filled it out, and they're very inaccurate since we haven't collected any lift numbers from the user yet.

ITP Solutions

Responsive Web Design

Responsive web design and front end development by me.

ITP Solutions

Inline

Logo Design

Inline specializes in delivering and implementing chemicals and chemical programs that ensure that oil and gas wells are as efficient as possible. They also do some programs related to corrosion and preventative measures for spill and leaks in pipelines. The owner of Inline is a tattoo artist who paid me fort his job with a tattoo.

Inline Logo
Inline Logo

Radical Road Brewing Co.

Custom Animated Navigation

This was a concept created for the Radical Road website navigation. The animation was created using CSS animations and meticulus placement of CSS elements. It took a stupid amount of time to get it to this state and they never used it, but I still think it's pretty cool.

Radical Road

Jackson Associates

Responsive Web Design

Responsive web design and front end development done by me.

Jackson Associates

Palette

Logo Design

Palette is a company that is designed to help give businesses an online presence through social networks, creative content and good design. They maintain social networks, create content for businesses and design websites.

Palette Logo
Palette Logo