Prev

kyletakesphotos

Prev Case Study

Next

kyletakesphotos

Next Case Study

share and tell

share and tell interface display
How might social media contribute to people's lives in a meaningful way?

Share and Tell (stylized "share and tell") is a social medium that helps promote human connection - through emotional stories written by users - within a human-computer paradigm familiar in today's society: mindless scrolling. The hope of the app is to imbue some human emotion into the daily lives of the people using the app, while correcting for patterns that make social media addicting. Examples include instant gratification and short-form content. The app can be thought of as combining stories from Reddit with the user experience of Medium.

Project Information

Tags UX Process, App Design, Prototyping
Duration 4 Weeks (Part Time)
Role Designer (Solo project)

FEATURES

Purposeful Content

The content found on share and tell are personal stories meant to be shared. Each story can be tagged by an emotion, which serves as the underlying theme of the story, as well as the emotion to be evoked when reading the story. There are seven categories of emotions: Happy, Sad, Anger, Surprise, Disgust, Fear, and Contempt. Stories under a specific emotion can be found through the Explore section. Stories can be saved for later, and can be commented on.

Anti-Social Media Prompts

share and tell is unencouraging of regular social media norms. After scrolling through so many stories, the app displays a message to the user saying something like, "Taking a break is a good idea!" The comment input is placed at the bottom of the story, to help ensure people read the story in full before responding to it. As well, comments have a minimum word count, so replies are as meaningful as the stories they are in response to. Lastly, notifications are as minimal as can be. A simple dot on the profile menu icon, is subtle enough that it is not vying for attention, but contrasting enough to be noticed.

PROCESS

This project started out as a simple topic given to me by Mobile App Design instructor, Thomas Girard. The topic? Computer Science. Oh yeah, that thing I have a degree in. From the topic name, we were given free reign on how to proceed. Looking back on it, I'm quite glad with the topic I was given as it lead me to what my project currently is.

Card Sorting

As I had no initial app ideas revolving around computer science, I started writing any word even remotely related to computer science on big pieces of paper. I then had two participants sort them based on what they thought went together. Once completed, I asked them to name the groups, hoping these groupings would provide further insight into how people view computer science, and hopefully a problem that could be solved with an app.

Card Sorting Activity

FIRST CARD SORTING

Card Sorting Activity

SECOND CARD SORTING

After each card sorting, I asked each participant to explain their thought process behind each grouping. Bringing the two sets of groups together, I realized there wasn't any sort of pattern or commonality. However, having my participants explain their thoughts on computer science brought up the thought of how humans interact with computers. As well, we talked a bit about what I learned during my degree. During one of those conversations, I remembered all the non-computer science courses I took, and how social media addiction was a recurring theme in those courses. The topic still fascinates me, so from these chain of thoughts, I had a direction: social media addiction.


After sleeping on it, the basic idea of share and tell came to me: a social media platform that acts like traditional social media, but provides some kind of human value. I'm very aware of how a lot of us (myself included) waste our time on our phones, mindlessly scrolling through the various social media services, which in a sense, eats away at our minds. But if there was something within that pattern, providing some kind of intrinsic value, I think that would be a platform worth scrolling through. Thinking about how social media could present some kind of genuine meaning, I thought about how people share personal stories on the Reddit, either through posts or in comment threads. Even though not every Reddit user is a good writer nor is their first language English, their sentiment can still be felt behind their words on a screen. So, that became the basis of my app.

I'm very aware of how a lot of us (myself included) waste our time on our phones, mindlessly scrolling through the various social media services... But if there was something within that pattern providing some kind of intrinsic value, I think that would be a platform worth scrolling through.

Second Card Sorting

I conducted a second card sorting activity with words related to my idea. At this point, I had an idea of how the app would function, so the purpose of this sort was to compare my ideas with others. I wrote words related to social media, sorted them according to my preferences, and had a few participants sort them based on their own perceptions. After each sorting, I compared their result to mine and asked them to explain their groupings.

