design_review.html

or how I learned to stop worrying and love design (and designers)

#Coding

tldr;

I got feedback from a professional UX designer (and friend) Sarah Howard. The post has screenshots of the current [14/01/22] design, and her feedback. You can see if you agree with what she highlighted and potential solutions. I talk about why I found it useful and why I wrote this article.

What is your problem?

I have got backcaster to a place where I think it has enough features to be a useful tool, and I use it to track my goals of writing more and pushing the project forward (instead of writing features.) So the sensible step is to get feedback from friends. The phrase that stuck in my head from the initial 3 people I showed it to was "What am I looking at?".

This feedback (and the bounce rate from visitors from the internet https://plausible.io/backcaster.app) paints a clear picture. It does not make sense what you are supposed to do when you arrive. If users cannot get past this point, any feature or further idea becomes moot. This article shows how the app operates during the process of writing, and outlines the points made by UX designer Sarah Howard. For me it was a bit of an "aha!" moment and hopefully I will explain why that is.

The starting point

Screenshot Feedback
  1. Each box needs a title explaining what it does
  2. The milestones box should be aligned with the 'goals' box on the left of it
  3. It is unclear what you have to do and which is the most important actions. Start designing from mobile view offering a linear step by step process.
  1. Change the default lists to [Todo | Doing | Done] current default (Present and Future) unclear / not in the convention of other TODO tools
  2. Allow user to define their own categories instead of hard coding [ Active | Stale | Old ]
  3. (note to self) - We didn't touch on the the history slider, worth revisiting?.

* the idea that the items 'degrade' over time had to be explained. It is far from obvious.

aha!

Having worked as a professional software developer. I have been often asked to implement designs. They usually come as a full screenshot or even interactive design tools like Figma. Often discussion comes about spacing, colors and copy around buttons. But if I am honest I was never really present at the problem solving stage.

More a sanding of rough edges or pushing back on parts that were difficult to implement.

Until you have felt the problem yourself, it is hard to appreciate a solution that just 'appears' before you. I have a feeling, (although not yet implemented) that Sarah's approach will be much better than the ideas I came up with.

I want to talk about one point further: Start designing from mobile view / Step by step approach!!

A developers idea of design

Given I wanted to make people aware of the features the app had, and convey my understanding of what the tool is hoping to achieve I had these ideas:

  1. Add more copy
  2. Post about the features on Twitter
  3. Add another page before landing on the board, walking though features
  4. Add a video walk through
  5. On first load, add a layer over all components apart from the one you were supposed to start with, then go step by step. (ugly / hard to implement?)

I was not confident in any of those approaches, and had difficultly motivating myself to start on them. In my mind "I knew how it worked" and putting it into words was tedious.

The solution - Start designing from mobile view

When I have heard this advice before, it mostly passed me by. In my mind it was mostly just checking if I had added the right classed to the components so that it rendered without any obvious errors on mobile. It was basically a last step just to eye ball before I deployed a new version. I assumed that the user already knew what to do and the goal was merely to allow them to do it on a mobile device. But when Sarah explained it, I had the 'aha' moment, it meant move a confusing layout into something simpler, more linear that started with the first action and ended with the last. The actual device had very little to do with it, more that the flow of actions happened in an easily comprehensible manner.

I did have some objections, in that the view presented shows all the information in one screen, giving you an overview of everything. So my plan is to make 2 views, on an 'Actions view`, where each section is presented in order and a 'Dashboard view', where the whole board is visible.

Sign off

This article was purposely written before I started to actually work on any changes. This is to document the actual process and thinking as I go, (hopefully) offer insight to others going through this process and also to write from a place of hope. Often when you hit a wall, and not sure where to go next, now that there is a potential solution I have at least something to aim at. I am capturing that hope on paper.

As a last comment, if you have any design (or other) feedback, or simply disagree with the advice, please let me know.

Feedback from Sarah

There are loads of resources on mobile first and why that is usually the best approach. It's nicely understood as "progressive advancement": for mobile, you have no choice but to only include what's crucial - there is literally no space to add fluff. So the idea is you progress as you increase device size. And since you only have the crucial bit, displayed as top to bottom order, the overall experience becomes clearer.