ebb&flow

Creating a more efficient way to stay organized.

Introduction

It feels like every other day I see a sponsored post for a new project management tool (thanks for listening in Google!) — adding to the infinite number of places data can live. For people who work in project-based environments like I do, this can create information overload and can take away from us doing the actual work for our clients and projects.

Looking ahead can be overwhelming and to shift the focus back to the work, the process of being organized needs to be simplified —for my own sanity and those that I share this field with! For my capstone project, I chose to try to solve this problem with a user-centered approach — empathizing with the user through a process of research and analysis, defining and ideating solutions, and validating the theories with prototypes and testing.

For my first foray in UX, my role in this capstone project (through Springboard) was to walk through the entire UX process from start to finish as a UX Researcher, UI Designer, Content Strategist, and more.

My Roles

UX Researcher
UX Designer
UI Designer
Content Strategist
Art Direction

my role

Design
Art Direction

The Problem

Over the last few months I’ve realized that what I’m doing to stay organized isn’t working as well as it could and from talking with fellow peers, I’m not alone. There are too many places to find comments, deadlines, and tasks and already not enough time in the day to accomplish everything. I start my day digging through apps and project management tools to find what I should be working on and what I’ve missed since yesterday. My to-do list lives in constant flux and nothing is sacred. What I think I’ll be working on for the week may shift entirely by Tuesday morning and I need to be flexible and ready to move things around at a moments notice.

We have many options for how we communicate and manage our tasks but they are clunky and though feature-rich, are ultimately bogged down doing too many things. It feels like the tools are trying to grab our attention just as much as the projects they are designed to manage.

UX-ebbandflow-casestudy-survey

Finding Empathy

The Survey

To solve this problem of disorganization by overload, I’ll need to understand and empathize with the user and one of the easiest (and least expensive) ways to do this is to have a conversation with them. I surveyed 30 people to learn what they’re using to stay organized. As I looked over the survey data, patterns were starting to emerge. I hadn’t met anyone that used one tool for everything, but instead the vast majority use an assortment of tools.

A few of the survey questions include:

  • How do you typically take notes or make to-do lists?
  • Do you feel increased clarity would help you get more tasks done and make deadlines easier?
  • Do you prefer feature-heavy, complex apps or a one-feature simple app?
UX-ebbandflow-casestudy-interview

User Interviews

After looking over the data from the screener surveys, I narrowed it down to 4 users to interview including in-person and remote. To get a better idea of what’s working well and what areas need improvement in our workflows, I asked them a series of questions about how they organize and stay on task.

A few of the survey questions include:

  • How many projects, deadlines, or tasks do you have in one day? Do you find that your projects span multiple days?
  • Do you prefer to use one tool or method that does everything (calendar, deadlines, project info) or separate, stand-alone tools for each?
  • Can you tell me about how you feel about your current system for staying organized and on task?

During the interview process I learned that people don’t want another list app. They want the flexibility of an app that can integrate all of their existing tools into one central place. A tool that is flexible and simple to use.

UX-ebbandflow-casestudy-affinityempathy

Affinity and Empathy Mapping

The next step was to analyze my primary research through Affinity Mapping. I looked through my notes and re-listened to the audio recordings from the user interviews to write out key ideas, quotes, and any quantitative research onto sticky notes. After laying them all out, I started categorizing them into three main themes which were organization, integration, and simplicity.

To further put myself in the user’s shoes, I created empathy maps using two potential user groups which were students and creatives. During this exercise I considered what each of them would think, feel, say and do and noted the pains and gains they were having while using current tools.

With the idea of stepping out of myself further and into their minds and actions, I was able to gain an understanding of their frustrations and start thinking about what would be helpful in a new product.

UX-Persona-Creatives

User Personas

One of the greatest tools for empathizing with the user is to create User Personas and treat them as actual individuals who will be using the product. I chose to create two unique personas of potential users.

  1. The creative. Justin is a Creative Director at a busy creative agency in Chicago. He has multiple projects throughout the day that each have their own tasks and deadlines. One of his goals is to start the day with a good sense of direction and priorities.
  2. The student. Sarah is a nursing student in Santa Barbara. With multiple classes and a hectic extracurricular life, she is constantly shifting around her schedule to fit it all. As a student there are many sources of information and it is very easy to lose track of important details with everything scattered in different directions.

