DRIBBBLE CASE STUDY

DRIBBBLE CASE STUDY

DRIBBBLE CASE STUDY

DRIBBBLE CASE STUDY

DRIBBBLE CASE STUDY

Dribbble is a community for designers to share their projects, exchange feedback, and stay informed of new ideas and emerging trends. This community is a powerful resource for discovering designers and their work as well as fostering connections for potential jobs and collaborations.

While new users of Dribbble were struggling to navigate the app, the goal was to improve user engagement while maintaining the tight-knit community Dribbble had already developed. I reorganized content and streamlined visual language to increase comprehension and readability. By styling buttons and icons based on purpose and meaning, I improved learning time and ease of navigation. (I have no affiliation with Dribbble, this is a self-assigned project.)

Dribbble is a community for designers to share their projects, exchange feedback, and stay informed of new ideas and emerging trends. This community is a powerful resource for discovering designers and their work as well as fostering connections for potential jobs and collaborations.

While new users of Dribbble were struggling to navigate the app, the goal was to improve user engagement while maintaining the tight-knit community Dribbble had already developed. I reorganized content and streamlined visual language to increase comprehension and readability. By styling buttons and icons based on purpose and meaning, I improved learning time and ease of navigation. (I have no affiliation with Dribbble, this is a self-assigned project.)

Dribbble is a community for designers to share their projects, exchange feedback, and stay informed of new ideas and emerging trends. This community is a powerful resource for discovering designers and their work as well as fostering connections for potential jobs and collaborations.

While new users of Dribbble were struggling to navigate the app, the goal was to improve user engagement while maintaining the tight-knit community Dribbble had already developed. I reorganized content and streamlined visual language to increase comprehension and readability. By styling buttons and icons based on purpose and meaning, I improved learning time and ease of navigation. (I have no affiliation with Dribbble, this is a self-assigned project.)

Dribbble is a community for designers to share their projects, exchange feedback, and stay informed of new ideas and emerging trends. This community is a powerful resource for discovering designers and their work as well as fostering connections for potential jobs and collaborations.

While new users of Dribbble were struggling to navigate the app, the goal was to improve user engagement while maintaining the tight-knit community Dribbble had already developed. I reorganized content and streamlined visual language to increase comprehension and readability. By styling buttons and icons based on purpose and meaning, I improved learning time and ease of navigation. (I have no affiliation with Dribbble, this is a self-assigned project.)

Dribbble is a community for designers to share their projects, exchange feedback, and stay informed of new ideas and emerging trends. This community is a powerful resource for discovering designers and their work as well as fostering connections for potential jobs and collaborations.

While new users of Dribbble were struggling to navigate the app, the goal was to improve user engagement while maintaining the tight-knit community Dribbble had already developed. I reorganized content and streamlined visual language to increase comprehension and readability. By styling buttons and icons based on purpose and meaning, I improved learning time and ease of navigation. (I have no affiliation with Dribbble, this is a self-assigned project.)

TYPE: Usability Testing | Mobile App Design | UX Design | Interface Design

TYPE: Usability Testing | Mobile App Design | UX Design | Interface Design

TYPE: Usability Testing | Mobile App Design | UX Design | Interface Design

TYPE: Usability Testing | Mobile App Design | UX Design | Interface Design

TYPE: Usability Testing | Mobile App Design | UX Design | Interface Design

USER PERSONAS

USER PERSONAS

USER PERSONAS

USER PERSONAS

USER PERSONAS

SCENARIOS

SCENARIOS

SCENARIOS

SCENARIOS

SCENARIOS

- You are starting a daily inspiration feed and your goal is to add at least three new artists a day. Show me how you would go about filling your feed.
- You are starting a new design project and need some ideas. Show me how you would collect pieces for a mood or inspiration board.
- You are trying to follow you friend on Dribbble (someone you know). Show me how you would find them.
- You are looking for a new artist to collaborate with (someone you don’t know). Show me how you would go about finding and contacting this artist.