Card Sorting Activity

MY CARD SORTING

Card Sorting Activity

FIRST CARD SORTING

Card Sorting Activity

SECOND CARD SORTING

Card Sorting Activity

WHERE DOES THIS GO?

Card Sorting Activity

LAST CARD SORTING

Interestingly enough, none of my participants' sortings matched my own, which told me our perceptions of social media were rather different. These days, I think more people are becoming aware of the negative effects of social media, but I know that doesn't mean people see it as negatively as I do. Nonetheless, I gained more insight into different views of social media. As well, as pointed out in the above image (outlined in red), one participant mapped out my own thought process and idea of my app. Simply put, I hope to bring some value to those who are addicted to social media.

The Problem

All these card sortings and talks with my classmate lead me to the problem area of social media. Without getting too comprehensive, social media has become a growing concern among today's modern population. People have become glued to their phones, mindlessly scrolling through multiple feeds to momentarily withdraw from their own lives. As well as anticipating the instant gratification that social media brings (in the form of likes/comments/followers). Knowing all I knew from my previous research into social media addiction, and drawing on my own experiences with social media, the problem I observed was:

Social media has become a disruption in people's lives, and breaking through those ingrained patterns is not as simple as it seems.

I would like to note that I am quite pessimistic when it comes to this topic. When I was using social media regularly, it was incredibly difficult to break away from the pattern of constantly checking my feeds. I think for most people (and I recognize that I would need to do more research on this), social media isn't too big an issue that they would need to stop using it completely. So, rather think how might I prevent social media addiction?, I reframed the question more positively:

How might social media contribute to people's lives in a meaningful way?

Because the top social media platforms aren't going away anytime soon (or they might, here's hoping) I thought what if there was a platform that provided meaningful content? I then thought about how I use Reddit, and how I quite enjoy reading people's stories on there, from simple heartfelt anecdotes, to the godforsaken Swamps of Dagobah (it's a fun read). Reading people's stories is something I always get some feeling out of. So with this mind, I thought about a social media platform that could combine the touching stories of Reddit with the UX of Medium, to create a seamless story-telling environment.

App Idea

The app is much like any other social medium where users scroll through posts generated by other users. However, the posts for this app come in the form of text-only stories, written by other users. Stories are based on an emotion, or set of emotions. The design of the app is driven by the delivery of stories, making reading stories a smooth experience for the people using the app. As well, the design aims to be aware of current social media patterns, and alleviate any effects often caused by traditional social media.

The idea of the app is simple: scroll through and read user-written stories based around an emotion, or set of emotions.

PROTOTYPING

First Sketches and Feedback

To begin the process of planning the app, I sketched a few of the main screens, and later drew them on a big sheet of paper for people to give feedback. Specifically, I first gave them the premise of the app, had them walk through with what they thought was happening on the app then asked for general feedback and recommendations. I gained a lot of value from this exercise as it challenged my biases, I realized things I overlooked, and gave me more ideas for the app. As well, at this point in time, I had named my app "share" because the purpose of the app is to share a bit of yourself, and I'm all for one word app names.

Big Sketches with Feedback

BIG SKETCHES WITH FEEDBACK

Feedback from User Walkthroughs

STICKY NOTES FEEDBACK

Paper Prototyping and User Testing

After my big sketches review, I started to sketch out the screens on index cards with the feedback in mind. For the next exercise, to switch things up, I sketched out screens that followed the user flow for searching and reading a story. I then asked a few willing participants to test my (index cards) prototype, have them talk me through their thought process, and ask for general feedback afterwards.

Like the previous exercise, the point of this exercise was to challenge my bias, and point out any flaws within the user flow of searching for and reading stories.

Searching User Testing

SEARCHING SCREENS FOR USER TESTING

Searching User Testing 2

TOP-OF-THE-LINE SCROLLING MECHANISM