With these two personas, I’ve created users that I can revisit with every design choice I make throughout the rest of the the process. I often thought about what Justin would think about a certain question I had and it was really helpful to seek a different opinion than my own.

UX-ebbandflow-casestudy-heuristic-3

Heuristic Analysis of Competitors

To understand the competitive landscape of these tools, I downloaded three apps and detailed the strengths and weaknesses of each. I looked at the aesthetic, function, and visual feedback for each of them. By reviewing these apps I was able to see what’s working well and noting any gaps or places to improve.

  1. MinimaList (iOS App)
  2. DO (iOS App)
  3. Google Tasks (iOS App)

Strengths:

  • All three apps were beautiful and minimal. Their focus was purely on the tasks and not cluttering up the screens with unnecessary UI and features.
  • Each app featured micro-interactions that made you feel like you were interacting with the lists and it was fun and engaging.
  • They also all did just as you would expect a list app to do and worked well.

Weaknesses:

  • All three apps were very limited in abilities.
  • No integrations.
  • Lacking in personality.
  • Most relied on gestures without much walkthrough.
UX-ebbandflow-casestudy-hmw-2

"How might we..." Statements

The last step of the research phase was to create “How might we…” statements which provided me with the basis to start defining solutions. During this exercise I took the challenges noted during the research phase and turned them into opportunities to design.

How Might We…

  • create a space where people can keep track of the important tasks for the day?
  • improve productivity and workflow from the planning / logistical stages of a project?
  • decrease the stress and anxiety of a busy schedule?
  • facilitate an environment of efficiency?
  • create clear expectations for people about what needs to be done today?

As soon as I started writing these statements, I was filled with ideas — I could start to see it take shape for the first time! The research that got me to this point was inspiring new directions that I wouldn’t have come up with myself. These simple questions were creating the foundation for what’s to come.

Define & Ideate

Solution Ideas

With the questions from my “How might we…” statements, I crafted three possible solutions to solve the problems I defined. They ranged from an incredibly simple to-do list to priority weighing apps to an integrated solution that connected to-do lists and tasks.

It would have been really easy to pick the simplest option and run with that. While a viable option and there may be a need for it, it didn’t feel like the right solution that connected perfectly with the research. The option of weighing priorities would have been really fun to explore but ultimately I ended up choosing to create an app that would integrate with existing tools. Robust but aesthetically minimalistic and free of clutter that would integrate with popular apps from Asana to Slack and everything in between. With this app, the tasks, meetings, and deadlines for today would be the focus.

UX-ebbandflow-casestudy-userstories-2

User Stories

After focusing in on the integration solution, the next step in the UX process was to define the User Stories. I brainstormed every functional need (task) the user may have and paired them with an outcome. I chose to categorize these into high, medium, and low priority items as well as establishing what the MVP and next release will be for the app. Some of the main tasks the users needed to complete are adding integrations and creating simple to-do lists.

UX-ebbandflow-casestudy-sitemap-2

Sitemap

After all of the user stories were placed in a Google Sheet, I moved on to the app sitemap. The simplicity of this app warranted a smaller sized sitemap as there are a lot of repeated elements. This felt like another indicator that I was headed in the right direction! A bloated sitemap is NOT what users are hoping for as simplicity is truly key in every step.

UX-ebbandflow-casestudy-userflow-2

User Flows

This process involved thinking through every screen, choice, and action the user must take to do specific tasks within the app. As integrations and lists are the two most crucial user tasks, these are the red routes that we absolutely must have. I also decided to do a flow for the onboarding process which involved adding an integration as part of the setup so the users could easily add another in the future on their own. These flows are the blueprints I’ll use to create sketches and prototypes.

Side note — with the fast-paced environment I work in, these typically get worked on congruently with design which can add confusion and chaos. As this was one of the first times I’ve explicitly started here first, I found the user flows and user stories to be incredibly helpful as we’ve already thought about every possible screen and scenario and there aren’t any surprises during design. This makes it so much easier for me (the designer) to stay focused and know what to work on.

UX-ebbandflow-casestudy-sketches-2

Design Begins

Sketches & Guerrilla Usability Testing

Next I created quick layouts for each screen in the flow. Without worrying about detail, I focused on the elements that make up each page and for this app, cards with the integrations will be the leading feature. As a visual artist that focuses on UI, this proved to be challenging at first. It was tough to create imperfect, quick layouts without getting into details. I found myself using a pencil and erasing the lines until they felt straight enough or even when a button seemed a little too high.

