An end-to-end mobile app for casual writers
OVERVIEW
Project Scope: End-to-End Mobile App, Branding
Role: UX/UI Designer (Research, Wireframe, Prototype, Visual Design, User Testing)
Team: Self-directed with feedback from mentor and peers
Tools: Figma
Duration: 4 weeks (80 hours)
Social media has been oversaturated with photos and images of food, travel, models, and tons of cat pics. While the colorful luscious photos are eye catching and makes information more digestible, there is an element of depth lost as people subconsciously equate followers to friendship and liking a post to meaningful connections. In the age of media overload and instant gratification, the art of writing and the joy of reading has diminished greatly.
Writing can often be overwhelming. I believe everyone has a story to tell, a story about themselves or about a topic from his/her perspective that is unique to them. However, most people do not know how to tell it. Stories are what build connections. Even if the story is told orally, typically it starts with writing.
“WRITS” helps you improve your writing skills and express yourself so others can understand more about you, as well as for you to learn more about yourself. This UI exists primarily to encourage daily writing.
DESIGN PROCESS
1. Research
User Interviews
Empathy Map
Interview Highlights
2. Define
Problem Statement
Product Goals
Site Map
3. Design
Task Flow
Wireframe
Branding & UI Kit
4. Prototype & Test
Usability Testing
Wireframe & Iterations
Hi-fidelity Prototype
01. RESEARCH
To understand the usefulness of a product, I first need to understand people’s habits when it comes to writing. Do they use pen and paper or digital more? When do they use either? What kind of things do they write? Even seemingly trivial things like “do they type with both thumbs or index fingers or swipe to text with one finger?” may affect the UI.
Personal Interviews
Since Writs is an app that involves many elements from habit trackers, note-taking apps, and social media, I split my research questions in different categories for a more organized interview – i.e. journaling habits, blog posting, phone usage, and familiarity with memoirs. I included a snippet of the main questions used.
I interviewed a total of 5 people for ~45 minutes each. Most were people who either kept blogs consistently in the past or who considers writing a priority.
Journal/Diary
– Do you/have you ever kept a physical journal/diary? When and how often? What made you stop?
– What are some stuff you write about? (events, thoughts, emotions, etc)
– What kind of journal or book do you use?
Online blog
– Have you ever kept a blog? For how long?/What was frequency of posts?
– Why did you start the blog? Did you have certain goals?
– What kind of topics did you write about?
– What kept you writing? What made you stop?
– What platform did you use? What are some pros/cons? Likes/Dislikes?
Phone
– Do you ever type long sentences/paragraphs on your phone? When/what app? (text, notes, etc…)
– How long was the longest text you typed on phone? (#sentences?)
Memoirs
– Have you read any memoirs? Which ones?
– What do you like or dislike about them?
– If you were to write one, what theme would you focus on?
– Are there friend or family’s memoir that you’d be interested in reading? Who and how long (max number of pages)?
Closing
– Anything else you’d like for me to know?
Empathy Map
Based on the interviews, I created an empathy map to highlight the different things people saw, said, felt, and did. I also summarized their pains and gains in their experiences with writing.
- Instagram feed overloaded with random mix of categories (travel, food, fashion, snippets of friends’ lives)
- lots of distractions and advertisement posts/reels that are not relevant
- lots of visual eye-candy (photos) and not much writing content
- blogs with long entries
- There’s too many ads and irrelevant information. (referring to IG)
- It’s sucking up my time. I go look at a friend’s post but end up spending the next hour scrolling through IG stories.
- I stopped going onto social media because it feels so fake.
- I want to write more but don’t have the time.
- It’s fun to connect with friends around the world through writing
- Writing is a reminder to self of how to battle mental health and destress
- I’m allergic to writing about myself
- My life is not that interesting. No one needs to read it
- I don’t know much nor have much experience, so not much to share with others
- carries phone everywhere and jot down notes on it if anything comes to mind
- most ppl type 3-4 paragraphs max, but typically closer to 2-3 sentences on phone
- written blogs in the past (no consistent time)
- period of time when group of friends gave each other prompts and encouraged each other’s writing
- will try to write only if something strong comes to mind (typically not often) and when it does, oftentimes too busy
- nothing interesting or worthwhile to talk about.
- for blogs, feel a need to write a good chunk of content but also not too long – end up not writing anything
- people don’t read blogs let alone interact and comment.
- good to put thoughts down on paper (frees up the mind a bit)
- share conversations with friends I care about (not everyone)
- realized writing had a lot of impact on others (many friends who reached out to her)
- stress-free writing
Interview Highlights
Empathy mapping and affinity mapping are both tools used to analyze and organize information. Both were useful in finding commonalities and pinpoint key information to consider when designing the final product. Below are some insights.
1
Motivations for writing varied drastically, from wanting to grow in story-telling and improving self, to writing as a means of release all the thoughts on their mind, to being challenged, or simply having fun.
2
Generally, everyone preferred writing electronically for speed. Some preferred writing physically just for initial draft (more freedom and privacy).
3
4 out of 5 of the interviewees did not like writing about self. (Quote: “I am very allergic to writing about myself specifically.”) Most did want to write a book (i.e. fiction), though not a memoir.
People often stopped writing because they didn’t have a clear topic. Coincidentally, one success story was having a friend who would give each other topics to write about.
It was helpful to group interview questions in categories and work out transitions. The design process is iterative, and as I kept interviewing, I found myself adding/deleting questions, reorganizing or rephrasing them.
While some responses (i.e. people’s preferences to write electronically) aligned with my initial intent, some (i.e. interest to write memoirs) did not. Digging deeper helped me understand reasons why not and find ways to overcome those reasons.
Side note: it was very enjoyable interviewing others and learning more about them. Some of the interviewees were good friends and it was interesting to learn a side of them that I would probably never asked (i.e. questions related to memoir and their views of them).
02. DEFINE
Many people want to write more but feel like they don’t have the time or are too caught up with perfection that writing seems overwhelming, let alone, writing a memoir or book. Meanwhile, they also wish to connect with others on a deeper level than flashy photograph posts.
Problem Statement
To help busy people improve their writing, learn about self and those they love, and have fun bonding with others.
What is special about the product?
This product is more similar to a blogging app than anything else, but has advantage:
– over blogging due to more bite-sized and digestible posts, so others are more likely to read. It also encourages daily posting and for others to join in
– over twitter as everything is grouped in notebooks, so topics are easy to organize and find
– over IG/social media since it’s focused on personal writing and immediate friends.
Site Map
Site maps help define the scope of a project and gives a quick visual of what to expect. The Home page should be where the user will interact with the most, so it will have the important features of post history streak (motivation) and creating new posts (easy action).
03. DESIGN
Task Flow
In order to evaluate the usability of the app, 5 key task flows were identified. If users can navigate these tasks without much confusion, it would be the first indication of success. These tasks are:
1. Sign up for an account.
2. Post and edit an entry.
3. Create a notebook and add a contributor.
4. Follow someone else’s notebook.
5. Publish a book using previous entries.
See below for an example:
Branding & UI Kit
Because this is a writing app focused on writing skills, I wanted to make “words” be the highlight. Hence, I wanted to limit the use of pictures (especially photographs). Some level of illustrations and icons could make the app less bland so those were okay but even then, I wanted to keep the illustration colors more dull and less varied.
See below for color choices and style guide. For in-depth analysis of the logo design, see details in the link here.
04. PROTOTYPE & TEST
Wireframe & Iterations
Low fidelity wireframes were built as a starting point to build up the app. Based on further brainstorming and usability testing, several iterations were made. A total of 6 major iterations were made (each iteration involves multiple changes from minor style differences to complete layout restructuring).
For brevity’s sake, below shows only a few of these changes.
Iterations
HOME – quick page where users can quickly write an entry
LIBRARY – space where users can access all the entries he/she created
PUBLISH – While not “necessary” to your average user, this feature helps distinguish this app more from your everyday blog or note-taking apps.
ITERATION
1,2
MAIN CHANGES TO BE MADE:
- Simplify everything: 1. Make “My Daily” less cluttered. 2. For “Notebooks,” get rid of “tab” format (adds unnecessary complexity)
- Separate “Publish” section and “Library/Notebook” sections. (too many tabs within tabs causing confusion to users)
- Don’t get too attached to your idea. Do what is best for user. (I was stuck on skeumorphism for a long time and wanted to make it work)
ITERATION
3,4,5
MAIN CHANGES TO BE MADE:
- Add explore section for better and clearer navigation.
- Enhance the attraction to post on main page (i.e. larger buttons)
- Simplify UIUX by recalling main purpose of each screen (Avoid information overload.)
- Calendar in “My Daily” takes up too much space/distracts from posting
ITERATION
6
MAIN CHANGES TO BE MADE:
- Align sizes and styles to Material guidelines and used Figma mirror to get more accurate look on sizes
- Ensure consistencies between similar screens and features
- Ensure proper visual hierarchy (i.e for notebook page – other elements like the username was competing in hierarchy with the notebook title.)
Final Prototype
Please view the prototype here or check out my brief case study video below where I share a quick run-through of the prototype.
MONETIZATION
It’s always important to consider ways we can sustain a product. Thus, here are some possible ways for monetization:
1. Allow users to have a limited number of public lists. If they want more, there would be a cost. In addition, we can promote users’ works in searches or other ways, so that others may have more exposure. This could be a subscription fee.
2. Add more notebook customizations for paid users (i.e. notebook icons, notebook covers, etc.)
3. A core of this app will be the editorial side of writing. Once users have accumulated a collection of writing, they can consult a professional editor easily to help piece them together.
NEXT STEPS
The current product is primarily a writing app focused on improving one’s writing and connecting with others socially. It has the byproduct of creating a grander piece of work. There are few items to improve:
1. Feature Improvements
a. Habit Tracking – Explore better ways to encourage users to write daily (reward systems for streaks, unlocking certain levels based on word counts, published books, views, or followers).
b. Publishing – While the publishing feature is available in the design currently, it has not been tested as rigorously.
2. More themes – refreshing and nice to design more themes, notebook covers, icons, and other items.
3. Other applications – A mobile app is good for quick daily writing, but typing on a desktop/laptop is more efficient for longer text. Have an export feature from the app to desktop at the very least. It could be worthwhile to create a desktop app as well, if budget and use allows.
Possibilities are endless, but these are probably the most relevant or crucial for next steps.
WHAT I LEARNED
1. As with a previous project, it’s helpful to shorten the scope. I initially wanted to create a general habit tracking app – for exercising, reading, studying, and much more. Soon enough, I realized that the scope was way to large, and pivoted to the habit of daily writing.
2. I find that whichever iteration I was on, always try to simplify if I can. The less extraneous information available, the easier it is for the user to access the information needed.
3. Product placement is important. It’s difficult to figure out the best research questions without understanding what the product is. Is this more similar to a blogging app, habit tracker, note-taking app, or something else?
The UI process is repetitive. I might start off with one type of product, do research, and then realize the product should shift focus, which in turn, might trigger additional research.
WRITS CASE STUDY SUMMARY
The video is a ~5 min summary of this Case Study. It includes a quick run-through of the prototype.