- You are starting a daily inspiration feed and your goal is to add at least three new artists a day. Show me how you would go about filling your feed.
- You are starting a new design project and need some ideas. Show me how you would collect pieces for a mood or inspiration board.
- You are trying to follow you friend on Dribbble (someone you know). Show me how you would find them.
- You are looking for a new artist to collaborate with (someone you don’t know). Show me how you would go about finding and contacting this artist.

- You are starting a daily inspiration feed and your goal is to add at least three new artists a day. Show me how you would go about filling your feed.
- You are starting a new design project and need some ideas. Show me how you would collect pieces for a mood or inspiration board.
- You are trying to follow you friend on Dribbble (someone you know). Show me how you would find them.
- You are looking for a new artist to collaborate with (someone you don’t know). Show me how you would go about finding and contacting this artist.

You are starting a daily inspiration feed and your goal is to add at least three new artists a day. Show me how you would go about filling your feed.

You are starting a new design project and need some ideas. Show me how you would collect pieces for a mood or inspiration board.

You are trying to follow you friend on Dribbble (someone you know). Show me how you would find them.

You are looking for a new artist to collaborate with (someone you don’t know). Show me how you would go about finding and contacting this artist.

- You are starting a daily inspiration feed and your goal is to add at least three new artists a day. Show me how you would go about filling your feed.
- You are starting a new design project and need some ideas. Show me how you would collect pieces for a mood or inspiration board.
- You are trying to follow you friend on Dribbble (someone you know). Show me how you would find them.
- You are looking for a new artist to collaborate with (someone you don’t know). Show me how you would go about finding and contacting this artist.

DISCOVERING PAIN POINTS

DISCOVERING PAIN POINTS

DISCOVERING PAIN POINTS

DISCOVERING PAIN POINTS

DISCOVERING PAIN POINTS

In order to test my assumptions, I approached 8 designers I had never met before and asked them to go through the four scenarios.

After going through each interview and pinpointing every instance a user struggled or was confused, I created an infinity map to define common pain points.

In order to test my assumptions, I approached 8 designers I had never met before and asked them to go through the four scenarios.

After going through each interview and pinpointing every instance a user struggled or was confused, I created an infinity map to define common pain points.

In order to test my assumptions, I approached 8 designers I had never met before and asked them to go through the four scenarios.

After going through each interview and pinpointing every instance a user struggled or was confused, I created an infinity map to define common pain points.

In order to test my assumptions, I approached 8 designers I had never met before and asked them to go through the four scenarios.

After going through each interview and pinpointing every instance a user struggled or was confused, I created an infinity map to define common pain points.

In order to test my assumptions, I approached 8 designers I had never met before and asked them to go through the four scenarios.

After going through each interview and pinpointing every instance a user struggled or was confused, I created an infinity map to define common pain points.

 NAVIGATION:
Buttons were not placed intuitively, making them difficult to find and discouraging users from moving forward on tasks.

"MORE" BUTTON:
Users did not understand where the more button led to or realize one could customize navigation from that page.

LINKS VS ICONS:
Buttons, links, and icons had the same styling, which made it difficult for users to distinguish links from "non-active" assets on the page.

READABILITY & COMPREHENSION:
The meaning of icons could not be understood if unlabeled. 

SEARCH FUNCTION:
Users had difficulty searching for users and felt capabilities was lacking. 

NAVIGATION:
Buttons were not placed intuitively, making them difficult to find and discouraging users from moving forward on tasks.

"MORE" BUTTON:
Users did not understand where the more button led to or realize one could customize navigation from that page.

LINKS VS ICONS:
Buttons, links, and icons had the same styling, which made it difficult for users to distinguish links from "non-active" assets on the page.

READABILITY & COMPREHENSION:
The meaning of icons could not be understood if unlabeled. 

SEARCH FUNCTION:
Users had difficulty searching for users and felt capabilities was lacking. 

 NAVIGATION:
Buttons were not placed intuitively, making them difficult to find and discouraging users from moving forward on tasks.

"MORE" BUTTON:
Users did not understand where the more button led to or realize one could customize navigation from that page.