Once I had my sketches drawn I went into quick guerrilla testing using Marvel Pop to test the three red routes. This feedback was very helpful as it showed me pretty quickly that there were quite a few screens I was missing. I also learned the importance of testing potential users of the app and not relying on any warm body out of convenience! With an app geared towards creatives in particular, there were a lot of instances where the language didn’t make sense to someone not in the field and that resulted in having to explain a few crucial details. Don’t skimp to find good test candidates!

UX-ebbandflow-casestudy-wireframes-2

Wireframes

After getting some great feedback on my sketches and adding in the missing screens, I jumped into wireframes. I created every screen from the user flows as well as multiples of some of the crucial screens to nail down layouts. I may have spent a little more time on some of these screens than the average UX designer typically would have but I figured I would make it up during the high fidelity mockups if I could get them pretty close.

UX-ebbandflow-casestudy-colors

Branding

Creatives are in a constant state of projects in and out with little time between to take a breath. With this concept in mind, I started brainsstorming potential names and graphic styles. After narrowing the list down to a few names, I chose Ebb & Flow. For the color palette, I chose soft colors that aren’t too flashy or attention grabbing so that the user can focus on the tasks. I created a custom wordmark as well as a symbol representing the waves and sky. For the typography I chose san-serif GT Walsheim Pro by GrilliType as the main typeface used throughout the app.

UX-ebbandflow-casestudy-conclusion

High Fidelity Mockups

As a visual designer, I am finally stepping into what I do on a daily basis— high fidelity mockups and UI. I knew that I wanted to create layouts that let the notifications and integrations stay at the forefront at all times. The use of cards that stack felt like the perfect solution to let users customize the functionality of this app. Users are able to organize these cards based on priority and add as many (or as little) integrations as they’d like. The ability to have multiple workspaces or accounts for one integration has also been built into the app.

UX-ebbandflow-casestudy-prototypes

Prototyping

Prototypes, Usability Testing, and Iterations

Using Invision, I created prototypes from the high fidelity mockups for users to test. With these prototypes built and linked up in Invision, I conducted 3 usability tests with set tasks and scenarios for each of them to go through.

  1. Add Integrations — One of your teammates recommended a new app called Ebb & Flow to stay organized. Add Slack and Asana to the dashboard to view new messages and tasks. Then let your team know that you’ve completed the Cookie Pie Dieline task.
    View Scenario #1
  2. Add a New List and Tasks — Create a new list and add a few tasks from today’s dev team meeting. Check off your first task.
    View Scenario #2
  3. Update Broken Integration — You received an email that your work has updated your email address domain and Slack is no longer connecting to Ebb & Flow. Update your username and password to make sure you receive new updates.
    View Scenario #3


After this final round of usability testing was complete, I made final tweaks to the prototypes based on user feedback.

UX-ebbandflow-casestudy-uipanels

Outcomes

The goal of this capstone project was to create an efficient way to be organized and in control. By learning to ask the right questions and listening to the users, I was able to create a product that integrates the apps and tools that we use to complete our projects and meet our deadlines every day. It is flexible and completely customizable while being incredibly simple (but robust) and aesthetically pleasing. Ebb & Flow is a great app to open every morning to quickly catch up and roadmap your day and could be used exclusively as opposed to switching between all of the apps that are integrated.

This could greatly limit the amount of time we search for tasks between apps and ultimately give us more time to do the work . There are many fields that this could be applicable for including creatives, students, teachers, stay at home parents, and many more! Anyone with email and a calendar can use it to organize their lives.

 

The Future of Ebb & Flow

If there were ever a v2 of Ebb & Flow, a key feature we (myself and the people who so graciously provided their feedback) would love to see is team functionality. There are a whole host of options here to explore from the ability to glance a teammate’s dashboard to setting up profiles to switch between work and freelance / home / etc.

While it is nearly certain that Ebb & Flow will never see the App Store, I am hopeful for tools that are designed with our needs in mind. I believe people are starting to realize we have all of these tools that do different things, but not a way to connect them all at the moment. With every new tool that hits the market there is a greater need for Ebb & Flow.

UX-ebbandflow-casestudy-whatsnext
Next Project

The Way Home

work together

Have a project you'd like to partner with me on? Let's get in touch.

© 2019 - Josh Maynard