Coypu — UX Case Study

Cross-platform text-editor-like weekly planner

Mac Kozal
6 min readFeb 22, 2017

Need of organization

I have always used some tool to organize my time. It was either a calendar or a to-do list. I used to write planned events down in my calendar and all tasks that I was supposed to do landed on my todo list. I tested paper calendars, notebooks and a lot of digital apps like Fantastical, Apple Reminders, Wunderlist, Todoist, Things etc. They are very good tools but all of them have some limitations. Paper tools are super nice to use and extremely flexible but you cannot have them all the time with you. It’s easy to forget to take them from your desk. They are also not very convenient to write repetitive tasks. Digital versions are also not very good. Most of them are over complicated for me and they offer too many functions.

Method that works for me

I noticed that using weekly lists works the best for me. On a piece of paper or in a text file I write down days of the week and tasks that need to be done during these days. I cross the tasks as soon as they are accomplished. I can overview the whole week in a single document, so it is easy to estimate whether I’ve got enough time to place an extra task on a precise day or should I schedule it on another one.
This method works fine both on a paper and on a computer screen. I use it successfully in my paper notebook and in the Apple Notes.

Weekly list in the notebook and in Apple Notes

The method is super simple and not distracting. Its only weak point is that you cannot save a task that needs to be done, let’s say, in 3 weeks. You have to write it down in your calendar and put into the text file in the particular week.
I was missing a tool that connects the ease of use of a very simple text file with more advanced calendar options. This triggered me to try to design an organization tool tailored for me.

Coypu — the concept statement

“Text-editor-like weekly planner”

A coypu 🐹

Target users
We target on people who want to use simple, not over functioned task manager.

What problems the product will solve
It will combine the calendar and a todo list with keeping the feeling of using a simple text editor. It will alow the user to concentrate on a current week and plan it ahead.

Contextual Awareness
1. People in different countries use different calendar systems and various date formats. The first day of a week could be either Monday or Sunday. It would be nice if they can use a calendar translated into their mother tongue.

2. There are different platforms: mobiles, desktops and browsers. It would be nice if our app synchronizes between them. On the other hand this function shouldn’t be obligatory for the user. All data will be kept locally. We won’t have access to them. The only, eventual connection with the server is to check and install updates.

3. The basic idea of Coypu is to have a feeling of working in a simple text file. We need to design the product in such a way that user will have this feeling all the time.

A consistent user experience is one of the most important issues of a usable cross-platform experience. We need to design our app with coherent interface repeatable on every platform. The workflow needs to be similar on every type of device.

Sketching and Wireframing

I started designing the app with writing down some primary ideas:

1. We wanted users to have experience of working in bullet lists like in a text file. That means copy, cut and paste should be available throughout the app.
2. One screen will show a single week.
3. Users can change the weeks with topbar or keyboard shortcuts
4. Design should be based on a grid and we should use sleek, professional looking typography

I sketched a few very basic schemes that helped me understand how the app will look and feel.

Sketches include the look of the app, its structure, and connections. During sketching, I could do a lot of iterations, change the concept very easily and check how every proposal affects the whole project. It was also very useful to discuss everything with my brother to make the final decision.

This sketch shows the main window. You can see the general layout and different versions of the bullet list items. There are several types of entries: one line event, two or more lines events, event with a note, event with hours assigned, event with hours and a note and event that is done
Sketch of text placement. You can see more elaborate thoughts: How the different items should work? How to differentiate a task from task with an agenda? How to format notes to the task?
This sketch shows the very basic wireframe of the app and the proposal of keyboard schortcuts.
This one presents the preferences screen. Settings icon should be visible on the main screen. You should be able to change the language and the size of the text there. Below there is a place for keyboard shortcuts.

The next step was to make a low fidelity mockups in Balsamiq. It was very simple because we have only the main screen and the preferences.

Low fidelity mockup made in Balsamic Mockups

As a conclusion of all steps I did, I created a skeletal wireframe functions diagram.

Skeletal diagram of Coypu

User Interface

Fonts and colors

We use elegant typeface with right spacing and kerning to represent creative, calm, professional feeling. Font sizes are based on modular scale.

Colors and fonts

The main color is burned sienna. We used it for week number indicator, bullet list icons and as a background of the preferences screen. It highlights messages and notifications too.

The main screen is a place where the user can see the whole agenda and to-do’s

The main window
Other windows

The layout has proper vertical rhythm thanks to the grid design. We decided to use only a few icons to keep everything calm and clear.

Text spacing
Coypu window on macOS

Motion Design

We added subtle animations when the user moves between the weeks, turns on the preferences panel and completes tasks.

Setting tasks done
Micro-animations

Landing Page

Landing Page sketches
Implemented version
Responsive design

Plans for the future

Right now, Coypu works on Mac, Windows and Linux. The first public version included auto updater so we can roll out updates often. We are working on implementation of features for the desktop to meet the planned design. Then we want to publish mobile, web and Chrome Web Store versions.

Coypu on different platforms
Mobile version of Coypu

If you find this article interesting I made another one, similar to this: UX Case Study — Echotags App. It’s about an offline audio travel guide to Amsterdam that we made in 2016. Would you also like to click on a heart at the bottom of that page? The article will be recommended to more people then.

--

--

Mac Kozal

I am a UX/Product Designer. I graduated as an architect and I combine the processes of those two specialties in my daily routine. https://mackozal.com