There was some confusion with the paper prototyping but overall, all my participants understood and completed the activity successfully. The confusion came from the lack of words or instruction on the cards but knowing my participants completed the activity with the bare minimum solidified the structure of my design.

User Flow

After the second round of testing, I felt comfortable laying out the user flow of the app. My app was relatively simple, so I mapped out the flow of all important screens involved. So, I left out the settings and the onboarding process. I left out the settings because I didn't see any important functions or interactions involving the settings, and I left out the onboarding process (log in, sign up, etc.) because you do not need an account to view content, you only need an account to write and save content. As well, the onboarding process would be relatively simple - just a username and password - as anonymity and simplicity are core characteristics of the app.

User Flow Sketch

User Flow Sketch

The onboarding process would be relatively simple - just a username and password - as anonymity and simplicity are core characteristics of the app.

Second Paper Prototyping and User Testing

Once I mapped out the user flow, I began sketching more screens of the app, with more detail than the first stage of paper prototyping. This was done to provide more context for the participants, and mimic the actual interface of the app. This time around, the participants started with the first screen, and then I asked them to perform certain tasks, like reading a story, writing a story, checking through the profile, and more. Doing this last round of paper prototyping solidified my ideas and the current app flow, as all my participants completed the activity with no difficulty. To an outside viewer, repeatedly doing all these activities may seem tedious. However, this cycle of iterating, upping the fidelity, and user testing my designs is a low-cost and efficient way of testing my ideas and gaining insight to the feel and functionality of the app. Certainly, it did feel tedious at times, but each time, I realized something I previously overlooked, or someone brought up a feature that was worth consideration. As well, each of these activities took at most 45 minutes to complete, from sketching the screens to the last participant of user testing.

User Testing 2

SECOND ROUND OF USER TESTING

Insights from Paper Prototyping and Testing

By the last round of user testing, I felt comfortable enough with the design of the app to proceed to begin wireframing. However, I knew there were some problems that would require more research to embody the spirit of the app. These problems and their solutions were:

Types or Categories of Stories
Since the app revolved around story telling, as user testing progressed, I knew I would have to do extensive research and testing for what emotions the stories would evoke and mirror the wide spectrum of human emotions. I want it to be simple to find what kind of story users want to read, so limiting the number of emotional categories would be optimal. As this would have taken more time, I put it to the side, looked up popular theories on emotions, and settled with Humintell's Seven Basic Emotions: happy, sad, anger, surprise, fear, disgust and contempt.

App Name
During the second round of paper prototyping, I realized the name "share" was confusing to users as most thought the top button with the app name was meant to share their stories. I'm all about finding the perfect name for products, and knew that that would have been a lengthy task, so I decided to simply rename my app to "share and tell": a slight reference to "show and tell" during preschool, where children bring an object to talk about to the class.

Comments
Another huge undertaking: the structure of comments. I knew I would handle this more during wireframing but it was something I needed to keep in mind as comments - specifically people receiving the notification for a comment - are one of those patterns that can lead to social media addiction. I wanted the comments section to add meaning to a story, rather than just have it be a comment thread or simply a one line comment (such at @-ing other users, or "Awesome!") but at the time, I just saved the thought for when I actually would design the wireframes.

Wireframing

Preliminary App Wireframes

Preliminary App Wireframes

As I had already drawn up paper wireframes, recreating them in Adobe XD was simple. The colors I used are unimportant, rather, the goal was making it look and feel app-like, as well as embody the app's idea through fun text-interactions. During wireframing, there were two key things I had to think about: the commenting system, and user profiles.


Commenting System
Designing the commenting system took some thought, as I needed it to be simple to navigate, while avoiding the instant gratification patterns that cause people to come back frequently. While I am quite fond of Reddit's commenting system, I did not want comments to be entire threads. Rather, my hope for the comments is that they are all simple, thought-out responses to the story. I did not create a mockup of it but ideally, there would be a minimum word count for comments, to ensure they are thoughtful. As well, the comment button would be placed at the bottom of the story page, to assure the user reads the entire story before commenting.

