Breeze

Amidst the Covid-19 pandemic, many individuals are struggling to feel productive. As a student, I understand how difficult it is to strike a balance between work and relaxation. In order to help individuals plan and maximize their time wisely, I designed a productivity application with collaborative elements as well. As a student completing their capstone project, I was responsible for the UX/UI and user research components. This was my first time ever attempting to do the UX/UI and user research elements of my own curated idea, and it was exciting to be able to put my knowledge into use. Though it seemed like a daunting task in the beginning it taught me what was essential in the process, how to complement UX and UI together to enhance the application, and furthered my abilities. With the trial and errors I endured, I am capable of iterating this process more efficiently in the future.

Secondary Research

My secondary research showed that collaboration increases productivity, and such productivity is contagious. The US National Library of Medicine National Institute of Health published a study in perceptions of relatedness with classroom peers promoting adolescents’ behavioral engagement and achievement in school. It was found that peer relatedness facilitates adolescents’ comfort in taking learning risks without fear, such as not being afraid to ask for help. In college, students who face brief social exclusion typically procrastinate more, leading to lower achievements in their assignments. It was also concluded that an individual’s perception of belonging, acceptance, and respect from peers correlates with self reported interest in the subject matter. As we grow up as individuals it is only natural that we start relying on peers for support more so than family, therefore having healthy collaborative relationships in a work environment will help increase productivity.

User Interviews

I conducted seven user interviews each lasting approximately 30 minutes long. Participants were aged 13-25, owned a smartphone, and currently using a productivity application or planner. The seven individuals were found through indicating interest in the survey, reaching out to contacts locally and nationally, and utilizing social media (Instagram, Facebook). These interviews were extremely helpful in helping me learn more about how to help potential users, and in turn begin thinking about my design.

User Interview Questions:

1. What are factors that inhibit and promote you to being productive? 

2. Can you tell me how and when do you usually plan out what you will do for the week? 

  • What materials/applications do you use ?

  • Do you plan everyday or do you plan at the beginning of the week? 

  • What are some aspects that help/hinder you? 

3. Could you explain how you feel about your productivity currently and planning abilities? 

  • How do you feel when you aren’t following your schedule? 

  • Tell me about the last time you weren’t able to follow your schedule. How did it feel? What happened? What were the repercussions? How did you fix the issue?

4. What does a usual week look like for you?

5. What is your experience with productivity applications/planners? Now and previously? 

  • What have you used previously? 

  • What worked well and what didn’t about this type of planning/application? 

6. Do you reach out to external sources for help? If so, what type of sources?

  • When do you reach out to external sources? 

  • Can you think back to a time when you reached out to an external source for help? Please tell me about the experience.

7. What is your experience with working with others?

  • Do you feel more/less productive knowing others are working?

  • Could you tell me about a specific experience about you working with others?

  • What do you do when the you and others get distracted? 

8. In light of the current pandemic, what are your thoughts on working with someone virtually? Do you have a preference virtually/in person?

9. How do you feel about knowing others schedules for the week, and others knowing yours? 

10. Do you believe that seeing someone finish a task helps or hinder you? 

11. How do you fit wellness in your lifestyle currently (physically, mentally, spiritually)?

12. How would you like to  improve current productivity and planning? 

 Affinity Mapping

Screenshot 2021-04-16 at 12.39.21 AM.png

 User Personas

Screenshot 2021-04-15 at 2.34.00 AM.png

Early Design and Ideation

An idea I originally had was a constant reminder system. As interviewees have stated, it is much easier to input things onto a calendar versus following through with it. Having the application send constant reminders helps to ensure that you can’t f…

An idea I originally had was a constant reminder system. As interviewees have stated, it is much easier to input things onto a calendar versus following through with it. Having the application send constant reminders helps to ensure that you can’t forget the tasks at hand as easily. 

Another idea incorporated a collaboration aspect that allowed schedules to be made visible to others. Many times we find it difficult to reach out to others simply because we don’t know if they are available or not, but by having this shared platform it eases the tension to coordinate between people. In light of Covid-19, there is also a huge issue regarding timezone making this feature ever more essential. From making meetings to reaching out to a friend, this visibility can help individuals make a concrete schedule for themselves to follow through on. 

Thirdly, I thought of a potential communication board. On this feature, individuals can post tasks they finished or plan to complete. Having motivation from others can help to complete certain tasks. 

I also made a note to myself that I wanted to make sure the application was aesthetic and visual. The ability to visualize exactly how their time will be allocated throughout the day/week/month is very helpful. Furthermore, the ability to see a task get checked off gives instant gratification that they have achieved something, and have the ability to keep moving forward. 

Sketching and Guerrilla Usability Testing

When sketching out the red routes for my application, I found myself simplifying it to what was truly necessary. I previously had an idea to include a communication board, but realized that this was disadvantageous to users. A communication board mi…

When sketching out the red routes for my application, I found myself simplifying it to what was truly necessary. I previously had an idea to include a communication board, but realized that this was disadvantageous to users. A communication board might cause unnecessary stress to users, and distract them from work as it resembles a “social media” platform. 

