Paper Space
Giving people a digital space to track and visualize their emotions through journaling.
UI/UX designMobile AppFull-stack development
Overview
PaperSpace gives people a digital space to track and visualize their emotions through journaling. This app also provides users with guided prompts if they need a kick-starter to writing. Aiming to help motivate individuals in keeping a habit to journal while enabling them to reflect intuitively.
Skill set
Interaction & visual design, Brand identity, UI/UX design, Design system, Product thinking, and Front-end developmentTimeline
Jan - Apr 2020 (4 months)Platform
Evonne Oby Okoye — UX Research + Back-end Development
Yang Yang — Design Sprint Facilitator, UI/UX Designer, and Front-end Development
Tools
Design— Figma, Miro, Invision
Development— MERN Stack, ReactJS, Sass, Watson Tone Analyzer API, MongoDB
my role
Wore x hats to build this product
01
Product Thinking
Collaborated closely with group members with weekly meetings and follow-ups to define the app and project requirements. Together we defined priorities, and set out the product goals.
02
User Experience & Design System
Used design methods in our group sessions to break up complex decisions into biteable and approachable solutions. I created a design system to simplify the implementation of the mock up UI’s, in achieving consistent designs from prototype to web.
03
Full-stack Development
Stylized and created React.js components. I also co-developed in building the application using the MERN Stack and how the technologies used had successfully allowed for CRUD operations between our application and the server.
01 Problem Space
Identifying the problem
Journaling is an accessible way to define and reach our personal goals, to practice mindfulness, and to provide self-care.
The trend of journaling has also grown significantly over the past years. Through our interviews, we’ve discovered many people who view journaling as a beneficial way to understand their emotions and to practice mindfulness. However, we identified the problem of people challenged with journaling inconsistently.
We curiously wanted to enhance the digital writing experience by focusing on being mindful while improving the habit of journaling.
User Interviews
Understanding the Habits of People who Journal
We interviewed 5 individuals, characterized as young adults in college/ university or are working professionals. The questions focused in learning and understanding their journaling habits, purpose for journaling, and their writing experiences if that’s using paper or digital.
Main Insights
Identifying the Commonalities
The themes discovered from the user interviews revealed a common experience of people’s perception and purpose of journaling.
The user interviews revealed common themes on people’s perception and purpose of journaling and also habits.
The user interviews revealed common themes on people’s perception and purpose of journaling and also habits.
01
Journaling as way for reflection
“For me, journaling is a way to put out my negative emotions and have a better understanding of my trigger points.“
02
Unable to journal consistently
“I really want to journal everyday but it’s hard to find the motivation to write consistently on a daily basis.“
03
Values the writing experience itself veruses the sub-features that are distracting
“I really want to journal everyday but It’s hard to find the motivation to write consistently on a daily basis.“
User Persona
From a journaller’s POV
Collaboratively, we gathered insights and themes from our user research to create this user persona, Emilie, to identify our target audience’s user needs. We explored how this could drive the success of our product and design.
02 Design Process
Designing the product
HMW
We mapped out our solutions by going through each step and asked ourselves HMW's to find design opportunities, and followed by gathering inspiration. We enjoyed this part because it allowed for creative thinking and bringing in ideas on what people like. Our design sprint, facilitated by one of our team members, undeniably helped our decision in delivering the success of the product feature.
Collaboratively, we identified which features deemed higher priority. It was important for everyone to agree on the definite core features while also considering the technical and time limitations during that time.
Low-fidelity sketches
We started with low-fidelity sketches after determining our user task flow and continued iterating collaboratively
Problems identified
Work flow challenges
01
Technical feasibility
We were challenged with the technical feasibility in incorporating our proposed feature ideas as well as meeting the deadlines. This led us to think about the product more intuitively to determine the right core feature(s) we wanted to successfully attain for the app.
02
Created the branding and facilitated in the strategy for marketing the product
Taking a second look at our proposed ideas and in doing a second round of market research for journaling, we observed the use of graphical interfaces for displaying mood and behaviour.
03 Solution
Simplifying the product features for a seamless digital journaling experience
01
Centering the core experience on the “must-have” features
Given the time and technical resources we had, the group agreed on removing the “should-have” and “nice-to-have” features. It was important to focus on our technical capabilities and to ensure that we provided an exceptional user experience for these selected features.
02
Improving our technology stack for better user experience
Our goal diverted into finding a technical solution that would identify and analyze emotions from written text, thus uncovering user’s emotions while using the app. We researched APIs that would allow for analyzing emotions through user input text, and discovered the Watson Tone Analyzer, by IBM.
Introducing the final designs
PaperSpace
A journaling application that creates a digital space for people to freely write, while making sense of their emotions and to gain relief. People can practice mindfulness through gradient color-coded indicators, and also find the guided prompts users who need a kick-starter to write.
01
Color Gradients as Mood Indicators
Color-coded categories to visualize user’s emotions based on their writing content over weekly, monthly and yearly. These color gradients summerizes the emotions from the journal entries. It also provides a visual sense of how they’ve been feeling through the varying shades.
02
Color-coded Categories with Respective Moods
Each color with its respective mood showed on the entry cards based on your writing content.
03
Guided Prompts for Journal Writing
Guided prompts are offered for users who need a kick-starter to write.
05 Design system
Creating and documenting a product design system
We focused on creating a design system for the purpose of helping all team members in bringing PaperSpace to life.
Our design system focused on strengthening and improving communication for all team members to build consistency in the product’s visuals. With better communication led to efficient project workflow, saving our team some time in ensuring we’re able to execute the product design to its fullest.
Our design system focused on strengthening and improving communication for all team members to build consistency in the product’s visuals. With better communication led to efficient project workflow, saving our team some time in ensuring we’re able to execute the product design to its fullest.
Colors
Typography
Iconography
Tap Bar
Component
Outcome
The design system offered an importance of building consistency in PaperSpace and it also provided our team with the following skills:
01Collaboration Skills
A team effort, where each member is working together (designers and developers) to articulate and document the use of components, so that when it comes to developing them, we understood the use of the component. Involving everyone from the begining also helped with designing and building the components needed.
02Systems Thinking
A closer look into the component. Touching on UI aspects like color, typography and its styles, and weight. This allowed us to correctly translate the style guides to the right CSS properties when it came to developing the component for it.
03Design and Code
From design to development, this allowed our team to also speak in developers’ language. Knowing the typography styles and being strict with its code implementation.
Retrospective
Key takeaways
01
Not everything you plan will be in the final product, and that's okay
Initially, we had inspiring ideas of how we could make this app be exceptional. Due to the time constraints which led to limited technical capabilities, we exercised being adaptive in shuffling to find a method that best worked for our team, and I'll gladly say we did 🎉
02
Designing design systems to documenting meeting notes
These two project tasks were crucial in the product cycle of PaperSpace. There's definitely more space to grow and and improve in, but in all, it was a lot of fun and a wide experience for each of us.