POV: Design thinking for web developers (before the prototype)

Illustration by Jessica Durkin

I’ve spent my fair share of time doing design thinking. For many people, that starts and stops with a kind of “vertical gaze” which allows you to break down visual information into its most basic parts and combine them to make a point which may or may not be explicit to the content presented. I’ve been to art school and back, but in general the idea of directing someone’s attention through form, content, explicit and implicit information is still my definition of what it means to design. I don’t make distinctions regarding disciplines. Designing a syllabus, a poster, UX, train line, event series, or a laptop case which can survive a tsunami all require the same skills, but different sensibilities.

For example: I went to poetry school, and after I graduated I decided to do some independent publishing. I found myself designing books for people who didn’t have the Adobe chops but could really write. The sensibility necessary for that task is: a sensory understanding of how books should feel in the hand, which enables you to make decisions surrounding color, weight, size, and binding. The sensibilities I used to design the publishing course in a year had to do with my sense of the line, poetics, scansion, and so forth (iykyk). And the sensibilities I used to design how the organization functioned had to do with my sense of politics, the need for cash flow, how many editors were working and whether or not they had a steady day job.

The point being that sensibilities are what really matter, not necessarily “designer” being on your resume. You can learn to look at anything through a design lens. And if you’re feeling a little intimidated, just remember: if you’ve already gotten good at one thing, you know how to get good at another. You just have to learn what to look out for.

Let me take a second to define a couple of principles: sensibility, and design thinking.

I used some examples of sensibilities, including nouns ranging from: politics, poetics, and sensory understanding. That’s a wide swath. A quick google will tell you that “Sensibility refers to an acute perception of or responsiveness toward something”. Much of the times this “acute” responsiveness is the result of years of practice, as is the case in a sensibility toward poetics, which essentially means you are especially responsive to poetic devices and their combinations. A sensibility for video games means an acute responsiveness to gameplay design, control configurations, map layouts, melee tactics, and much more. You can see in the video game example how responsiveness to those areas of information overlaps with say, retail in terms of sensitivity to map layouts. For the video game player, it’s virtual and about moving through obstacles. For the retail worker, it’s about what goes on which end-cap when. The ways the video game player and the retail worker access their experience are very different, for the retail worker it’s about physical space and the changing of the year, whereas for the video game player it’s about milliseconds of timing and hand-eye coordination.

This is why I believe UI/UX design should be a collaborative, interdisciplinary practice rather than a position. The marketer and the graphic designer have more acute sensibility to what the user should be able to do and how it should look, and they (and others) should work with the web developers (who know how a website should function and look) to decide the best web design. This prevents siloing, emphasizes innovation, and allows people to fully understand where decisions are coming from, rather than just saying “Actually the button without the price gets clicked on more” that’s what A/B testing is for. Come for me in the comments. Let’s keep it moving.

Design thinking is a buzz word used so often it has basically been defined into oblivion, but it surprised me to learn that it refers to a more or less static practice.

Graphic of design thinking as an infinite loop from empathizing, defining, ideating, prototyping, testing, back to empathizing.
This is what you’ll find as a definition of design thinking. It’s essentially just a loop, to be practiced ad infinitum.

So, how do you get from the first step, empathizing, all the way back around?

Typical tools used to empathize with users is to make personas. This allows people who are sensitive to the particulars of what they are designing to take a more general approach, while keeping them focused on a single problem. Some examples are:

Alex, student, wants to find better focus while he studies.
Michelle, nurse practitioner, wants to discover a new genre.
Regina, retired, wants to build a library of saved songs based on her tastes.

Now for illustrative purposes, I am going to choose a persona, Michelle, and apply her problem to a current technology, Spotify. I have been provided with Michelle’s user journey map, which I will include here:

A user journey for Michelle, representing her feelings and desires at different points in the process of using Spotify to discover a new genre.

Michelle uses her Spotify account with her children, which makes it difficult for her to find genres she likes based on the automatic recommendations. She then has difficulty with the interface when she wants to save a radio station for later so she doesn’t have to look through Radio, Gender & Moods, or Discover every time she wants to listen to similar music that she doesn’t already know (otherwise she could just make a playlist).

I empathize with Michelle. I use Spotify so I experience similar issues. The reason it’s useful to have an imaginary user like Michelle is that I have sensibilities to UI/UX because of my experience as a developer, but for me, I would want something totally different to solve my problems, as I don’t like most of those “Radio” stations and could do without the whole function. I’m happy to make playlists. But Michelle is different. That allows me to focus on solving her problem in a way that is easy for her to navigate, rather than just saying that because I use the app differently her problem isn’t actually important, or she could just make playlists. Michelle is obviously busier than I am — I am not a nurse, and I do not have children. I have time to make playlists and surf around for new artists. Michelle likely does not.

To do this, I’m going to follow Michelle’s user journey on my own Spotify account.

I open up the Spotify app, and am greeted:

Yes I’m outing myself as an anarchist in the blog post.

After these suggestions for albums I listened to frequently recently and podcasts I subscribe to, there are ever more suggestions for what I have recently listened to: top mixes, recently played, jump back in, and more like my top artists.

Now Michelle’s user journey says to click on “Radio” in the left nav. I actually do not have such a button, as the Radio feature has changed since this user map was created. This actually deepens the frustration I imagine Michelle feels. She now has to click on an artist and then select their radio. This obviously leads her to music she already knows, as much of that will be the artist themself, and others will be music that the algorithm has decided is similar to the artist (even if Michelle doesn’t agree with the algorithm).

