It’s been interesting to watch electric vehicles grow in popularity, a trend that I expect to continue unless someone decides to pour marketing money on hydrogen. That said, aside from Tesla’s Supercharger network, EVs are seriously lacking an answer to the refueling infrastructure of gasoline vehicles.
I’ve tried a couple of the different commercial offerings, and have so far found them all to be a horrible user experience. (Current winner? The charging stations at the public library, which were installed recently enough that they haven’t been activated. There’s no sign to indicate that, no information on the stations’ display screens, and if you call their support to ask “what’s the deal?” they’ll tell you that “those stations were decommissioned.”)
Blink is, at least in my area, the most robust charging network, and thus is the only one whose app I’ve bothered to try. And it is… not great.
So, continuing on in the proud Design Student tradition of uninvited redesigns, here’s my takedown and redesign of Blink’s app. (And hey, if someone from Blink is reading this – send me an email, I’d be happy to flesh this out a bit more. Or write some of the code.)
As a recent assignment for one of my design classes, we were told to find a website whose design we didn’t like, build a moodboard for a new version of the site, and then create a high-fidelity prototype of the new version of the page we’d called out.
For my uninvited redesign, I selected Calibre’s homepage; I love what Calibre stands for, but I haven’t used it in years, because… well, I’ll just drop in my analysis portion here:
It could use some love, is the short form of it. (After I built that and submitted, I realized I’d forgotten to turn off my content blockers for the screenshot; the unaltered version of the site looks the same, but also features ads along the side, which explains that awkward hanging line in the latter screenshot.)
Next up, build a mood board. This was pretty fun to do – I basically just wandered around, not only the internet, but a nearby library, and my own bookshelves, looking for inspiration. Here’s the result:
I couldn’t not pick Baskerville, c’mon.
The final part of the assignment was to put together our own redesign, using what we’d put together in the mood board. I almost sat down with Sublime and coded it in HTML, because that’s what I do in my day job, and it’d be easy, but made myself use Sketch instead – what better way to learn than by practicing?
That’s the end, right?
Well, no, if you looked at the featured image on this post, you already know I did a bit more. The extra credit portion of the assignment was to do a redesign of a different part of the brand; I opted to do a quick take on “Calibre, if it was designed for macOS”. (For reference, Calibre was designed for/using Qt, which means it looks somewhat out of place… basically everywhere.)
(I would like to clarify – I’m throwing a lot of shade at Calibre here, but I really do respect what it is, does, and stands for. DRM-free ebooks are a very good thing. Support your authors.)
This last bit was, in no small part, just an excuse to play around with the Sketch resources that Apple provides. They’re neat!
In my Design and Prototyping class, we recently did an assignment called "Add a Feature". We were supposed to take an app or site we frequently use, find a competitor or two, and identify a feature that the competitor has. We would then sketch our take on that feature, if it were added to the original app, and wireframe it in Sketch.
As my original app, I chose Things. I’ve been a user, and fan, for years. I have also, however, tried OmniFocus, and know there’s a feature there that I would love to have in Things: sequential tasks.
The basic idea of sequential tasks is that you can set a project, or a group of tasks, to operate in parallel – the normal way, where you can see all the incomplete tasks – or in sequence. When they’re in sequence, you can only see the next incomplete task, not all of them.
Which would be very helpful to me, at the moment – I’m taking classes, and a lot of what’s going into Things at the moment is "do this reading, watch these lectures, then do this assignment." Except, of that sentence fragment, things doesn’t support the word ‘then’, so I see the whole list all at once. I’d rather only see the reading, then only see the lectures, then only see the assignment. Perfect candidate for the assignment.
So, first thing’s first: sketch it.
I kicked around a couple different ideas, but pretty quickly arrived at the conclusion that it should be integrated into Things’ ‘When’ menu.
The ‘When’ menu in Things. After opening it, you can either click to select an item, or begin typing, and use their natural language parser to choose a date.
The other question was how to display these in the list. The point, of course, was that sequential items wouldn’t show up in the ‘Anytime’ list, but they do still need to be visible in some circumstances – namely, when you click through to the project itself, future items still show up.
In the ‘Anytime’ list, that third item wouldn’t appear; you could find it either in ‘Upcoming,’ which is sorted by date, or within the containing project – which is where I took this screenshot.
I actually tried a couple variations – it’s at this point that, were I working for Cultured Code, I’d say “we should build both versions and do some testing to see which is better.” I’m not, though, so I just wireframed them both and turned in the result.
I’m fairly happy with the way I integrated it. Clicking, tapping, or typing “After” pulls up a second menu, where you can search for the item you want to attach to. Instead of thinking about it in terms of the project, the mental model is just “after x, I’ll do y.”
All told, I really enjoyed this exercise – it was the first wireframing I’ve ever done in Sketch, and it was neat to think about integrating a feature into something I use all the time. (And, hey, Cultured Code, if you’re reading this: feel free to use this idea, because I’d love to have the feature.)
