Try the clickable Prototype

Anti Social Wellness App for Desktop

Overview

my role
User Experience
Brand Development
Content Strategy
Team
Marilyn Newnes
(solo)
Duration
4 Weeks
September 2021
6 screen shots of final prototype anti social featuring an onboarding page, activity pages - reading, writing, drawing, and a dashboard.
SUMMARY
In recent years there has been a lot more awareness of the effects of social media addiction on our overall well being. As well there has been increased conversation in the powerful effects of mindfulness. Anti Social is an activity based wellness app to be used as a "social media alternative" for people who overuse social media as a means to avoid boredom. There are many meditation apps on the mainstream market in which you passively meditate to an audio recording. I wanted to explore how it would look to take a more action oriented approach to mindfulness.
Problem
Social media is known to have addictive qualities and many struggle to know when to stop, especially when its being used to distract from negative emotions, boredom, or when feeling socially awkward. Users needed an alternative tool that could soothe these negative emotions without using features that use their dopamine to keep them scrolling.
Solution
Anti Social media allows users to choose from three different activities that would deeply engage and occupy their brain in mindful thought, without the addictive qualities of social apps. Activities the user can choose from include reading, writing, and drawing. Depending on the activity chosen, the user will be prompted with a creative challenge - free writing, art therapy, or a short story.

image of the landing page in detail, shows each tab of descriptions with screenshots for reading writing and drawing
Process
User research
During the discovery phase it was important to narrow down my project scope, get to know what makes users tick, and review the competition.
Formative research
I conducted formative research on the affects of social media overuse as well as common reasons for it. I applied this research to the questions I asked in the survey, as I needed to know which of these reasons affect my users the most, so I could apply my focus there.
User Survey
29 Respondents
Conducted using Google Forms
User Interviews
3 Respondents
Conducted in person
How is social media affecting ther lives?
visual representation of survey data for the most common affects of social media over use. Shortened attention span - 53.6 %Having no time for self-reflection - 46.4 %You feel more anxious, depressed, or lonely after using social media - 35.7 %. Other questions include: feeling awkward in social situations, spends more time on social media than real friends, worrying you have no control over whats posted about you, and 29% for sleep problems. 29 % for low self esteem
Shortened attention span 53.6 %
Having no time for self-reflection 46.4 %
You feel more anxious, depressed, or lonely after using social media 35.7 %
Sleep problems 29 %
Low self esteem 29 % 
Other questions asked:
Spends more time on social media than real friends
Used as social substitute
Worrying that you have no control over what is posted about you
The results of this question largely influenced my design decisions as I learned I needed a design solution that would provide users with time to self reflect, prolong their attention span, and avoid worsening their mental health. All this while also keeping them deeply engaged to prevent feeling bored.
Common reasons for social media overuse among target audience
I focused on the top results from the survey
‍
Boredom 85.2 %
Self soothe unpleasant emotions 48.1 % 
Feeling awkward/anxious/lonely in a social situation 33.3%
Features they want to see
Visual representation of data from survey: Showing features that users want to see the app. 61.9% non news reading content (short stories, informative or educational articles) 57.1 % Goal setting or manifestation activities. 42.9% art therapy inspired prompts 38.1% free writing, journaling, or self reflection prompts. 42.9% planning, scheduling or calendar like features, 28.6% old fashioned newspaper games such as croowords, sudoku, or word search
Order prioritized
Non - news reading content: Short stories, informative or educational articles 61.9 %
Goal setting or manifestation activities 57.1 %
Art therapy inspired activity prompts 42.9%
Free writing, journaling, or self reflection prompts 38.1 %
Planning, scheduling, or calendar like features 42.9%
Old fashioned "newspaper" games such as crosswords, sudoku, or word search 28.6%
Narrowing the scope
I was surprised to see such a high percent for “Planning, scheduling, or calendar feature." I grappled with how to include it but struggled to see how it would fit into an MVP with the other top results.

