Quality Requires Visual Design

Earlier this week, I was look­ing through a table of user feed­back about Harper. I be­lieve that soft­ware should be build with the user—not just for the user—so this is a pretty reg­u­lar rit­ual for me.

I was de­lighted. Many of the usual com­plaints were to­tally ab­sent from the re­port. Users were en­coun­ter­ing fewer of the make-or-break bugs that would harm their ex­pe­ri­ence. This meant that my re­cent push to get Harper pre­pared for a 1.0 re­lease was work­ing. Great news! Yippee!

Unfortunately, some­thing new emerged from be­neath the pile of bugs: prob­lems with Harper’s vi­sual de­sign.

For quite some time now, I’ve been fo­cused solely on the prac­ti­cal parts of Quality. I mean bugs and the hard-to-deny use­ful­ness of Harper’s ser­vice. In that time, I’ve for­got­ten that the vi­sual ap­peal of the soft­ware is at least as im­por­tant. So, when I saw these com­plaints with Harper’s vi­sual de­sign, I knew I needed to do some­thing about it.

I’ve never claimed to be a de­signer, but I’m also not one to shy away from a chal­lenge. So, I grabbed a copy of the Laws of UX (thanks Eduardo, for the rec­om­men­da­tion) and got to work.

Bring Everything Together

Here’s the se­cret to Harper’s de­sign sys­tem: it has­n’t re­ally ex­isted un­til now. Each of the in­te­gra­tions, from the Chrome ex­ten­sion, to the web­site, and even the Obsidian plu­gin, had their own de­sign sys­tem and ap­pear­ance. Mostly, this was be­cause I did­n’t care enough about it when first craft­ing these pro­jects. Things have changed, so I’m go­ing to take my time and do a good job in an at­tempt to ser­vice these user com­plaints.

Before I could start tweak­ing CSS styles, I needed a uni­fied color scheme. Af­ter some re­search and time in the color picker, I ar­rived at this:

From there, I built out a com­po­nent li­brary based on Flowbite and re­placed all the rel­e­vant com­po­nents in Harper’s in­te­gra­tions with my own.

Next, I wanted to cre­ate a bit more dy­namism with our ty­pog­ra­phy. Af­ter spend­ing some time in Google Fonts, I de­cided to use Domine, a serif font for head­ings and Atkinson Hyperlegible for every­thing else. Once I com­bined the duo with the or­ange-ish yel­low from the color palette (which is usu­ally as­so­ci­ated with cre­ative brands), I felt con­fi­dent that I had nailed what I imag­ined Harper’s per­son­al­ity to be.

Finalizing the Draft

I feel that Harper’s land­ing page em­bod­ies the de­sign sys­tem well, so I’ve shown it be­low. It’s the first, and of­ten only, thing a user sees, so I put some ex­tra care into it. At the time of writ­ing, it is live.

Before My Changes

After My Changes

Where Do I Go From Here?

As I said, this mini-pro­ject was sim­ply a draft. I’ll be work­ing with Harper con­trib­u­tors on a more reg­u­lar ba­sis to con­tinue nail­ing it down, slowly im­prov­ing the Quality of the vi­sual de­sign for the en­tire pro­ject. If you have any feed­back, thoughts, or ideas for how we can make Harper more user-friendly or vi­su­ally ap­peal­ing, let me know!