WHAT
For my project, I was interested in the trend of private social media accounts. Many of my friends have multiple accounts on social media– one for their "regular" posting, then a private one that only a select few of their friends follow. I came across a post titled, "What if Everyone on Twitter Went Private?" The post did not provide an answer for this prompt, however I was set onto finding one.

BUT, WHY?
Obviously, if you wanted to create a private social media account, you can simply do so by changing your privacy settings on your Twitter or Instagram. However, I found that people still were not being their authentic selves on their private accounts. For example, I have been added to multiple people's private social media, even though I have not talked to them since high school. In fact, I myself have a private social media account that I still plan out and hesitate to post since I have a few followers that I do not talk to all the time.

This raises the question:
how might we create a digital safe space for users?

SAFE SPACES
What exactly defines a safe space? Are there already digital safe spaces? In Sara Wilson's article, "The Era of Antisocial Social Media," there is a statistic that claims that:
‍
"...nearly two thirds of the 1,000 people polled, all under 30, said they prefer to talk in private message threads rather than on open forums and feeds. Sixty percent of respondents stated that talking in private groups means they can “share more openly.”
‍
Group chats! Private group chats allow for most people to feel safe to be themselves and share authentically. So my next question is: what do private message/group chats allow that private social media does not? I decided to evaluate my own group chats and private social media.

The main difference I see in my private group chats and my private social media accounts, are the groupings of people in each. One of my group chats would contain just friends from high school, while another group chat would contain just friends from university. However when you look at my private social media, it contains both groups.

Many people would agree that depending on the group you are in, you behave differently. I definitely would act different with my classmates than I do with my family members. Although you may be acting "authentic" in both situations, you are still performing different sides of yourself.

MESSAGES TO POSTS
Now, taking the elements of a private group chat, how can we create that into a social media platform? One social media platform that also uses privacy (to an extent) is Snapchat. Snapchat allows for you to have control over what you send to certain people. Whenever I use Snapchat, I would send certain snaps in three categories: only a select few of my closest friends, only to my high school friends, and only to my university friends. Sometimes, to all three categories. I love the aspect of controlling exactly who your content goes to and believe that it allows for users to feel as if their content is truly private. There are other questionable features of Snapchat, however that is a discussion for another time.

LIMITING
Another aspect of social media that I found was a barrier to authenticity was how the platform limits their users. Twitter limits how many characters are in a tweet. Instagram limits how many photos you can post, and how long a video can be. Also, these platforms are based on sharing, so there are unspoken rules to what is a good post to be shared. For example, lengthy tweets take more time to read, and therefore does not have the same reach as a shorter tweet. These unspoken rules definitely affect how you perform on social media.

What I propose is rather than limiting what people post, is to limit who people post to. Because technically, that is how you interact with people in the real world. In real-life safe spaces, you limit who can see your authentic self.

I want to take this concept and limit the amount of friends you are allowed to add on the app I create.This will force people to really think of who they want in their close friend circle, so they are able to feel more comfortable. Therefore, users do not feel the social media guilt of having to add a friend (that you still consider a good friend!) they maybe haven't really talked to in a while.

INVITE ONLY
Another aspect I wanted to take from other privatized apps such as Discord and Slack were invite-only groups. As quoted from Elias' article, "you invite people into your home" you don't have your home easily searchable so people can invite themselves. For this reason, I wanted to remove the common social media feature of being able to search up certain groups or accounts.

But, what if you are invited to a group, but you do not want to share with everyone in that group? For that, I wanted to also create a feature where you must approve of everyone in the group to see your posts so you can be sure of exactly where your content is going.

KEY ELEMENTS
From the research I gathered, I wanted to add the following elements into my project:
   - a new social media platform that prioritizes privacy
   - full control over exactly who your content goes to
   - limiting audience instead of limiting posts
   - invite-only access to the platform

OTHER RESEARCH ARTICLES
"Done with Facebook and Twitter? Try Building your Own Social Network" by Katharine Schwab
"Is the Future of Social Media Private?" by Tobias Carroll
‍‍

KEYWORDS
As the application is centred around privacy and safety, the keywords for the aesthetic of the app are: clean, minimal, and safe.

Having a clean and minimal design makes the design of the app look more trustworthy, since it seems there is nothing to hide.
‍

ONBOARDING
Since I want to rely on invitations to join groups, I added in a section in my user flow which welcomes users that were invited to join the app through invitation.

ACCEPTING GROUP INVITES
Another flow I wanted to map out is how an invitation to a group would look like, and how the process of allowing sharing to people who were not your friend, but were in the group.

‍

IDENTIFYING IMPORTANT SCREENS
First, I identified which screens would be the most important in the project.
  1. Your feed, showing posts from your friends, groups, etc.
  2. Posting screen to make posts
  3. Your profile, to access friends lists and see groups
  4. Messaging platform, to message friends directly

