Introduction:
We conducted our project under the following definition of designing “for friction:” to utilize design to encourage people to do less of the bad and more of the good. We further limited our project by deciding to focus on social media, a technological development that we agreed had become too dangerously prevalent and distracting in our society. From there, we each came up with several ideas until finally setting on what would eventually become Minimalize, a mobile application that promotes a more balanced relationship with technology by providing education on digital minimalism, tracking of phone usage, and management of your phone notifications. We wireframed several potential screens of the application and added visual accents inspired by other tracking applications currently in the market.
Problem Definition:
We received the prompt “design for friction” and began by discussing our assumptions on the topic. We talked about the definition of “friction” and how it, despite having connotations of obstructing something, is also necessary in regards to physics. In this way, we came to the conclusion that designing for friction means
“to utilize design to encourage people to do less of the bad and more of the good.”
With this in mind, we then defined a specific space and audience we wanted to design for. We asked ourselves the question, “What are natural habits we want to eliminate in human nature?” An answer that was common between all of us was distraction, especially in the form of social media. We acknowledged that we wanted to eliminate social media distractions in our life, but at the same time, the prevalence of notifications and mobile phones made this very difficult.
In this way, we decided to focus our scope on social media, specifically by eliminating the distraction it has in our lives. At the same time, in keeping true to our original definition of “encouraging people to do less of the bad and more of the good,” we hoped to also somehow add a preventative measure to our design.
Ideation:
Upon separation, we each came up with several ideas given the scope and problem definition. We posted these ideas on Slack prior to class so that we were all well-acquainted with each others’ ideas by the time we came together again. Several ideas included
- A notification manager that allows the user to categorize his/her mobile applications and adjust their notification settings based on categorization.
- An educational, feedback-based application that helps users both learn about and track their social media usage.
- An absurdist mobile application that uses AI to convert all the captions on the user’s Instagram’s feed to more realistic, less emotional wording.
- An extension that pops up a modal every time a user opens a social media site, asking him/her whether or not he/she is sure he/she wants to use the site.
After discussion, we decided to focus on the first two ideas and combine them into one function. We finalized our idea and defined our mobile application as a
“tool that provides education, tracking, and management of a user’s social media and his/her notifications”
In this way, each function of our mobile application addresses different parts of our initial definition of friction and our problem scope:
- By providing education, we can better educate young users on the consequences of distracting social media sources, thus preventing anymore harm in future generations. This plays into the part of our definition that defines friction as “doing more of the good,” for via prevention and education, we can better help future generations avoid the pitfalls of social media that have become prevalent today.
- By providing tracking, we can better help users learn about their own habits and create an individualized experience. This plays into the part of our definition that defines friction as “doing less of the bad,” for via candid, individualized data, we can better indicate to users their own social media habits that they should avoid doing.
- By providing management, we can better help users avoid receiving more notifications, thus allowing users to free themselves from the bad habits of social media. This addresses the entire definition of friction, “doing less of the bad and more of the good,” because it not only actively enables users to avoid being distracted by notifications, but it also empowers them to make their own decisions regarding social media consumption.
Sketching:
We began with some initial paper sketches of four major screens that we wanted to focus on for our app.
Home Screen:
We created a Home Screen that would be the central “hub” for the app’s functionalities. Here, a user can navigate to different aspects of the app.
Learning Screen:
Our Learning Screen contains a video as well as transcription to suit different kinds of learners. Here, users can educate themselves on how to create healthier social media lives.
Tracking Screen:
Our Tracking Screen contains helpful metrics regarding the user’s specific social media usage, coupled with self-created “goals” and limits that the user does not want to surpass. Additionally, by tapping on various social media platforms in the pie chart, the user can view more metrics regarding that specific platform.
Notification Manager Screen:
Our Notification Manager Screen offers a way for users to categorize their phone’s apps into different levels of priority (ie. High Priority, Important, etc.). Each category of apps has certain permissions for notifying the user on his/her phone.
Initial Wireframes:
We separated and each wireframed a portion of the application. Notably, we also made two wireframes for the notification manager screen because either version had various pros and cons.
Inspiration and Mood Board:
In beginning the visual design of our application, we first decided to research existing products that either displayed metrics or achieved simplistic, minimalistic design. This would help us get a better idea of what we wanted to put on our mood board, too.
Apple Watch Activity App
We noticed that this application provides visually interesting and diverse graphs that intrigue the user, which we wanted to accomplish in our Tracking Screen. Color, icons, and proximity all play a part in signaling different things to the user.
However, this app also uses an excessive amount of color to draw the user in, something that seemed paradoxical to our own app, which aimed to motivate users to stay away from their phones.
VSCO Photo Editing App
We noticed that VSCO’s use of white space and lack of color accomplishes the minimalistic look that the Apple Activity App does not have. Its grid layout feels very clean and neat, and the small addition of color serves to highlight action items without taking away from the overall vibe of the app.
However, we did notice that the icons at the bottom of the screen are small and unintuitive. Additionally, the font on the app is very small, making it inaccessible to some users.
Apple Notification Settings
It only seemed appropriate that we study this part of the iPhone, even though it is not technically a product. We liked the clever use of toggles and buttons to make customization easy on the user, and again, this app makes use of white space and proximity to denote categories. Additionally, the grid layout creates a very managerial vibe.
However, the ability to group by app type is difficult to find. Additionally, the lack of icons forces users to read every line of text. Finally, too many interactions (ie. toggles and buttons and menus, oh my!) can be confusing and overwhelming to the user.
Based on the product landscape we conducted over the aforementioned applications, we came up with several stylistic guidelines that would assist us in bringing our disparate wireframes together into a visually-cohesive app. Note that these were just some of the major design decisions we made before/while designing the app. Other techniques may also be prevalent, though.
- White Space: As seen in VSCO, white space seems to be a hallmark of minimalist apps. Given that the purpose of our app is to “minimalize,” we found it appropriate to take advantage of white space in order to create a calm, cooling atmosphere.
- Font/Type: We decided to go with a singular, sans serif font called Roboto because it was very clean and helped create a calm and cooling atmosphere by avoiding unnecessary lines or additions in the font.
- Color: As seen in VSCO, the black-white gradient creates a calming, minimalistic effect that we also wanted to achieve. However, as also seen in the Apple Activity app, color helps indicate activity and action items that the user can take. Thus, we compromised by using an overall black and white color scheme for the general framework of the app, used various shades of purple to indicate action items the user can take, and used red (sparingly) to indicate warning or risky items.
- Proximity: As seen in how Apple organizes its own notifications settings, proximity is important for denoting items that belong together. So, we not only made grouped items close to each other in proximity, but also used thin lines to denote changes to sections on the app.
- Iconography: We primarily used icons from the Noun Project, with additional graphics from undraw.co. This time, in changing icons for the secondary visual wireframes, we utilized icons with similar line weights that matched both each other and the lines in the app to create a more cohesive visual effect.
After considering these design guidelines, we created a mood board to help inspire us further in designing a cohesive and visually-interesting app.
Secondary Wireframes:
The Home Screen
The Home Screen slightly differs from the others in that it has icons in the header to avoid redundancy. Its buttons are also center-aligned and filled, to indicate navigation to the rest of the app as opposed to deeper down a specific portion of the app.
The Home Screen is also entirely center-aligned to visually signal to the user that this is the “center” of the app, aka where all his/her actions will begin and branch out of.
The Home Screen also demonstrates Fitts’s Law. The buttons are positioned near the visual stimulation and take up a large space, which makes them easy for users to interact with.
The Learning Screen
Unlike the aforementioned Home Screen, the Learning Screen’s header contains only a back arrow for the user to navigate back home.
The Learning Screen’s buttons also look different from the Home Screen’s. Their lack of fill and right-alignment denote traversing deeper down one part of the application rather than to another functionality.
Purple is used throughout the Learning Screen, from the buttons to the video’s play button, to denote action items.
Use of proximity and white space categorizes different parts of the Learning Screen into video-specific items (video and transcription), key takeaways, and further learning.
The Tracking Screen
The Tracking Screen has the most color out of all the other screens to denote metrics and data, mimicking the Apple Activity Screen.
To avoid confusion, objects with interactions (the pie chart links, the goal toggles) have drop shadows to signal to the user that these items can be tapped.
A light red tone is introduced to signal a warning to the user. In this case, the red contrasts with the purple to signify that a user has passed his/her toggled limit.
The Notification Manager Screen(s)
As aforementioned, the Notification Manager Screen has two versions. Version 1 has all apps displayed at once, and the user may tap a button to edit where these apps go.
Version 2 makes use of an existing iOS functionality in which users, when putting pressure on the logo for an app, can move it around between categories. Version 2 also hides apps in a drop-down menu when not in use.
To signal to the users that the apps can be toggled, especially in Version 2, all logos have a drop shadow.
Again, to signal different categories, we have made use of proximity and white space in the Notification Manager Screen.
Conclusion
Throughout the project, we noticed that when it comes to creating a minimalist app, less is more. Thus, we stuck with a lot of white space and only one (arguably, two) colors, both of which were mostly muted. Additionally, we used a sans serif font to create less distractions in the use of the app. All of these decisions were on-theme with what we hoped Minimalize would accomplish: to get rid of the user’s distractions on his/her phone. We learned that subtle design decisions like these could create different vibes and feelings for our visual layouts.
Nevertheless, the beginning stages of our process involved a lot of unsuccessful attempts. In ideating, we struggled with coming up with a cohesive definition for “friction.” Even after defining it, we had a difficult time applying this theoretical, abstract definition to a concrete idea. It required a week of brainstorming before we all settled on one idea.
Furthermore, we also struggled with creating a cohesive visual guide. With four members from vastly different backgrounds, we had very diverse ideas for what we wanted the app to look like visually. This is evident in our initial wireframes, all of which demonstrate a different style. Ultimately, by all deciding on one style guide and with the help of the mood board, we ended up with more visually-pleasing products.
If given more time with the project, we would want to be able to apply animations and interactions to the design, perhaps with Invision Studio. For example, the app initially did not feature so many drop shadows because we figured that, with animations, we could better signal to the users that these items had interactions (ie. how the app logos “shake” on an iPhone when you want to move them). However, since we could not add animations to Figma, we decided to add drop shadows.
After finalizing the visuals, we would also like to create more screens. With these screens, we would create a prototype which we could then test with users.