Back to Portfolio
Overview
Filtering on Mobile Devices
Step 1A: Internal Research
Step 1B: External Research
Step 2: Design Exploration
Step 3: Consolidation and Communication
Step 4: Interaction Design and Visual Details
Last Summer I worked as a UX Design Intern for Lululemon Design Systems team. Traditionally Lululemon has not had a cohesive design language. Our team was responsible for creating a fully components-based design system and, in the process, a fresh new design language. I created 2 different patterns for this team: Empty States and Filtering for mobile devices.
With this project I had to create a pattern for filtering a list of items/results on mobile devices. I needed to create logic and consistency across all our different pages. After that it was up to me to decide what to prioritize and what to change.
I spent a little over a week combing through both of Lululemon mobile apps and the mobile website, collecting screenshots, and talking to designers in every design team that I could think of that may get effected/benefit from my work on the filtering pattern. I came out of the internal research with 2 goals: increase consistency andfilter usage.
The next thing I did was analyze what other companies were doing with their mobile filtering UIs. My goal here was to understand what scenarios their filter patterns were used in, which tradeoffs they made, and why they made those tradeoffs. Basically, I wanted to figure out every option that I might need to consider in my own designs.
I gathered screenshots from 20 different company’s mobile apps and mobile websites and analyzed their filtering mechanisms in browse pages and search pages. It took me 3-4 days to go through over 350 screenshots and distill down my thoughts into a couple different findings. I presented my research to a couple different stakeholders using the slide deck below:
This step is where creativity comes in (methodical creativity). My goal here is to make sure that I’ve considered every possible option that makes any sort of sense.
First I weighed the pros and cons of every type of filtering UI that I saw in my external research and tried to understand how they would affect our 2 main goals. I decided that a pill-based filtering UI{"{"}" "{"}"}would be the way to go.
From there I broke down the pill filtering into specific design parts: placement, secondary buttons, highlighted filters, bottom overlay content style, and bottom overlay pill bar style. For each category I tried to come up with as many options as I could.
Now I distilled all my wild options, into a few of the best options for each part of the UI. I tried to compile a list of pros and cons for each of these options and get really specific with my analysis. After getting feedback from my team and tweaking my analysis, I again went around to designers from different stakeholder teams across Johnson & Johnson to get their opinion on things. This is the point where I made it a point to get a lot of feedback from the accessibilty team and developers on feasability and engineering constraints.
The last step before wrapping my pattern up was to iron out the little details. With this pattern I really wanted to make sure the iteraction of opening up the bottom container made sense and felt natural. I also made it a point to finalize all the colors and icons.
For me, understanding the current state of your own product is the most important step to designing a pattern that scales across every situation where your pattern may be used.
View Research Presentation
A pill filtering system would:

Find a filter you already have in mind

Discover what you should filter by

Remove filters you have applied

Edit filters you have applied

Dont add visual clutter & distract from listings

The Final Product
At the end of this internship I provided sketch assets for every part of this pattern that other designers could use and detailed documentation on when and how to use this pattern.

Copyright © 2021 Kenneth Okereke

Back to Portfolio
Overview

Last Summer I worked as a UX Design Intern for Lululemon Design Systems team. Traditionally Lululemon has not had a cohesive design language. Our team was responsible for creating a fully components-based design system and, in the process, a fresh new design language. I created 2 different patterns for this team: Empty States and Filtering for mobile devices.

Filtering on Mobile Devices

With this project I had to create a pattern for filtering a list of items/results on mobile devices. I needed to create logic and consistency across all our different pages. After that it was up to me to decide what to prioritize and what to change.

Step 1A: Internal Research
For me, understanding the current state of your own product is the most important step to designing a pattern that scales across every situation where your pattern may be used.
Step 1B: External Research
Step 2: Design Exploration
Step 3: Consolidation and Communication
Step 4: Interaction Design and Visual Details

I spent a little over a week combing through both of Lululemon mobile apps and the mobile website, collecting screenshots, and talking to designers in every design team that I could think of that may get effected/benefit from my work on the filtering pattern. I came out of the internal research with 2 goals: increase consistency andfilter usage.