In order to reduce feature creep and narrow the scope I decided to focus on the top activities which could be logically grouped together: reading, writing, and drawing.
It was also difficult to accept the low results of  “Old fashioned newspaper games” as this was one of my biggest inspirations for the app. I had recently played a crossword puzzle that was shared on Facebook. I was astounded the calming effects it had on me. It was great to break away from my usual mindless scrolling and made me feel more mentally alert. I accepted the results and moved on.
SWOT Analysis
The most commonly used wellness apps based on the survey were Calm and Headspace. I conducted a SWOT analysis for these top apps.
Logos for top apps: Headspace with an orange circle logo, and Calm in a blue gradient square with rounded edges and white cursive font.
Strengths
Headspace
- Dashboard was well laid out
- Easily digestible educational articles with a focus on wellness
- Headspace for work - marketed as workplace benefits is smart
‍
‍Calm
‍- Incorporated master classes
- Evening stretch videos
Opportunities and Weaknesses
Both apps target mindfulness primarily through passive listening. This leaves space in market for activity based mindfulness.

Calm’s onboarding felt too long, forced, and frustrating. It felt like a marketing gimmick with no direction.
Key Takeaways
‍Headspace and Calm were very similar apps, but using each felt completely different. Headspace's use of empowering, educational articles made me feel informed with a sense of trust. Calm's use of onboarding and personalization left me feeling strung along. I realized the onboarding process can make or break a site, so use it wisely.
Competitve Analysis
Unexpected challenge
There were many differences between the top apps and my own idea that I was left with unanswered questions. I began to realize the complexity and uniqueness of this project as I struggled to find competing apps. I had to conduct more research on the features identified in the survey.
I did some digging to find other websites that offered free writing activities. I found limited options.
screen shots of various free writing sites used for competitive analysis
Squibler
A website that provides a writing prompt. If you discontinue writing, a countdown is triggered and you risk losing your work. Begin typing to stop the countdown.
‍
Calmly Writer
A site with minimal design and a simple purpose: Writing. You have the option to save or download files.
750 Words
A homemade site with the incentive to write 3 pages (250 words each) each day.
Key Takeaways
  • A better writing tool is needed for prompted writing.
  • Opportunity to make free writing mainstream
  • Calmly Writer had a strong design for inspiration and remix
  • Fear is not an affective way to encourage users to continue writing, but prompts can be a lot of fun

The Users
Target audience
From the survey I was able to discover who the user is, as well as user trends.
Shows data from survey using pie charts and scatter plots. gender pie chart: 34% female, 7% prefer not to say, 59% male. education pie chart: 44% master's degree. 44% bachelors degree, 7% certificate or ticket, other. 4 % some college. headspace was most used wellness app, followed by calm. professions: product designers, architecture, technology, graphic designers, students. Social apps used respectively. instagram, facebook, youtube, twitter.
based on 29 respondents:
Gender: Male 59%, Female 34%, Prefer not to say 7%
Education: Master's Degree, Bachelor's Degree , Certificate / Ticket / Other, Some College
Occupations: Product designers, Architecture, Technology, Graphic Designers, Students
Apps used in order of highest reported: Instagram, Youtube, Facebook, Twitter
Most common wellness apps used in order of highest reported: Headspace, Calm
‍
Personas
From the research I created two personas - Miriam and Jose.
image of female prototype in back of car holding phone. white t-shirt, sunglasses hang off shirt. wears a lot of jewelry, hair in messy bun. she's smirking. holding pen and phone.

Miriam, 27

Archetype: Creator / Innovator

Profession: Designer

Location: Vancouver, BC

‍

Motivations

  • Creative, social person
  • ADHD, depression, anxiety cause her to neglect needs 
  • Over uses social media to self soothe
  • Gets stuck scrolling
  • Worsens mood, creates vicious cycle
  • Infinite scroll, notifications, likes, and shares contribute to her problem

Frustrations

  • Shortened attention span, 
  • Lonely, isolated, disconnected
  • Spends all spare time scrolling, no time for her values

Goals

  • Needs a “safe place” app
  • Needs a more positive distraction from her negative emotions 
  • needs a tool to prompt her to connect with herself
  • bridge the gap of boredom while she finds her way back to reality.
“I’m an extrovert but when I’m [feeling] down I just isolate myself...seeing people makes me feel better...but it gets too hard... I just go on Instagram a bunch, but then it’s all ads anyways… but I can’t stop”
male sits on cement wall, overlooking a city. wears glasses, brown shoes. has brown hair.

