The Design Hierarchy of Needs

Jared Cyr
9 min readSep 25, 2017

--

When creating an app, a website, or some sort of digital interface, there’s a few things to keep in mind when it comes to the design. It should be functional, reliable, it should be useable and proficient in use, and finally, it should have some creativity to it, to help it stand out. Based on Maslow’s Hierarchy of Needs, the Design Hierarchy of Needs gives use a clear understanding of how to “build up” an interface that meets requirements that will give it a greater chance of survival, to allow it to thrive. In this write — up, I’ll look at 2 interfaces and judge them according to the Design Hierarchy of Needs and looking at each level on a 1–3 scoring scale with 1 being bad and 3 being great.

The Design Hierarchy of Needs triangle

The first interface I’ll be looking at is ESPN’s Fantasy Sports section / app, primarily using the Fantasy Football as the our model (Since all are relatively the same, with small difference accounting for the different sports.) Once heavily scrutinized, ESPN has turned things around.

First and foremost, there is plenty of information on the screen. Headlines and stories about fantasy football, your own scores on the left with live updates, a plethora of clickable links. Fortunately, everything functions as you would want to. Scores for both fantasy sports, and the real life sports (located at the top) update in real time. All links are quite obvious and take you exactly were you want to go. It’s a little overwhelming, but function — wise, it performs as intended. For the “Functionality” need in our Design Hierarchy of Needs, it scores a 3. That’s for the desktop version of the site, how does the mobile app version hold up?

Just as well, possibly even better. ESPN understands that mobile users are there more to be straight to the point. They want the information directly related to them now, and they are less likely to wander around and stumble across something as opposed to desktop users. Again, the links and buttons function as expected, and are even more identifiable on the mobile app, creating efficiency. Again, for Functionality, the mobile app gets a 3.

Next we look at Reliability. Does this site function every time as intended? Thankfully it does. Adding / dropping players does what it is intended to do, clicking on “boxscore” or “matchup” gives you the stats & data for your week that you’re looking for, the league chat gives you the opportunity to seek trades or talk smack. Not surprising (but still welcomed), a multi-billion dollar company is able to make sure their site & app works the same every time. For Reliability, ESPN fantasy scores a 3.

Third, we ask, how is the usability? Does it the design and function match up with my preconceived notions? Most of the time, it works as you would expect. Click on the “Players” tab and you are brought to a the waiver — wire where you can pick up a free agent, “My Team” shows your team, and so on. However, there are a few hiccups.

Such an example would be here, with your individual matchups in their respective leagues. Each of those boxes housing the separate leagues contain 3 separate links, the top being your name (bringing you to “My Team”), the second is the score (Bringing you to “Matchup”) and the bottom being the link to a player related article. Without any clear indication that not only is this 3 links, but where they will take you, it can be confusing. An accidental click will send you to the wrong destination. It wouldn’t be so bad if the mobile app didn’t make things confusing.

Now unlike the desktop version, the full team name is displayed in the scoreboard. So if you used the desktop version, you are hit with a conundrum. Will clicking on my team name bring me to “My Team”? Or since it’s in the scoreboard will it take me to “Matchup”? Answer is Matchup. Unless you actually press “My Team” the rest of this will take you to “Matchup”. A confusing inconsistency. Also, to a beginning user of fantasy sports (And even to vets) there’s just a LOT of possible information where it can be seen as off putting.

Sure, more informations generally is better than lacking information, but with the combination of player names, stats & numbers, abbreviations, links, and options it can be overwhelming. Someone could ask “What does this mean?” Granted, it has been made a simple as they could, but still, it could be a little unforgiving and without having some kind of index for basic fantasy football knowledge, it can seem a little harder to learn & use. The score for usability, 2.

Now, how proficient is ESPN Fantasy sports? Very, actually. It goes beyond just the bare bones of fantasy sports by making what you want to do relatively easy, as long as you know what you’re doing. Once you’ve made that step to become knowledgeable on the topic, it becomes smooth sailing. Swapping players in & out of the starting lineups is easy, and with actions such as highlighting the current player’s name you clicked on, and allowing to move them only into correct positions helps proficiency. It really shines with the “Players” tab.

It streamlines the experience by allowing the user to quickly search for a player by position, availability, hurt / not hurt, searching by name, arrange them by project points for the week or year, and so on. While the mobile version doesn’t allow such specific search inquiries, it gets around that by making the “By position” default, then allowing a few more options within each position such as teams and claimed vs free agent.

Overall, ESPN Fantasy streamlines the experience by knowing what the users would want to go to or get to, and allow them to quickly achieve that goal. Proficiency score: 3.

