Design Roundtable: WeekPlan

I’m introducing a new feature to the Folyo blog: design roundtables. In each installment, a couple designers from the Folyo community will take a look at a product and discuss ways of improving its design. 

WeekPlan is a weekly planner app. Unlike other to-do list apps, it uses a calendar view to present a whole week at a time, and follows the organizational princples outlined in the famous “7 Habits of Highly Effective People” self-help book.

Joining me (Sacha Greif) for this roundtable are User Experience Jose Modecir and WeekPlan founder Aymeric Gaurat.

Introduction

First, Aymeric introduced his current design goals for the product:

I am preparing to launch a paid plan soon and it made me realize I never really spend time on branding so this round table will be very timely.

My target audience is people who have read the book “7 habits of highly effective people”, usually a mix of team leads, managers, executives and students. With the coming of the paid plan, I would like to focus the branding on the team leads / managers / executives.

He also shared some of the feedback from his current users:

Some people have complained that Saturday and Sunday are too small. Also, a lot of actions rely on mouse hover, which is incompatible with iPad. Lastly, the Vision page is not well integrated with the Planner, and the Planner is not well integrated with the Journal

The Home Page

Let’s start with the homepage, since after all that will be user’s first interaction with the product.

First if you are targeting the corporate user. Consider getting out the “Satisfy” font and orange color. Adopt a more serious tone, select a sober and serious color scheme. For example, you could make the top bar a little bigger and something like gray.

Thanks for the link. Funnily enough, the second result is very close to weekplan’s color scheme already (black + blue + orange + light blue + white). I will try to use the colors suggested on Colourlovers.

While I don’t necessarily agree that all corporate sites need to be grey or blue, I do think the font doesn’t really match the target market. A nice sans-serif like Proxima Nova or Omnes Pro would look more professional while still maintaining a friendly atmosphere.

The homepage using Omnes Pro

The Logo

Designing a brand is an art in itself, and outside the scope of this roundtable. That being said, the current product has no logo to speak off, and even a simple brand is better than nothing.

I am thinking picking a hand-written font for the logo, to remind of a paper planner. I am considering Dakota

Script fonts can make great logos (see AirBnB), but Dakota is clearly unsuitable for a logo. The many line thickness and texture variations will not display well at small sizes, and the font looks so much like the average person’s hand-writing that it becomes forgettable, which you definitely don’t want for a logo.

The trick is to pick a font that recalls hand-writing without trying too hard to simulate it, like Lucky or Streetscript.

Script fonts options

Inside the App

Now we come to the most important part: the app itself. Obviously, Aymeric must be doing something right since he already has many happy users. And we should always be wary when trying to improve a user interface, because even small changes can have unexpected repercussions.

That being said, listening to your users will only get you so far, so it can be good to get a fresh pair of eyes to analyze your product. First, Jose pointed out that the fluid design, while great at certain widths, also had its downsides:

Love that it is a fluid design, but on this case looking at it on a widescreen monitor with the browser maximized… It looks not good. That’s will be the setup of 70%+ of your users.

I agree with Jose. Fluid designs are great within a certain range of the optimal width, but quickly break down after. With a wide window, the UI will become stretched out and the user’s eye will have to work much harder to dart from one side of the screen to the other.

A better option might be responsive (or adaptive) design: you define breakpoints and end up with 3-4 designs that each cover a set range of widths. Those designs can themselves be fluid, but in any case it’s a good idea to define an upper bound for the total width.

Skeuomorphism: Good Idea or Not?

When designing a weekly planner application, it’s tempting to ressort to skeuomorphism, i.e. make the app visually look like an actual paper planner (like this gorgeous example by fellow Folyo member Andrew Korytsev). But is that always a good idea?

(By the way, I fully realize the irony of discussing this topic on a blog that itself looks like a notebook!)

Planner app by Andrew Korytsev

I think using the analogy of a paper planner would work well. Planners make people look elegant and people understand how they work (pages / bookmarks to pages).

Paper-like skeuomorphism may help, or make your work a hard to code UI. You have to try it, not a fan though.

I have to agree with Jose here. A paper-like design might look great in Photoshop, but it’ll be hell to code, especially if you want to use a fluid or responsive layout.

Plus, once you go skeuomorphism you can’t go back: you’ll have to make sure every single element of the UI looks realistic and fits in with the rest. Apple can afford to do take the time to do it, but can you?

Skeuomorphic techniques are not inherently bad, but they definitely imply some heavy production costs that shouldn’t be overlooked.

More Details

Jose also pointed out a couple additional things that would improve the experience:

Maybe increase the contrast of the input lines bellow the names of the week? They are almost invisible to the first time user. A icon may also help here. Also, make the week number more prominent. And properly label the < and > links

You could also add a check-box to the left of every unfinished task, the action of “marking check” a task is a real world action you can easily replicate here. More white space between the tasks will be nice, and so would using a proper “drag me” icon for the tasks.

Conclusion

So what actionable advice can Aymeric get from all this?

  • Pick a readable script font to use as a logo, at least until you have the budget to hire a profesional logo designer.
  • Get rid of the handwritten font on the homepage if you intend to target corporate users.
  • Keep things simple and avoid skeuomorphic design (at least for now).
  • Define responsive breakpoints for the UI, or at least set an upper bound for the total width.
  • Make interactions more obvious by adding labels, tooltips, and changing cursor states to indicate when an action is possible.

Even a relatively simple application like WeekPlan is made up of hundreds of little interactions and details. So while it’s obviously impossible to go over everything in a single roundtable, I hope that you’ll get a couple design tips out of it.

And if you’d like your own app to be featured in the next roundtable, please get in touch!

If you enjoyed this article, feel free to discuss and/or upvote it on Hacker News.

  • Pingback: Design Roundtable: WeekPlan | SachaGreif.com

  • Flavius Mihaiu

    Regarding the “skeuomorphism”, with CSS3′s new multiple backgrounds this isn’t as difficult as it once was and still allows for the responsiveness with the design.

    I however am not a fan of it, not even on the iPad. I would much rather prefer something clean and simple with minimal dropshadows and what not. I don’t need anything to look like paper, I just need the elements to be clearly defined, in this case a textbox. A user knows they are typing on the computer, and the idea of using a computer is that everything is clean, in line and not all over the place like someone people’s handwriting. For this reason, there’s no need to have a background that look like paper, anywhere, or in a textbox, and definitely not one that has lines for the rows.

  • http://www.insitedesignlab.com/blog insitedesignlab

    This was really interesting, watching your process and actually reading parts of the conversation. Awesome post!