Jose, 36

Archetype: Sage / Knowledge

Profession: IT

Location: Vancouver, BC

‍

Motivations

  • Quiet, shy, self aware
  • Drawn to social media when feeling socially awkward
  • Likes to read articles found on social media

‍

Frustrations

  • Articles lack substance
  • Leave him more anxious, afraid of world
  • Clickbait articles

Goals

  • Articles lack substance
  • Leave him more anxious, afraid of world
  • Clickbait articles
“[it’s all the] same articles over and over saying...there was a murder or whatever. So you don't just hear it once... Then I’m always thinking ‘Man there’s killers everywhere’.”

Story Boards, User Stories & Flows
During user interviews I identified a number of different user stories and pain points. I evaluated them closely in order to determine the highest priority stories to direct my focus.
From there I created two story boards to better visualize their pain points.
Story board for Jose: Shows him riding bus alone on phone. reading shocking news, looks out window to city, fearfully. discovers Anti Social and reads short stories instead of fearful news. Feels better in public and less anxious. Uses the app when bored or anytime he feels like reading

Primary User Story

As a person who struggles with social media overuse I want an app without addictive features that can distract me from negative thought patterns so that I can reconnect with my personal goals and values.
Story board for Miriam. Shows her sitting in bed on her phone, shocked by the time, scrolling more, using Anti Social app, draws a mug, thiks of her cousin, gets in touch, feels better about life.

Secondary User Story

As a person who uses social media in awkward social situations I want something that activates my brain in a more positive way so that I don’t worsen my mental health.

user flows
Next I sketched user flows so that I could visualize the path a user would take to accomplish their goals.

Image for story board: Downloads app, introduce the app, dashboard, homescreen, select activity, complete activity? select next activity, save progress? create an account, enter name, account created, current activity progress saved, close app.
Sketches & Wireframes
I began with sketching my ideas for the dashboard and activity pages, weighing the pros and cons of multiple design solutions.
papers scattered showing sketches of wireframes
Wireframes
After deciding on a design that balanced both minimalism and ease of use I fleshed out the wireframes using Figma.
6 screen shots of wire frames for anti social. black and white images only with limited detail.
Usability Testing
Usability testing
To ensure the landing page, dashboard, and interaction design was user friendly I ran 2 rounds of user testing on the Hi-Fi prototype before implementing changes to the final prototype. Because this product is so unique I also needed to find out whether or not users understood the purpose of Anti Social, as they would have no other mental models to reference.
rOUND 1
3 participants
Conducted in person task completion
Round 2
Conducted virtually through Maze
13 participants
improving the landing page
Shows how landing page began with limited information and vague screenshot progressing to the more detailed landing page: image of the landing page in detail, shows each tab of descriptions with screenshots for reading writing and drawing