LINKS VS ICONS:
Buttons, links, and icons had the same styling, which made it difficult for users to distinguish links from "non-active" assets on the page.

READABILITY & COMPREHENSION:
The meaning of icons could not be understood if unlabeled. 

SEARCH FUNCTION:
Users had difficulty searching for users and felt capabilities was lacking. 

NAVIGATION:
Buttons were not placed intuitively, making them difficult to find and discouraging users from moving forward on tasks.

"MORE" BUTTON:
Users did not understand where the more button led to or realize one could customize navigation from that page.

LINKS VS ICONS:
Buttons, links, and icons had the same styling, which made it difficult for users to distinguish links from "non-active" assets on the page.

READABILITY & COMPREHENSION:
The meaning of icons could not be understood if unlabeled. 

SEARCH FUNCTION:
Users had difficulty searching for users and felt capabilities was lacking. 

 NAVIGATION:
Buttons were not placed intuitively, making them difficult to find and discouraging users from moving forward on tasks.

"MORE" BUTTON:
Users did not understand where the more button led to or realize one could customize navigation from that page.

LINKS VS ICONS:
Buttons, links, and icons had the same styling, which made it difficult for users to distinguish links from "non-active" assets on the page.

READABILITY & COMPREHENSION:
The meaning of icons could not be understood if unlabeled. 

SEARCH FUNCTION:
Users had difficulty searching for users and felt capabilities was lacking. 

DRIBBBLE COMMUNITY CONSIDERATIONS

DRIBBBLE COMMUNITY CONSIDERATIONS

DRIBBBLE COMMUNITY CONSIDERATIONS

DRIBBBLE COMMUNITY CONSIDERATIONS

DRIBBBLE COMMUNITY CONSIDERATIONS

When addressing what changes should be made to the visual language of the app, I had to consider what could have a negative effect on long-term users who were already part of the established community. 

Since the style of the website is so minimal, Dribbble users have learned what these icons mean in order to perform actions and tasks. Changing icons would have been disruptive to long-term users of the Dribbble community.

When addressing what changes should be made to the visual language of the app, I had to consider what could have a negative effect on long-term users who were already part of the established community. 

Since the style of the website is so minimal, Dribbble users have learned what these icons mean in order to perform actions and tasks. Changing icons would have been disruptive to long-term users of the Dribbble community.

When addressing what changes should be made to the visual language of the app, I had to consider what could have a negative effect on long-term users who were already part of the established community. 

Since the style of the website is so minimal, Dribbble users have learned what these icons mean in order to perform actions and tasks. Changing icons would have been disruptive to long-term users of the Dribbble community.

When addressing what changes should be made to the visual language of the app, I had to consider what could have a negative effect on long-term users who were already part of the established community. 

Since the style of the website is so minimal, Dribbble users have learned what these icons mean in order to perform actions and tasks. Changing icons would have been disruptive to long-term users of the Dribbble community.

When addressing what changes should be made to the visual language of the app, I had to consider what could have a negative effect on long-term users who were already part of the established community. 

Since the style of the website is so minimal, Dribbble users have learned what these icons mean in order to perform actions and tasks. Changing icons would have been disruptive to long-term users of the Dribbble community.

DESIGN TRANSFORMATION

DESIGN TRANSFORMATION

DESIGN TRANSFORMATION

DESIGN TRANSFORMATION

DESIGN TRANSFORMATION

Instead of changing the iconography, I decided to find other ways to achieve comprehension and readability so as not to burden the established community with learning a whole new visual language.

The styling of icons was grouped based on purpose and meaning. The location of buttons and links were visually grouped to eliminate cognitive overload without minimizing the information presented.

Instead of changing the iconography, I decided to find other ways to achieve comprehension and readability so as not to burden the established community with learning a whole new visual language.

The styling of icons was grouped based on purpose and meaning. The location of buttons and links were visually grouped to eliminate cognitive overload without minimizing the information presented.

Instead of changing the iconography, I decided to find other ways to achieve comprehension and readability so as not to burden the established community with learning a whole new visual language.

