CIRCLES

Circles is an interaction exploration, exploring the different ways people fidget and play with their phones paralleled with learning how users interact with social media.

MY ROLE               
UI/UX, Visual, Interaction

YEAR 
Spring, 2017

[unex_ce_button id="content_5b9z01ob1,column_content_4plc3s1e8" button_text_color="#ff2d54" button_font="semibold" button_font_size="14px" button_width="auto" button_alignment="left" button_text_spacing="2px" button_bg_color="#ffffff" button_padding="0px" button_border_width="0px" button_border_color="#ff2d54" button_border_radius="0px" button_text_hover_color="#aec0c9" button_text_spacing_hover="2px" button_bg_hover_color="#ffffff" button_border_hover_color="#ffffff" button_link="http://abbeylee.design/wp-content/uploads/2017/07/circles_deck.pdf" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]Full Case Study ?[/ce_button]

INTRO ?

Social media giants employ the use of algorithms to determine what content
to show you, but they often fail to show the content that we really care about

So you've scrolled your day away on social media, and somehow missed all your friend's social media content...

Social media feeds are muddled with content that we don't care about, and are too lazy to unfollow, and the content that we do care about gets buried beneath it.

GOALS

Connect

Empower users to connect with their friends' and family's content

 

Efficiency 

Provide instant access to social media content, eliminating the time consuming need to manually search or scroll indefinitely 

 

Meaningful Interaction

Play with and explore different interactions that users can perform to access a group's content

UI PATTERN

Friend List

Give users a meaningful way to interact with their friends

UI PATTERN

Categorization

Enable users to curate their social media viewing experience by creating custom groups

PERSUASIVE PATTERN

Conceptual Metaphor

Mimic the idea of a rotary dial, helping users make associations within
the app

PERSUASIVE PATTERN

Chunking

Help users make sense of the content by giving them the option to sort the social media content

FEATURES ✨

I iterated through a variety of interactions, playing with how users access a specific
group's social media content in this social media aggregator that seeks to thwart algorithms

INTERACTION 1

Rotary Dial

Drawing inspiration from dialing on a rotary phone, drag the group you want to enter around the circle and release after full revolution to view that group's social media content

INTERACTION 2

Pull Dot

Drag the group that you want to enter to the middle circle and release to gain access to their content

INTERACTION 3

Push Dot

Push the center dot to the group you want to enter and release to gain access 

FEED

Group's Feed

Users can decide what type of content they want to see with this curated social media browsing experience that is sorted chronologically

DESIGN PROCESS ⚒

I became intimately acquainted with the UX design process. From user research to
information architecture to wireframes and look and feel, I pulled it all together
to create the final product

sketchessketches

I used sketching as my primary tool to iterate through possible interactions

I rapidly wireframed to organize my base structure so that I could
begin playing with interactions

circles_comps_2circles_comps_2

CONCLUSION ✌

Through this project, I got to experience and learn from a rapid design
approach to a project

SPRINT ??‍♀️?

I learned the value of designing rapidly so that I could fail fast, validate designs quickly, and kill my darlings that didn't best solve the solution

Intentional Friction ??

The act of searching for and viewing someone's social media content is an intentional act, and I wanted to honor that intention by creating interactions that have intentional friction

Interested in a deeper look at how I got to the final solution? Check out my process documentation to see everything from research to our final product

[unex_ce_button id="content_z39mima0t,column_content_4wjnfssp8" button_text_color="#ffffff" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#ff2d54" button_padding="15px 60px 15px 60px" button_border_width="1px" button_border_color="#ffffff" button_border_radius="0px" button_text_hover_color="#aec0c9" button_text_spacing_hover="2px" button_bg_hover_color="#ff2d54" button_border_hover_color="#aec0c9" button_link="http://abbeylee.design/wp-content/uploads/2017/07/circles_deck.pdf" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]Full Case Study ?[/ce_button]