Doable
The Productivity App
Project Brief
In today’s world, the Internet and digital tools have taken an increasingly important place in people’s lives. We have much better access to information and entertainment, which in itself has a wide variety, but can lead to distraction, poor planning, or a loss of purpose. Our minds are diverted from more important, meaningful work, towards pointless tasks or procrastination.
Over the course of this project, we aim to identify which tools are currently used to mitigate productivity pain points, and what are the key pros and cons among the top existing tools. Based on the results of this research, we intend to craft a possible solution.
Project Overview
Platform
iOS, Android
Role
Research, Design
Tools
Figma, InVision, Pen, Paper, Miro
The Challenges
We were given a topic—PRODUCTIVITY—as a starting point of the project.
There was no specific PROBLEM or GUIDANCE at the beginning. Also, the CLIENT was not clear yet.
Productivity is a broad topic since it relates to many aspects of the way people work to achieve their goals. Besides, everyone defines “productivity” differently. Despite the fact of working effectively, people also have many challenges or pain points that prevent them from reaching their goals.
Our research should explore both ORGANIZATION (e.g. goal setting, information management) and AREA OF APPLICATION (e.g. teamwork, personal life) involved in this wide topic. In addition, we will create a TOOL that supports users, help them to be more productive based on their personal and professional goals and needs.
Let's look at the market?
The productivity software market is extremely competitive, but also extremely diverse, so many niches might reveal themselves during our user research. The research revealed a few gaps in the market that we should explore:
- Users tend to favor tools that combine multiple features or connect with many other applications. These features can be collaboration, file sharing, note-taking, task or project management, etc.
- Team collaboration, project management, and knowledge sharing are of crucial importance.
- Due to Covid 19, there is a huge shift from office work to remote work.
Let's see what's going on?
I did the competitive analysis among top competitors to understand the marketplace and features that they are using for their productivity apps. I also studied things that they are doing well and what aspects need to be improved as a way to acknowledge strengths and weaknesses among productivity apps.
They are: Agenda, Basecamp, Notion, Todoist, Slack, and Mint
- Offers note-taking for meetings, journaling at work or as an agenda
- Supports integration with a wide variety of apps and services
- Offers a huge variety of content types to add. Can import data from other apps
- Integrates with many other collaboration and office tools
- Enables productivity reports, collaboration, and offline functionality
Noting Assumptions before Research
- We primarily targeted adults of working age, with established goals for their personal and/or professional life.
- We did not limit our demographics by gender, social class, or country, but we needed them to speak English.
- We targeted young adults trying to establish goals for their personal and/or professional life.
- We might be interested in hearing from people with a certain level of success in their personal or professional life, as well as productivity coaches, once again without demographic limitation.
Speaking with potential customers
For our discovery research, we spoke with ten participants. Below are some of the questions we asked during our interviews.
Defining Productivity
How do people define productivity?
How do people define success?
Which tools do people use to be more productive?
Organization
How do people define their goals?
How do people schedule an ordinary day?
How do people organize their data (documents, notes, etc.)?
Personal Life
Do people have life goals?
How do people balance work & life?
How do people keep on top of their finances?
What do people do to enjoy meaningful time with their friends & family?
Work Life
What are people’s biggest challenges when working with a team?
Do people prefer to work remotely or in an office?
What are people’s favorite communication tools?
Interview Insights
90% use tools to keep track of their goals
70% value creativity in their professional life
30% wouldn’t work on a perfect day
50% prefer working at an office over working remotely
60% think productivity is about working efficiently
50% mentioned looking for a tool that fits them
40% want to move to a better position
40% mentioned non-professional goals
30% mentioned time blocking doesn’t work for the
Which tool do people use to achieve their goals?
We wanted quantitative data to back up what we heard in our interviews. We did a survey to gather information about a participant’s choice of tools and applications when it comes to their productivity and to verify/confront our initial assumptions about our target demographics.
We shared our survey on social media to reach a wide range of people. We had a 10% response rate.
75% are younger than 40 years old and 44.5 % are students. Additionally, the COVID-19 clearly affected people’s work environment, as a large majority reported working from home:
61.2% work from home, 22.3% work in an office or a classroom.
27.8% are employed and 11.1% are self-employed.
Keeping up with Goals:
• 25% use a note application
• 19.6% use a to-do list
• 19.5% use journaling
Scheduling a day:
• 66.7% use a calendar
• 61.1% use a to-do list
• 55.6% use reminders
Documenting:
• 61.1% USE PEN & PAPER TOOLS
• 52.8% use Word, Pages, or Docs
• 47.2% use Excel, Numbers, or Sheets
• 33.3% use PowerPoint, Keynote, or Slides
• 27.8% use Apple Notes or Google Keep
Collaborating:
• 83.3% USE SIMPLE TOOLS WITH LIMITED FEATURES(calls or SMS)
• 77.8% use video calls
• 77.8% use e-mails
• 77.8% use individual IM platforms
• 50% use group IM platforms
Key Research Takeaways
- It's ok to target our professionals, but students should be our primary audiences based on the data and students need more help organising their days.
- Users' working styles are shifted from working in a office to working remotely, so that they need help to manage their work
- While we were expected advanced tools, the majority want simple tools as flexible as a pen and paper.
Synthesizing Our Research
Synthesizing our user research helped us define our primary persona—Angela—as our primary target audience are adults of working age, with established goals for their personal and/or professional life. We saved the other personas for a future version because of our time constraint and this was our MVP.
Synthesizing Our Research
We created the journey map based on the primary persona. This journey map is basically about the journey of a student over the course of a day—Angela. It reflects on her thoughts, actions, and feelings during a normal day. Creating this journey map showed us gaps where opportunities lie to create a more holistic solution for our primary persona.
What we decided to solve for
The research that we synthesized allowed us to define our problem for our primary persona. We created a problem statement so everyone on the team was on the same page with what needed to be solved.
The at-home student needs a tool that organizes her schedule, reminds her of her tasks, and provides her with a report of daily activities, so that she has more time to nurture a positive mindset, communicate with her peers, and enjoy a better work/life balance.
Design Principles
We came up with 4 design principles based on the research and our values as a team. These principles guided our focus while we developed our solution.”
Trustworthy
User Centric
Positive
Easy, fast & reliable
Brainstorming
Based on our research, we found that productivity apps are more popular in the sense of usage and convenience. Because apps were more popular than websites, we decided our solution should also be an app. In addition, we were debating about which features we should include in our app. We used the Kano Model to prioritize must-have features and baseline features for the app.
Concept Sketch/Paper Prototype
Based on our research data, we brainstormed some potential features and interfaces. As a result, we came up with two potential concept sketches. We then tested these two conceptual paper prototypes on people who fit our target audience.
- Concept A
This concept sketch allows users to see tasks by day and month, get reminders, and prioritize their tasks.
- Concept B
This concept sketch has side navigation, a timeline for the next day, and a daft area where users can add their tasks before setting up a goals.
What worked?
-
Ability to see what comes up the next day (concept B)
-
Badges (concept A)
- “New task” button on every page (concept B)
What to work on?
-
Confusing labels (“Inspirations,” “Statistics,” “Inbox”)
- Homepage shouldn’t scroll (concept B)
- “Search” (missing in concept A)
Sitemap
After brainstorming features and prioritizing them using the Kano model, we came up with the following sitemap. The sitemap provided us a clear vision for the product and allowed us to be on the same page for expectations with what we would design and build. It also gave us an idea of how to organize content and create a taxonomy for the app.
Wireframes
Labels and navigation placement took us a lot of time to decide. For example, many apps have a past/done area called “Logbook,” and a draft area called “Inbox.” However, we found that those labels are confusing to users, so we renamed them “Archives” and “Drafts.”
We originally placed key screens in a bottom navigation and other important screens in the left sidebar, but this solution was confusing to our usability particpants. As a result, we placed everything in the left off-canvas menu. However, after more testing we found people missed some critical functions in the app. Therefore, the solution was to streamline our navigation and place essential items in the bottom navigation.
Therefore, the solution was to streamline our navigation to the point and placed them into the bottom navigation.
Usability Testing
We targeted new users who fit our primary persona. Someone who is a student, in their early 20s, trying to maintain a work/life balance with school.
Prototype
100%
liked the simplicity & understood the app’s purpose
80%
used the word “help” when describing the app’s purpose
80%
of the experienced productivity app users found the app too simple
80%
showed confusion about the “close” button on the task details screen
40%
showed confusion about the tag features and how they should be used
20%
used the “Drafts” feature
What's Next?
- Explore the possibility of renaming the "Drafts" section since only a few users found it. Or test the response to removing the feature.
- Clarify the "tag" feature to make it make more sense to the users by adding descriptions or explanations during on-boarding.
- Consider adding a few interactions to make the app less simple and more interesting to use.
Lesson Learned
From this project, I found that research and usability testing are so important because we are able to identify the problems, understand the user’s needs, goals, and pain points. As a result, a product has been created based on those insights that are really beneficial to users. This design process is super important for UX designers.
Besides, studying productivity and learning about how people are working not only help us with the design process but also benefit us individually. Working efficiently requires many efforts and finding the best tool that fits our working styles is another important step.
Hair Salon Web + Logo Design
Design and develop a responsive website, brand identity, and social media presence.
Project Brief
Eric’s Salon is a barber shop that is located in Scotts Valley, Santa Cruz, CA. The salon has been serving its community for 15 years. Eric—the owner of the shop wants to expand his business in order to reach more customers in other areas. As he is self-employed, he is mostly doing everything by himself from financing to managing appointments.
Eric couldn’t manage everything by himself because his client base is growing. Therefore, he wants to hire more hairstylists to share the work as well as to promote his professional services to the community. He realized that an online website could do many things to promote the shop from conveying the shop’s identity to bringing more clients into the shop.
Project Overview
Platform
Responsive Website
Role
Designer & Content Strategist
Tools
WordPress, Adobe Creative Suite, HTML, CSS
The Challenges
Eric does not have any online presence at all. He needed a complete online presence built from scratch. Despite the truth that there are many hair salon websites in the market, my problem was to create a professional-looking website that shows Eric’s style and what services are provided. Eric also wanted to include booking and paying for services on his new website. These functions will help eliminate busy work and make booking clients easier. In addition, he wanted a new logo for his shop, so he can use it for brochures and marketing purposes.
Talking with stakeholders
After the kickoff meeting to learn more about his business’ goals and needs. I understand that Eric wants a responsive, professional looking website with all features working correctly, so that his clients will be able to book and pay for services online. The new website has to have a professional looking, easy to use and functioning properly. Eric also wants a professional logo for the shop, so he can use it for brochures and marketing purposes.
Sitemap
I created the sitemap for the website to organize the pages and help my client visualize the structure of his future website.
Concept Sketches
After several meetings to talk about concepts and get his approval for the sitemap, I came up with the concept for the 3 main pages.
I applied the minimalist design to focus on the content while giving a professional and clean impression to visitors.
Let's take a look at the final website
Below is the screenshot of the homepage which included salon hours, brief summary about the shop, links to the services, social media presence, testimonials and contact information. Booking buttons are placed around the page for easy access to the booking system.
The website is responsive to every device from web to mobile.
Additional Work
- I helped Eric purchase domain name "erics-salon.com" and hosting from BlueHost.
- I installed an online booking plugin from WordPress and set up for automatic SMS from Plivo.
- I set up and maintain the social media presence for Eric's Salon (Facebook, Instagram, Yelp).
Logo Design
Thumbnails
Eric wanted to add an elegant style and a welcoming feeling to the logo. Understanding his wishes, I drew some thumbnails to help myself with ideas inspired by salon’s related images/objects.
Concept Sketches
I finalized with ideas and minimized my designs inspired by salon’s objects such as comb, scissors, hair dryer and clippers.
Logo Development
I used Adobe Illustrator to design 3 types of logo: Image logo, Type logo, and Combo/Gestal Logo.
Once I came up with the final designs, I made sure all of my designs satisfied 5 rules:
- Logo should reflect the company in a unique and honest way.
- Logo should work well in black and white (one-color printing)
- Logo should be artistically balanced.
- Avoid too much detail.
- Make sure the logo's scalable.
Final Deliverables
- Website: erics-salon.com
- Logos
Lesson Learned
From this project, I learned to communicate with the client effectively to understand the client’s needs, goals, and business requirements while managing their impact on project delivery.
Grantt Chart is a very helpful tool to keep track of my progress which I can share with Eric, so that we are alway on the same page.
I learned that the WordPress plugin for the booking system and the Plivo SMS method does not really work for the shop as they are super complicated and require a lot of effort.
As a result, I spoke to Eric and suggested to him to use Square booking system as he already had an account with them.
Their booking system is more accurate and secure. They also support him with automatic SMS and emails.
Eric was very happy with my work and referred me to one of his clients for another project.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in enderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident. Lorem ipsum dolor sit amet tetur iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo tempor incididunt ut labore et dolore magna aliqua. Ut enim ad inim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat. Duis aute irure dolor in reprehenderit in oluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat on proident. Lorem ipsum dolor sit amet, consectetur cing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad ini veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
FACILISIS GRAVIDA NEQUE CONVALLIS A CRAS SEMPER AUCTOR, TURPIS EGESTAS PRETIUM AENEAN PHARETRA MAGNA ACET PLACERAT, ULTRICES SAGITTIS ORCI A SCELERISQUE PURUS LABORIS.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad inim ele veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in oluptatetin velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident. Lorem ipsum dolor sit amet, consectetur cing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat labore et dolore magna.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in enderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident. Lorem ipsum dolor sit amet tetur iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo tempor incididunt ut labore et dolore magna aliqua. Ut enim ad inim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat. Duis aute irure dolor in reprehenderit in oluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat on proident. Lorem ipsum dolor sit amet, consectetur cing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad ini veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
FACILISIS GRAVIDA NEQUE CONVALLIS A CRAS SEMPER AUCTOR, TURPIS EGESTAS PRETIUM AENEAN PHARETRA MAGNA ACET PLACERAT, ULTRICES SAGITTIS ORCI A SCELERISQUE PURUS LABORIS.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad inim ele veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in oluptatetin velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident. Lorem ipsum dolor sit amet, consectetur cing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat labore et dolore magna.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in enderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident. Lorem ipsum dolor sit amet tetur iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo tempor incididunt ut labore et dolore magna aliqua. Ut enim ad inim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat. Duis aute irure dolor in reprehenderit in oluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat on proident. Lorem ipsum dolor sit amet, consectetur cing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad ini veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
FACILISIS GRAVIDA NEQUE CONVALLIS A CRAS SEMPER AUCTOR, TURPIS EGESTAS PRETIUM AENEAN PHARETRA MAGNA ACET PLACERAT, ULTRICES SAGITTIS ORCI A SCELERISQUE PURUS LABORIS.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad inim ele veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in oluptatetin velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident. Lorem ipsum dolor sit amet, consectetur cing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat labore et dolore magna.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in enderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident. Lorem ipsum dolor sit amet tetur iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo tempor incididunt ut labore et dolore magna aliqua. Ut enim ad inim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat. Duis aute irure dolor in reprehenderit in oluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat on proident. Lorem ipsum dolor sit amet, consectetur cing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad ini veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
FACILISIS GRAVIDA NEQUE CONVALLIS A CRAS SEMPER AUCTOR, TURPIS EGESTAS PRETIUM AENEAN PHARETRA MAGNA ACET PLACERAT, ULTRICES SAGITTIS ORCI A SCELERISQUE PURUS LABORIS.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad inim ele veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in oluptatetin velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident. Lorem ipsum dolor sit amet, consectetur cing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat labore et dolore magna.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in enderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident. Lorem ipsum dolor sit amet tetur iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo tempor incididunt ut labore et dolore magna aliqua. Ut enim ad inim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat. Duis aute irure dolor in reprehenderit in oluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat on proident. Lorem ipsum dolor sit amet, consectetur cing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad ini veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
FACILISIS GRAVIDA NEQUE CONVALLIS A CRAS SEMPER AUCTOR, TURPIS EGESTAS PRETIUM AENEAN PHARETRA MAGNA ACET PLACERAT, ULTRICES SAGITTIS ORCI A SCELERISQUE PURUS LABORIS.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in enderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident. Lorem ipsum dolor sit amet tetur iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo tempor incididunt ut labore et dolore magna aliqua. Ut enim ad inim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat. Duis aute irure dolor in reprehenderit in oluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat on proident. Lorem ipsum dolor sit amet, consectetur cing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad ini veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.