This week, I began by creating low-fidelity wireframes for what I considered the most important part of the app– viewing/making posts.

Moving forward, I want to create:
   - mid-fidelity wireframes
   - a complete user flow
   - a few high-fidelity wireframes

From the critique, I realized I was off to a good start. The idea of private social media is great, however I needed something more to make users continue to return to the app. Also, I realized I had to rethink my target audience. Since it is a social media platform, I was originally thinking of a young adult audience, however the privacy the app promises would suit an older generation, who are more worried about privacy on the internet.
‍

My problem was I needed to find a feature on social media that small, tight-knit groups would continue to use. I decided to create a feature called "Memories." With this feature, groups can use a tagging system to create these Memories that they can view. However, I wanted to make the feature similar to a token, so there are goals in order to create a "Memory." In order for a group to unlock a memory, they have to reach 20 posts with the same tag. This unlocking feature is to make the groups have a goal to look forward to finish.
‍

Below are screenshots of the feedback tokens I gave to my classmates.

In two weeks I was able to create ourspot, a social media platform that prioritizes privacy and small, intimate group settings to allow users to be their authentic selves on the internet. The name "ourspot" recalls child-like language to refer to an area that is exclusively just for them. Also, the "spot" from the name continues in the visual branding, with the use of circles and rounded edges throughout the application.

Users interact with ourspot by posting text, photos and videos to be seen by their friends or people in their groups. When users make a post, they can tag the post which can create "memories," that are achieved after there have been 20 posts with the same tag. This feature is similar to highlights or stories on Instagram and Snapchat, however the goal of reaching a certain amount of posts to unlock the feature entices the users to continuely use the application.

To promote privacy, users are given only a maximum amount of friends they can add. This forces users to create a close circle of friends they feel comfortable sharing anything with. Also, when joining a group, users are given a list of all the members of the group before accepting. If they are not friends with members in the group, they must approve them in order to join the group. By doing so, users know exactly who and where their posts are going to.

View my final product here
‍

Overall, I am happy with the concept and features created for ourspot. I believe that features like these promote the concept of privacy and security which I was going for.

However, I will admit that I was not happy with the visual design of my project. This is expected, since this was a design sprint and creating a whole social media network could take months. I plan to continue this project in my own time, and paying more attention to grid systems and hierarchy to create a visual system I am proud of.

For assignment three, I am choosing Thano's project, Rivia. This project is a reading app for children, that uses a reward system to allow children to be motivated to continue reading.

I decided to choose this project because I really enjoy designing for younger audiences. Most of my past projects have focuses on young audiences, so I already have a lot of previous research and knowledge that I can bring towards this project.

After evaluating the current state of the app, I have an idea of what I would like to incorporate into the project. Some of these include:
- Re-thinking the brand & palette
- Incorporating guiding elements for easy usage
- Animated aspects for further engagement

From studying the original project, I knew I wanted to bring in more of the gamification of the app that Thano was going for. I also wanted to look at changing up the reading experience, where it might be easier for children to select words to define and sound them out. Lastly, I was also focusing on changing the interface so it would work on a tablet.

In order to further gamify the process, I wanted a clear UI that allows the child to view their progress on each book and create a reward system to help the child continue to want to read.

Emily Ong Solution

Emily needed a starting point for her app, so I decided to create a simple settings page. By creating a setting page, I was able to just figure out how spacing, a grid system, and hierarchy in her app could word.

Paniz Abidan Solution

For Paniz, I wanted to change some of the copy and styles of her text to make it more consistent throughout the application. Also, changing some of the spacing on her screens to be consistent and to match the Google guidelines.

Homepage to Reading Flow

Parent Account Homepage

Completeing a Quest Flow

Quest Page Flow

HOMEPAGE
For the homepage, I wanted the main elements to be seen are the elements that further show the gamification of the application. I also wanted the child to have easy access to the last book they read.

I took inspiration from other sites you commonly browse in such as Netflix and YouTube, so I created horizontal scrolling elements to see different books from different categories

LIBRARY
I also wanted a page for the children to see their most recent books, and also books they selected that they wanted. I used a similar vertical display as was shown on the homepage

PROFILE
As the gamification is a large part of the application, I wanted the profile page to show achievements that the child has earned. Also, I wanted this page to be very customizable to the child's liking, so adding a "My Top 5 Favourite Books" section and such.

BOOK OVERVIEW PAGE
Something that was missing from the original project was that when you clicked on a book, you were immediately brought into the reading experience. I knew I wanted to include a page where the user can see their progress, and their missions they have yet to complete, before going into the reading experience.

I first began by designing all of my "atoms", or components so I can easily use them within my design. I created a colour palette, buttons (static states and while pressed states), and different text styles.