App Wireframes - Comment Sys'm


User Profiles
As much as I would have liked to avoid it, user profiles were a necessity. In keeping with the app's theme, I only included the bare minimum of what could constitute a user profile: a username, a short bio, and a list of the user's stories. I suppose it could have just been a username (and the user's stories) but I included the short bio to make them a little personable. Users are able to follow other users and this following and follower count can be viewed in the user's profile tray. However, users cannot see other users' following and follower count; they can only view their own. I felt it unnecessary to be able to view follower counts as that number is held highly and a pursuant in traditional social media.

Another issue in relation to profiles are notifications. As the only type of notification are new comments on stories, I opted to use just a single dot on the profile panel icon and in the profile panel. It's not obtrusive nor attention grabbing, but with a contrasting color, it is still noticeable.

App Wireframes - User Profiles

Mockups and Interactions

Style Tile

At the start of the project, I believed the visuals were an important element of the app as the aesthetic and feel were crucial in making the users feel neutral when initially using the app. That is, I did not want the visual design to sway the user one way or another emotionally, so I opted for a muted look. However, I did include a palette of colors to use within the app should I need to use them, which I eventually did in color coding the emotion tags.

Note: My style tile was more of a guide than a brand identity, as I knew there would be conflicts down the line when designing the mockups.

Final Style Tile

Final Style Tile

Mockups

share and tell interface display

Final Mockups

The look of my final app mockups kept the same structure, but differed in style from my wireframes. Applying my styling differentiated my wireframes from the mockups. As well, a few elements changed from turning my wireframes into actual mockups, from either applying my visual style or functional considerations as a result from applying my styling. These elements include: the look of the individual stories, function prompts, and how stories are categorized.

Look of Individual Stories
I realized this was an issue once I applied my styling. Initially, each story on the feed had a drop shadow giving the look that it was popping out of the screen. I soon realized this clashed with the header, as it also had a drop shadow, giving the impression they were on the same level. To combat this, I simply made the stories flat with a dotted line separating each story (as there wasn't enough hierarchy separating each individual story).

Previous Wireframe

SAMPLE INITIAL WIREFRAME

Mockup with Style and Changes

AFTER APPLYING STYLE

Function Prompts
As I started applying my styling, I realized certain actions/functions could be highlighted (or encouraged) so I took advantage of that. Examples of this include changing colors of buttons to make them stand out, color coding the emotions, and including a dark mode. I felt that adding a dark mode was necessary as to give users an option of using the app without burdening their eyes.


How Stories are Categorized
When I started to color code the emotions, I realized the main screen would be clogged with options that may overwhelm the user. To combat this, I grouped the emotional categories within the search function and renamed it explore, to give users a sense of finding new things or stories. I then changed the main screen categories to 'Following', 'Popular', and 'New'. After these changes, I realized I would need to do more user testing or interviews to learn more about how users like their content categorized. Though, it would do for the moment.

Lessons Learned

There are two big things I learned when doing this project: my own design process and you can't do everything.

I learned early on that the design process should be adaptive and change project-to-project. Whatever UX activities a designer does should further the project in some way. During the first card sorting, it felt like I was doing it just for the sake of doing it. Though at that point, it served as a kickoff for the project as I had no idea how to proceed with such a broad topic. Throughout the project, there were times when I felt like I should be doing some other kind of activity, like doing user research when I was designing the wireframes. However, not following my instinct was more a matter of time than doing what served the project best.

Given the time we had, I realized early on there was no way I could do everything. By this, I mean doing user research and interviews, more testing, more hi-fidelity prototyping, etc. I'm more into designing hi-fi mockups and interaction design, so I left time at the end of the project for that, bypassing certain activities that could potentially improve the end product.


Thank you for reading!