The styling of icons was grouped based on purpose and meaning. The location of buttons and links were visually grouped to eliminate cognitive overload without minimizing the information presented.

Instead of changing the iconography, I decided to find other ways to achieve comprehension and readability so as not to burden the established community with learning a whole new visual language.

The styling of icons was grouped based on purpose and meaning. The location of buttons and links were visually grouped to eliminate cognitive overload without minimizing the information presented.

Instead of changing the iconography, I decided to find other ways to achieve comprehension and readability so as not to burden the established community with learning a whole new visual language.

The styling of icons was grouped based on purpose and meaning. The location of buttons and links were visually grouped to eliminate cognitive overload without minimizing the information presented.

NAVIGATION - IMPROVING READABILITY & REDUCING STEPS

NAVIGATION - IMPROVING READABILITY & REDUCING STEPS

NAVIGATION - IMPROVING READABILITY & REDUCING STEPS

NAVIGATION - IMPROVING READABILITY & REDUCING STEPS

NAVIGATION - IMPROVING READABILITY & REDUCING STEPS

Both a bottom bar and a separate page for navigation were creating redundancies as well as a disconnect from the homepage. In order to provide users with quick access to all navigation links, the "More" page was turned into a pop-over modal.

The color contrast between background and content was increased and labels added to icons for overall clarity and comprehension.  

Both a bottom bar and a separate page for navigation were creating redundancies as well as a disconnect from the homepage. In order to provide users with quick access to all navigation links, the "More" page was turned into a pop-over modal.

The color contrast between background and content was increased and labels added to icons for overall clarity and comprehension.  

Both a bottom bar and a separate page for navigation were creating redundancies as well as a disconnect from the homepage. In order to provide users with quick access to all navigation links, the "More" page was turned into a pop-over modal.

The color contrast between background and content was increased and labels added to icons for overall clarity and comprehension.  

Both a bottom bar and a separate page for navigation were creating redundancies as well as a disconnect from the homepage. In order to provide users with quick access to all navigation links, the "More" page was turned into a pop-over modal.

The color contrast between background and content was increased and labels added to icons for overall clarity and comprehension.  

Both a bottom bar and a separate page for navigation were creating redundancies as well as a disconnect from the homepage. In order to provide users with quick access to all navigation links, the "More" page was turned into a pop-over modal.

The color contrast between background and content was increased and labels added to icons for overall clarity and comprehension.  

LINKS VS ICONS CREATING VISUAL HIERARCHY & INTUITIVE GROUPINGS 

LINKS VS ICONS CREATING VISUAL HIERARCHY & INTUITIVE GROUPINGS 

LINKS VS ICONS CREATING VISUAL HIERARCHY & INTUITIVE GROUPINGS 

LINKS VS ICONS - CREATING VISUAL HIERARCHY & INTUITIVE GROUPINGS 

LINKS VS ICONS CREATING VISUAL HIERARCHY & INTUITIVE GROUPINGS 

I created a task flow in order to determine the simplest user journey through the app and the best method of grouping components. 

By re-grouping the buttons by purpose and determining style and position accordingly, I was able to improve the visibility of buttons and make actions more obvious to users.

I created a task flow in order to determine the simplest user journey through the app and the best method of grouping components. 

By re-grouping the buttons by purpose and determining style and position accordingly, I was able to improve the visibility of buttons and make actions more obvious to users.

I created a task flow in order to determine the simplest user journey through the app and the best method of grouping components. 

By re-grouping the buttons by purpose and determining style and position accordingly, I was able to improve the visibility of buttons and make actions more obvious to users.

I created a task flow in order to determine the simplest user journey through the app and the best method of grouping components. 

By re-grouping the buttons by purpose and determining style and position accordingly, I was able to improve the visibility of buttons and make actions more obvious to users.

I created a task flow in order to determine the simplest user journey through the app and the best method of grouping components. 

By re-grouping the buttons by purpose and determining style and position accordingly, I was able to improve the visibility of buttons and make actions more obvious to users.