At this time, I decided to rethink different ways to display the books on the browsing page, to let go of the "Netflix" system I had previously. However, I did not make a definitive decision whether to go forward with this style, so I waited for the A/B testing for next week to make a decision.

As the main feature of the app is to be able to read books, I knew the reading experience had to be well thought out. I have observed that when children read, they usually point at the words that they are reading. When they ask a question about a word they are uncertain of, they usually keep their finger on that word. For this reason, I made an interface where you can just press and hold on a certain word to bring up the tools to sound out the word, or to see the defintion. There is also a feature I wanted to add where users can "favourite" their word to add it to their personal dictionary of words on their profile page.

Another feature in the reading experience is the progress bar, that shows how far along you have progressed in the book. I also wanted to remind the user of the missions they could complete, so if you pull down the progress bar, their missions in progress are shown.

Further showing the gamification, I wanted a screen when they exited the book so that the user is able to see how they have progressed in their session. This creates a feeling of achievement, and will entice the user to keep revisiting the app.

My first preference test is to see how the users might bring up the options to change the background colour, text size, and text colour in the reading experience.

My second preference test is to see the difference in placement of sections in the profile page. By putting the achievements on the top, it feels more like a game. However putting the dictionary on top, the users will have easy access to their dictionary and it promotes a learning experience.

My last preference test is to see what the class thought of the different ways to display books in the browsing/home page.

For this week, I focused on how different buttons will bring up overlay screens.

As I began illustrating, I realized that the original container for books did not fit well with the illustration. I decided to change up how the container was displayed in order to highlight the illustrations created.

I continued to develop my high-fidelity prototype by filling in the mid-fidelity prototype with illustrations

These are the different user testing scripts created to navigate the prototype.

One of the features I wanted to create was a specialized background that would change in tune with the story. For example, in the story, the characters are travelling in a hilly landscape. As the story progresses, it becomes nighttime. As the user turns the pages, they can see the progression of how it becomes nighttime.

Another feature I wanted to make a flow for was the mission, and how they could be structured. One of the missions would be a quiz, so that the user would be tested on their knowledge of the book. This is a way the user can gain EXP and also special items, such as outfits of the characters in the book. Also, the quiz format makes it so the users are actually reading and retaining the information they have read.

This is the style guide created for the app.

Here are a few .gifs that show the micro-animations of my app.

Overall, I am happy with how this project came out. I believe my visual design skills were shown through the interface, style guide, and the illustrations created for the app. I definitely learned more throughout this project, such as micro-animations, as well as optimal button/font sizes.

If I were to give myself more time on this project, I would want to create a full onboarding experience so the prototype has a bit more context when you go into it. I would also want to work in after effects to create an interesting animation with my navigation menu.

see the final prototype

When planning out the website, I knew I wanted to make a one-page scroll that highlights the illustrations and features in the app. I decided to section them off based on the features, and accompany them with an illustration.

I identified three key features of the app: the book browsing features, the missions/gamification, and the definition tool.

Another feature of the app is the progress bar, which helps the child to understand how much progress they have made when reading. I thought about including this progress bar to grow while you scroll down the page.

When presenting to the class, I had no idea what to make the hero image of my website, so I asked for suggestions. The class enjoyed the illustrations made for the app and told me to utilize it in a fun way for the main image. Another comment I had was they were not a fan of the progress bar, and how although it relates to the app, maybe the placement and orientation of it should be reconsidered. Lastly, I was given the feedback to add more colour into the design, as the app is very colourful and the website is not exactly showcasing it.

Here are the various feedback tokens I gave to my classmates.

I had a lot of difficulty trying to think of a hero image and footer image. I knew I wanted to leave a good impression on the user, so these were important images to consider. Originally, I was going to have one of my characters to be the main image. However, I felt that I needed to add a bit more.

When looking at the feedback from last week, Georgia suggested to create an illustration with the characters coming out of the book. It really inspired me and I decided to go in that direction!

Since I established this book idea in my header image, I decided to bring back the books from my original hero image and use it in the footer.

I knew that to really make this website pop, I needed to have the images be animated. I wanted to keep the content simple and easy to read so simple animations would really bring this to life.

When thinking of how to incorporate high-quality animations, I was disappointed to find out that webflow did not support videos. I didn't want to go into the trouble of uploading my animations to youtube, or risk compressing my animations to make a gif. I decided to look into lottie animations. I found out it was actually very simple to create a lottie animation, and I loved how the quality turned out when it was on my website.

Overall, I am so happy with how the animations and look of my website turned out. I knew that keeping it simple and adding in these animations would really bring everything all together. I am also proud of myself for looking into lottie animations, and trying it out for the first time. I think this was a great exercise for me, especially since I usually avoid actually building websites.

see the final website