The next thing I did was analyze what other companies were doing with their mobile filtering UIs. My goal here was to understand what scenarios their filter patterns were used in, which tradeoffs they made, and why they made those tradeoffs. Basically, I wanted to figure out every option that I might need to consider in my own designs.

I gathered screenshots from 20 different company’s mobile apps and mobile websites and analyzed their filtering mechanisms in browse pages and search pages. It took me 3-4 days to go through over 350 screenshots and distill down my thoughts into a couple different findings. I presented my research to a couple different stakeholders using the slide deck below:

This step is where creativity comes in (methodical creativity). My goal here is to make sure that I’ve considered every possible option that makes any sort of sense.
First I weighed the pros and cons of every type of filtering UI that I saw in my external research and tried to understand how they would affect our 2 main goals. I decided that a pill-based filtering UI{"{"}" "{"}"}would be the way to go.

From there I broke down the pill filtering into specific design parts: placement, secondary buttons, highlighted filters, bottom overlay content style, and bottom overlay pill bar style. For each category I tried to come up with as many options as I could.

Now I distilled all my wild options, into a few of the best options for each part of the UI. I tried to compile a list of pros and cons for each of these options and get really specific with my analysis. After getting feedback from my team and tweaking my analysis, I again went around to designers from different stakeholder teams across Johnson & Johnson to get their opinion on things. This is the point where I made it a point to get a lot of feedback from the accessibilty team and developers on feasability and engineering constraints.

The last step before wrapping my pattern up was to iron out the little details. With this pattern I really wanted to make sure the iteraction of opening up the bottom container made sense and felt natural. I also made it a point to finalize all the colors and icons.
View Research Presentation
A pill filtering system would:

Find a filter you already have in mind

Discover what you should filter by

Remove filters you have applied

Edit filters you have applied

Dont add visual clutter & distract from listings

The Final Product

At the end of this internship I provided sketch assets for every part of this pattern that other designers could use and detailed documentation on when and how to use this pattern.

Copyright © 2021 Kenneth Okereke

Copyright © 2021 Kenneth Okereke

Back to Portfolio
Overview
Filtering on Mobile Devices
Step 1A: Internal Research
Step 1B: External Research
Step 2: Design Exploration
Step 3: Consolidation and Communication
Step 4: Interaction Design and Visual Details
Last Summer I worked as a UX Design Intern for Lululemon Design Systems team. Traditionally Lululemon has not had a cohesive design language. Our team was responsible for creating a fully components-based design system and, in the process, a fresh new design language. I created 2 different patterns for this team: Empty States and Filtering for mobile devices.
With this project I had to create a pattern for filtering a list of items/results on mobile devices. I needed to create logic and consistency across all our different pages. After that it was up to me to decide what to prioritize and what to change.
I spent a little over a week combing through both of Lululemon mobile apps and the mobile website, collecting screenshots, and talking to designers in every design team that I could think of that may get effected/benefit from my work on the filtering pattern. I came out of the internal research with 2 goals: increase consistency andfilter usage.
The next thing I did was analyze what other companies were doing with their mobile filtering UIs. My goal here was to understand what scenarios their filter patterns were used in, which tradeoffs they made, and why they made those tradeoffs. Basically, I wanted to figure out every option that I might need to consider in my own designs.
I gathered screenshots from 20 different company’s mobile apps and mobile websites and analyzed their filtering mechanisms in browse pages and search pages. It took me 3-4 days to go through over 350 screenshots and distill down my thoughts into a couple different findings. I presented my research to a couple different stakeholders using the slide deck below:
This step is where creativity comes in (methodical creativity). My goal here is to make sure that I’ve considered every possible option that makes any sort of sense.
First I weighed the pros and cons of every type of filtering UI that I saw in my external research and tried to understand how they would affect our 2 main goals. I decided that a pill-based filtering UI{"{"}" "{"}"}would be the way to go.
From there I broke down the pill filtering into specific design parts: placement, secondary buttons, highlighted filters, bottom overlay content style, and bottom overlay pill bar style. For each category I tried to come up with as many options as I could.
Now I distilled all my wild options, into a few of the best options for each part of the UI. I tried to compile a list of pros and cons for each of these options and get really specific with my analysis. After getting feedback from my team and tweaking my analysis, I again went around to designers from different stakeholder teams across Johnson & Johnson to get their opinion on things. This is the point where I made it a point to get a lot of feedback from the accessibilty team and developers on feasability and engineering constraints.
The last step before wrapping my pattern up was to iron out the little details. With this pattern I really wanted to make sure the iteraction of opening up the bottom container made sense and felt natural. I also made it a point to finalize all the colors and icons.
For me, understanding the current state of your own product is the most important step to designing a pattern that scales across every situation where your pattern may be used.
View Research Presentation
A pill filtering system would:

Find a filter you already have in mind

Discover what you should filter by

Remove filters you have applied

Edit filters you have applied

Dont add visual clutter & distract from listings

The Final Product
At the end of this internship I provided sketch assets for every part of this pattern that other designers could use and detailed documentation on when and how to use this pattern.

Copyright © 2021 Kenneth Okereke

Back to Portfolio
Overview
Filtering on Mobile Devices
Step 1A: Internal Research
Step 1B: External Research
Step 2: Design Exploration
Step 3: Consolidation and Communication
Step 4: Interaction Design and Visual Details
Last Summer I worked as a UX Design Intern for Lululemon Design Systems team. Traditionally Lululemon has not had a cohesive design language. Our team was responsible for creating a fully components-based design system and, in the process, a fresh new design language. I created 2 different patterns for this team: Empty States and Filtering for mobile devices.
With this project I had to create a pattern for filtering a list of items/results on mobile devices. I needed to create logic and consistency across all our different pages. After that it was up to me to decide what to prioritize and what to change.
I spent a little over a week combing through both of Lululemon mobile apps and the mobile website, collecting screenshots, and talking to designers in every design team that I could think of that may get effected/benefit from my work on the filtering pattern. I came out of the internal research with 2 goals: increase consistency andfilter usage.
The next thing I did was analyze what other companies were doing with their mobile filtering UIs. My goal here was to understand what scenarios their filter patterns were used in, which tradeoffs they made, and why they made those tradeoffs. Basically, I wanted to figure out every option that I might need to consider in my own designs.
I gathered screenshots from 20 different company’s mobile apps and mobile websites and analyzed their filtering mechanisms in browse pages and search pages. It took me 3-4 days to go through over 350 screenshots and distill down my thoughts into a couple different findings. I presented my research to a couple different stakeholders using the slide deck below:
This step is where creativity comes in (methodical creativity). My goal here is to make sure that I’ve considered every possible option that makes any sort of sense.
First I weighed the pros and cons of every type of filtering UI that I saw in my external research and tried to understand how they would affect our 2 main goals. I decided that a pill-based filtering UI{"{"}" "{"}"}would be the way to go.
From there I broke down the pill filtering into specific design parts: placement, secondary buttons, highlighted filters, bottom overlay content style, and bottom overlay pill bar style. For each category I tried to come up with as many options as I could.
Now I distilled all my wild options, into a few of the best options for each part of the UI. I tried to compile a list of pros and cons for each of these options and get really specific with my analysis. After getting feedback from my team and tweaking my analysis, I again went around to designers from different stakeholder teams across Johnson & Johnson to get their opinion on things. This is the point where I made it a point to get a lot of feedback from the accessibilty team and developers on feasability and engineering constraints.
The last step before wrapping my pattern up was to iron out the little details. With this pattern I really wanted to make sure the iteraction of opening up the bottom container made sense and felt natural. I also made it a point to finalize all the colors and icons.
For me, understanding the current state of your own product is the most important step to designing a pattern that scales across every situation where your pattern may be used.
View Research Presentation
A pill filtering system would:

Find a filter you already have in mind

Discover what you should filter by

Remove filters you have applied

Edit filters you have applied

Dont add visual clutter & distract from listings

The Final Product
At the end of this internship I provided sketch assets for every part of this pattern that other designers could use and detailed documentation on when and how to use this pattern.

Copyright © 2021 Kenneth Okereke