My first design featured a vague landing page as I thought this would instil curiosity. That assumption turned out to be incorrect as one tester commented “I thought it was run by the Russians trying to get my information.”
INCREASING USER TRUST
In order to improve the sites trustworthiness I redesigned the page to include more detail on the product, including screenshots of each feature with detailed descriptions on how they can be used to improve a person's mood.
Getting it right
This change increased trustworthiness and general understanding of the site improved, however there was still some confusion.
Design interaction tested well but still with room for improvement with an average success of 69.2%
Future iterations are needed for product functionality.
Improving the activity page navigation
The app's internal navigation originally used straight forward text, with all buttons in one confined area. I theorized that maintaining consistent UI across each activity page would increase learnability and reduce finding time as each activity page had different navigation needs.
However the visual design was clunky, dated, and didn’t spark delight. I received valuable feedback from an experienced designer who explained icons and their location are crucial for ease of use. I removed the old navigation and incorporated arrows and icons, all grouped within the text box.
Shows progression of app design annotated with arrows and circles. highlighting navigation changes, and ui improvements, as well as page naming updated.
MODERNIZING THE UI
The visual design still looked dated. I swapped the framed activity box to better utilize negative space and modernized the prompt with light a light grey banner to keep elements grouped together. All test participants changed prompts on first click.
Naming the pages
Testing proved there to be confusion over the page label "Activities" as users weren't sure how this was different from the dashboard. They were completely right. I changed the label to "My Projects" to indicate an archive of a user's previous projects.
Brand Identity
To ensure the landing page, dashboard, and interaction design was user friendly I ran 2 rounds of user testing on the Hi-Fi prototype before implementing changes to the final prototype. Because this product is so unique I also needed to find out whether or not users understood the purpose of Anti Social, as they would have no other mental models to reference.
Logo creation
To start building a brand identity I began sketching ideas for a logo. The user audience identified was mostly male, but the disparity wasn't huge, and I wanted to make sure I was designing for people who chose not to disclose their gender as well. Therefore I approached the branding with an end goal of gender neutrality.
A paper sketch of many different logos I considered - clouds, zig zags, ground symbol, water, chain link, ying yang, stop sign, eggs.
Final logo decision
I was inspired by the 80s to appeal to our creative persona and to keep in line with current trends. I explored a retro tropical feel using different colour combinations and gradients but in the end decided a plain black logo maintained minimalism and simplicity.
Different variations of logo considererd: striped 80's sun with Pink and peach gradient, all black with name incorporated to the sun, sun with striped gradient sunset and sky, and final version of black sun with gradient textured stripes
COlour theory
Typography and colour choices - a light teal colour, a light pink, light grey and off white. Represented by circles. Font variations and sizes / boldness for poppins: a sans serif font and Frank Ruhl Libre for body- a serif font. shows how tabs will look as well as button variations. Anti Social typography used for logo is Rubik Mono One, a bold sans serif, all caps font.
I chose a light teal colour for its calming properties of blue with the renewal qualities of green
Teal represents open communication and clarity of thought
An off white was chosen to reduce eye strain as the personas are heavy screen users
Style tile
To ensure the branding was cohesive and telling the right story I put together a style tile.
Shows a style tile for the branding and ui choices for Anti Social. buttons with solid black drop shaddow. Teal colour. bold font (poppins) and images of black and white architecture. Light grey background. Features the Anti Social 80's textured sun logo
Accessibility
I ensured the colour contrast of buttons and text all passed with WCAG AA rating from WebAim Contrast Checker. As well, button sizes are within the recommended range at for optimal web viewing at 67 px. Font size is ensured to be no less than 16 pixels to ensure readability.

Clickable Prototype
Anti Social Prototype
6 screen shots of final prototype anti social featuring an onboarding page, activity pages - reading, writing, drawing, and a dashboard.
Conclusion
End result
I created a minimalist desktop mindfulness app that focuses on reading, writing, and drawing. It allows people to take a pause from social media and engage their brains positively. 
conclusion
This was an exciting project that allowed me to explore 'going against the grain' in a way that I may have the opportunity to in the future as I launch my career in UX. In the end I did not end up with a perfect product. However, the value of this project came from the challenges I faced that made it undeniably obvious that the grain goes that way for a reason.
WHAT i learned
Choose platform best for the product, not your portfolio!
‍I chose to create a desktop application, as I wanted to challenge myself and gain the experience. However, the reality is it would have made more sense for mobile. Making this choice lacked logic and over complicated the project as I felt I was going against user needs in vane.
‍
‍Cut features down by half... and then do it again!
‍In hindsight I would have focused the idea on just one feature - ie free writing... and just do it really well.
‍
‍The design process exists for a reason!
‍I chose an overwhelming idea and struggled to define the product. In hopes for clarity I was sketching wireframes before I knew what the product goal was. I wasted a lot of time on sketches when I would have found clarity with a few more surveys. 
‍
‍Experienced Sunk Cost fallacy. I put a lot of time into an idea that needed a lot more refining before diving in.
rEAD ANOTHER CASE STUDY
January 2021

Artfeed Mobile

An app exclusively for local Vancouver artists to sell their creations, making it easier for users to shop local.

screen shots of artfeed mobile on iphones
Want to know more?
Drop me a line!
mari.newnes@gmail.comLinkedInInstagram
Download Resume
Marilyn Newnes
Vancouver, BC
Powered by Webflow