For example, I like Kate Bush. When I click on Kate Bush radio, I get: PJ Harvey, Caroline Polachek, SOPHIE, Cocteau Twins, and Perfume Genius. All of whom make music right now. I can see why Spotify thinks they’re similar, I listen to some of these artists and I also listen to Kate Bush. But I don’t want contemporary music when I’m looking for music like Kate Bush. I want music from the 70s and 80s, with experimental use of synthesizers, emphasis on lyricism, and profound visuals, vaguely boppy but not quite danceable. Songs that sound like “Running Up That Hill”, “Army Dreamers”, “Babooshka”, and “Suspended in Gaffa”, among others. For me, that would include songs like “Crazy on You” by Heart, “Rhiannon” by Fleetwood Mac (but only the early version), even “White Rabbit” by Jefferson Airplane. So, I have problems with the Radio function. But what does Michelle think?

Michelle also doesn’t like the old radio function, but she might not know about this way of using radio. Because it’s based on what people listen to, I don’t think it would be a good indicator for her of what music she might like, but rather what other people who also listen to music she likes like. Anyone who has ever been to a concert knows, that’s not the same thing. Onward.

When I finally get to browse moods, I find:

Not bad, there are some options here. Actually very many options. And what’s the difference between “Good Vibes,” “Mood Booster,” and “Energy Booster Hip-Hop”? Those are pretty vague.

Okay, how about we check out Discover.

These are… mostly albums, so we’re back to the “Artist Radio” dilemma. Further like, I have never listened to any of these artists, and I don’t want a genre-less “Discover” playlist. I’m in a mood. I want something specific. For Michelle, these results would be skewed toward her children’s taste, as well. I think I’m getting Taylor Swift suggested because I like Miley Cyrus’ new album, but they are very, very, very different. I’ll never be hype on Tay-tay. I survived 2009 in an American high school. I’m good.

Now Michelle goes back to Mood. She would click on “Chill” and then “Piano Ballads” but I can actually only click on something like “Piano Comfort,” which is generated by Spotify, as I imagine “Piano Ballads” was. This means they are generated A. by an algorithm, and B. can be changed or deleted at will. This would frustrate Michelle. She hasn’t been on Spotify in a while and everything is different, she can’t find anything.

Michelle, if she figures this out, will be pleased to know that you can download a playlist, making it easily available on or offline, and you can also add it to your library to find it later:

So, it looks like Michelle’s problem of not being able to save playlists for later has actually been solved. But, I don’t think the process of finding those playlists has been made any easier for her, in fact, I think it’s been made harder. Because the Spotify interface prefers users who already know, or don’t have any strong preferences about what they listen to, it’s still difficult for Michelle to find the playlists she wants to keep for later. And, what happens if she saves this playlist to her library and then it changes? Does she have to download it to have access to this playlist as it currently exists for the future? What’s the point of streaming then, should she go back to her iPod? CDs?

The functions Michelle needs are also hidden in the ellipsis, which some people may consider a problem. I actually do not, as frequent users of the internet are pretty used to clicking on that for more information, and I don’t think the “save” function should be higher in the feed of information to Michelle. She wants to find music more or less for now, but that she can access later. I trust Michelle can find the ellipsis.

So what is Michelle’s actual problem?

The radio function is too specific to an artist and not specific enough to an individual listener. Moods are often largely synonymous or interchangeable, subject to change at the whim of Spotify. Discover doesn’t have much of a filter to it.

It’s worth noting, though, the below options for Michelle not reflected in her journey:

Recommended radio, daily mixes, and top genres are also options.

For me, these solutions work really well. That’s because I don’t have children who also listen to music. But, they also don’t work that well, because I have listened to Siouxsie and the Banshees only because of playlists, and I don’t actually like them so much. I like other New Wave. Pale Saints? I have no idea who they are. I haven’t listened to Lady Lamb or The Mountain Goats since 2012. Daily mixes, eh. That’s basically luck of the draw on whether one of those applies to what I’m trying to find. Top genres is pretty useful, but only if you listen to a lot of the same kind of music, which Michelle does not.

So how can I fix Michelle’s problem?

Michelle’s problem is not that she can’t save playlists anymore, it’s that it’s hard to find which playlist she wants. And then, the problem of the playlists she saves changing without her knowing. I want to give Michelle a solution which works well with her lifestyle, so I want it to be flexible (so it also works for her children), and reliable (so she doesn’t have to look for things again and again in different ways).

Let’s ideate. That’s a fancy word for brainstorming. To the sketchpad!

I have a colleague working with me on this project, Thomas Francis, and his blog post about his process can be found here.

How do we decide which way to prototype?

Well, I always think the easiest solution is the best one to try first. For me, this looks like option 3, in which I imagine users having access to their own moods from their library. The difference between this and the standard moods would be that you can set the criteria for the algorithm. In this way it is more expansive than playlists, too. So Michelle can say, okay, I want a playlist for chill piano music, but I don’t want these artists/albums/years/and I want new music to be added to this mood based on these artists, albums, and songs that I know I like. This mood would be available in Library, and would be static and unchanged by Spotify in the event of a UX update. It would require a little setup, but the time saved in the long run would make that price reasonable to Michelle. It’s flexible, so she can save moods for her children like nap time, play time, and so forth. It’s reliable because it’s not subject to any changes in the design, and it’s even useful for Spotify — they could make this sort of thing a premium feature, especially since they don’t guide the user to music which could make them the most money.

Check back on this series to find out what happens once we start prototyping.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store