Creativity: Well, there’s not much to say for it. It operates and looks how you would want it to, and it’s entirely reliant on something (The outcome of the games) that it has no control over. Combine that with it being the leader for sports and essentially stuck on very similar restrictions imposed by fantasy football (Can’t diverge too far away from the standardization of the product), it’s essentially limited as to what it can do. It looks nice, and functions, so there’s that. And in the case for fantasy football, the color “theme” is green. This becomes a little more prominent when comparing the different fantasy sports on the mobile app.

So we have green like the football field, orange like the basketball, a light blue like the ice, and then blue like… the sky?

It’s nothing fancy, but the green theme is simple and pleasing to the eye. I can’t say it’s super creative, capping the score I can give, but it also helps create a solid floor keeping it away from being called “bad”. Creativity score. 2. Bringing the final score for the ESPN Fantasy Football desktop and app interfaces to a 13 out of a possible 15. A high mark considering just several years ago, ESPN’s fantasy sports interfaces could’ve been used as an example of something missing its mark. It functions well, does what you generally want it to do, and serves all your purposes you’d need when it comes to managing your fantasy football (and other sports) teams. It may not be extravagant or go above and beyond, but the reality is you couldn’t ask for more from it.

A second interface that despite it’s reputation for it’s purpose, it is designed really well. That would be the infamous Tinder app. It’s interface is actually so good it won the 2016 Webby award for best user interface. Does it live up to the hype?

Functionality, here Tinder absolute shines. There’s no bullshit cluttering the way, there’s no unnecessary options or features. It’s simple, straight to the point, and works like a charm.

“Like” that person? Swipe to the right or click the heart. You don’t? Swipe to the left or click that X. Does this person REALLY interest you? Click that star to “super-like” them. Wanna see their full profile? Click on their photos to bring that up. All the swiping or clicking is also available on from the profile page. Swipe and move onto the next person. Rinse, repeat. You match? Chat with them in a simple text / gif text box. Functionality gets a 3 out of 3.

The Tinder app is also extremely reliable in that, you know what each function serves, and are confident it will do that every time. You know swiping right will count as a “Like”, you know that the messaging will work as intended. You know that turning your search radius to 20 miles will make sure you’re only connecting with people 20 miles from you, instead of say being at UConn and matching with someone in Alaska. You know Tinder will function properly, the only faith you need is that person you really want will match with you. Now it seems like that should warrant a perfect 3 out of 3, but speaking from user experience, there’s the rare chance Tinder crashes, and it seems to do it a lot less lately, but it happens. Final score, 2.5 / 3

Next up, usability. Tinder’s success in functionality stems from it’s very user friendly style. It works on the really simple premise of “Do you like this person? Or do you not like this person?” Something that can be simply answered with a Yes or No. A swipe right or swipe left. Two people agree that they like each other? Talk. That’s it. It doesn’t get much more complicated than that. Add a few photos, say something stupid or witty in your bio, bam. You’re ready to roll with the app. The learning curve is all of 30 seconds. 3 / 3.

How does this translate into the next level on the hierarchy? Tinder is very proficient in accomplishing the task it sets out. Say what you want about the “true intentions” of the app, but it advertises itself as an app to meet people, whatever that means to you. And that it does, quickly, and more proficient than other similar apps and websites. See photos of a person, maybe read their short profile, match, talk, then meet. Boom, done. The quickness that’s initially laid out in the beginning; with the swiping of person after person, the small blurbs of profiles, and the environment set out by keeping things local, creates for a more rushed meeting, but that’s a side effect of our culture today, and it capitalizes on it. It works, and makes it easy for all users to do so. Again, it scores a 3 out of 3.

Lastly, creativity. It does surprisingly well, with the minimalist design, and the focus on matching and talking to people. Again, it isn’t cluttered with options that 1 in 1000 people might want, or all these possibilities of material that other “dating” interfaces / apps might have. Combine the minimalism with the point atmosphere boosts its aesthetic.

Even things like calling it Tinder and having “matches” contribute to the creativity. Like creating a fire, you need matches (or fire yeah I get it) and tinder to create a flame, Tinder gives you matches to create fire-y emotions or something that can bud into white hot passion or something along those lines. The design really showcases it’s simple but effective style that is spread out across all levels of the design hierarchy of needs, giving it another 3 out of 3. And a final score of 14.5 out of 15.

If you ask me, Tinder does deserve the Webby for best interface. I can’t say for certain that it is without a doubt the best, but it totally can be justified. I mean, the app has survived for so long and done well enough for a reason.

--

--