For my guerilla usability testing, I decided to go to a coffee shop to test my paper prototypes of my application. I tested the prototype with five people who were available, fluent in english, and have an understanding in using mobile devices. As this is a low fidelity mockup, I am interested in doing a test early on to find out large usability issues. Some specific things I wanted to focus on was the flow of the screens, whether the buttons/labels are clear, and what improvements/additions are needed to achieve the purpose of the productivity application. The tasks that I wanted the individuals to complete included creating a fake scenario in which they have to enter in a task with a due date and description that is urgent and involves collaboration, and connecting with other individuals to work on tasks together.

While completing these tasks, participants encountered confusion and therefore I saw aspects of the design that needed changes. First of all, I think that the users were sometimes confused as to what certain icons represent and some may have had overlapping meanings. For example, in terms of the scheduling there is a message and invitation button but some didn’t know which to press and what the difference was. Therefore, I decided that the messaging function wasn’t necessary for this app as it isn’t used for communication and rather the invitation is more suited as you are trying to find times to collaborate. Another issue was that labeling was sometimes confusing. Many didn’t know what “projects” meant, and I had to clarify that it means “overarching subject”. Individuals also wish to have more clarification on specifically what should appear on each screen.

Not only did I realize changes that needed to be made, but more importantly I realized that I should simplify what I am trying to do with my app as it may be overloading users. Moreover, I wanted an application to help make it easier for individuals to keep themselves accountable to things that they plan for themselves and therefore I want to focus my design more towards that such as reminders, additional notifications etc. 

 Wireframes

Screenshot 2021-04-16 at 1.21.44 AM.png

 Design System, Style Guide, Brand Platform, and Mood Board

Screenshot 2021-04-16 at 1.55.38 AM.png
As you can see above, the name of my application is Breeze. Along with the calming nature the name entails, I took to my mood board and style guide the same approach. The images, colors, and icons utilized colors synonymous with calmness and simplic…

As you can see above, the name of my application is Breeze. Along with the calming nature the name entails, I took to my mood board and style guide the same approach. The images, colors, and icons utilized colors synonymous with calmness and simplicity.

 High Fidelity Screens Evolution

Below are four Hi-Fi red routes that I have created on Sketch. The first shows a user inviting someone to collaborate. The second shows the process of signing up or logging into the application. The third shows users going onto their account page. The fourth is the process of a user adding a task.

Screenshot 2021-04-16 at 2.13.32 AM.png
Screenshot 2021-04-16 at 2.38.23 AM.png
Screenshot 2021-04-16 at 2.39.15 AM.png

After heavy critique and feedback with my mentor, I created the screens below. As you can see the background color of the screens is now a light beige. The previous blue color made it very difficult to read the typography, and made the screens feel disconnected. I changed the vector graphics to build greater coherence across all screens. Furthermore, I changed the icons to make it more familiar, and friendly to users. The buttons I used also changed in terms of the style, and color. Overall, the concept of the screens stayed quite consistent but I made design changes to make the user’s experience easier. 

Screenshot 2021-04-16 at 3.06.39 AM.png
Screenshot 2021-04-16 at 3.25.12 AM.png
Screenshot 2021-04-16 at 3.17.52 AM.png

 Final Prototype and Usability Testing

I conducted moderated usability testing with five individuals. Within these 1-on-1 sessions, I had users perform specific tasks, and asked follow up questions. As I live in student accommodation with a mix of undergraduate, and postgraduate students, I found individuals that have different preferred ways of planning (none, paper planner, and applications) by asking individuals during dining hall times if they had time to participate in the testing.

The test questions/tasks I had were: 

1. Can users learn how to add tasks into their schedule? 

2. Can they utilize the collaboration and invites function? 

3. How do users feel about the way color is used throughout the application? 

4. What do users think will help to enhance the application? 

A concerning issue that I found was that users were unclear of existing buttons and lack of buttons. For example, users had trouble knowing which button meant to “add” a task, and were also confused which “tab” to click to add a task. In my final prototype, I added more navigational buttons on all pages, decluttered pages by not having repetitive buttons, and used icons that are more recognized by individuals (exp. invite button to paper plane icon). I also had an issue with typography, and users struggling to understand what certain words meant which inhibited their process to complete certain tasks. I knew that I had to change the wording of headers to make it more generalized, such as “subjects.” The third issue I had was providing feedback to users, such as confirmation dialogue. I decided to fix this by adding color changes to text/banners/fields to indicate that an action has been completed, adding banners, and creating more feedback to users. The last issue that I had was more about the visual appearance of the application. I realized that adding more color contrast and illustrations can liven up the application while also giving users more clarity. By changing text colors and outlining boxes for selected writing, I was able to give the application more life. 

After making the changes, I iterated the prototype and tested it again. Upon making the changes I stated above, I found that users were able to complete the tasks assigned with greater ease and less confusion. 

Previous
Previous

Huddle

Next
Next

GramCity