DEV Community: Gbenga Ojo-Aromokudu

Redesigning a Landing Page

Gbenga Ojo-Aromokudu — Thu, 01 Oct 2020 08:49:45 +0000

Hello and welcome. This post references a previous blog I wrote, so to catch up, you can read it here:

My First UX Case Study

Gbenga Ojo-Aromokudu ・ Sep 24 '20 ・ 6 min read

Recap

In my previous post, I looked at the homepage at sayplants.com, and discussed the most immediately noticeable issues. To recap quickly these were:

Too many Calls-to-action - there were many links that pointed to the same page, some that were labelled inconsistently, meaning users may be overwhelmed with choice or confused by the lack of direction
Unclear signposting - Both in the copy and the positioning of certain elements on the page, there was assumed familiarity with the product offering. This would likely lead to issues for users who were visiting for the first time
No discernible hierarchy - from the website alone, it was hard to clearly define what the main function of SayPlants was. There were numerous services, but none was clearly the only main focus. This left a lot of opportunity for users to misinterpret, and spread this along

Onwards

In this post, I will be detailing some of my suggested changes to address some of the issues I have raised in my previous post, and some that I have noticed since then.

I'll break this into a few sections so it's easier to read, and we'll cover the 3 screens that are visible on the homepage, and then a (simple) mockup that takes into consideration all of my suggestions.

Section 1

One of my concerns was that there was a good amount of assumed knowledge from the way that the copy was originally written. For example, referring to "rewards" without context of what a reward would be in this context.

Additionally, from the landing page, if I had to guess what service was being offered, I would say a restaurant directory, and I wouldn't have even known that I could scroll down and found out about the dining club.

My suggestion for section 1 covers 2 main areas:

Who are you and why am I here?

Users shouldn't have to think too hard about whether your service is for them, and especially not on what the service is that you are offering. To this end, I would like to include a (very short) explanation of (at least) the main purpose of SayPlants for a user.

So what are you offering me?

Users should also not be made to do too much work to understand what it is they can do with your service (unless mystery is part of your brand). So, I want to have some simple examples of the deals that are available.

Additionally, given that the restaurant index is somewhat self-sufficient in the context of the service that SayPlants offers, then some users may only come to the site for this use (at first). Therefore, I wanted to give easy access for those who are unlikely to want to extra work once landing on the page, to then get to what they need.

Section 2

In the previous section 2 there were 6 clickable links, only one of which was actually unique to this section. The rest were also in the Nav Bar or in other areas of the page. So naturally, a big focus was making this area simple, and not presenting too many diverging routes.

Establishing a hierarchy

In the planning for this section, I wanted to keep in mind that scrolling down the homepage of a website is still a chance to see what is offered. So it was important not to just remove everything, but instead to consider what, from the founders' perspective, were the "secondary" offerings, and highlight them here.

This arrangement can indicate to users that aside from what they say in section 1, there are 2 supplementary areas to explore, although they are not part of the main offering.

Reviews

Subsequently, the review section I was mostly happy with. Put simply, I just cared more about what the reviewers said than who they were. As I mentioned in my previous post, word-of-mouth is critical to the success of any business, so it is essential we see what was said.

Section 3

In the final section of the page, there were another cluster of call-to-actions, but my issue with it was that they were very easily overlooked. I generally understand the convention of putting links and contact information as footers on a page, however, after understanding the consumer decision journey for SayPlants I'm proposing a change.

The idea being that if we were to order the levels of commitment customers can engage in from lowest to highest commitment, it would look as follows:

Visit the website once
Visit repeatedly
Follow on social media
Subscribe to newsletter
Become a paying member

Now, with this in mind, it is critical to try and create some kind of attachement to the brand for any user, especially someone who has shown some level of intent by making it to the bottom of the page. So, this is a chance to make the most of the moment. Much like the "MaKe sUrE yOu HiT tHaT sUbScRiBe BuTtOn, LiKe AnD ComMent" that you hear at the end of every YouTube video, in the internet age of minimal attention spans, you must take advantage of a captive audience.

Final product...ish

Now this is by no means a finalized product, but here is a slightly more hi-fi version of my sketches, made in Figma.

I would still like to add some things, like making it clearer that the user can scroll, but I would love to hear your thoughts on my ideas, and my mock up so far.

I hope documenting this process is useful for someone, and points you in the right direction of what you should keep in mind when designing your own landing pages.

Thanks for reading!

Music of the Moment

Since it's Nigerian Independence Day let me bless you:

Damages comes from the latest album by Tems, For Broken Eyes. A bop

An all time classic that needs no introduction: Igwe - Midnight Crew

Bonus Track: Styl-Plus - Olufunmi, this will be play at my wedding, no arguments

My First UX Case Study

Gbenga Ojo-Aromokudu — Thu, 24 Sep 2020 12:22:09 +0000

Welcome, I'm not a designer (at least not yet), but surely part of my role as an engineer involves empathizing with the design team? So, I'm dedicating some time to think like a designer, and we'll see where it goes.

As part of being a full stack engineer, I think it's important for me to take the time to focus on the specific aspects that can make an application good or bad. From the database design, to the type of authorization, there are so many different things that need to come together to make everything work well.

At the moment my focus is UX design. Now, I'm not a designer per se, just someone who uses the internet and has over time, and from my time spent building apps understands that small things can make a big difference.

For this case study I took a look at sayplants.com, specifically the homepage, and took note of some things that could be improved.

Thoughts?

Before I talk about what I picked up on, take a few minutes, and have a look at these screenshots and see what you think might need work.

Ok let's get into it 🚀

Repetitious Links

If you look carefully you'll see quite a number of different, and also duplicated links. I'll lay them out below:

{
    restaurants : 2,
    offers : 3,
    blog : 2,
    about : 3,
    subcribe : 3,
    quiz : 1,
    sign_up : 2,
    advertise_with_us : 1,
    add_a_restaurant : 1,
    facebook : 1,
    instagram : 1
}

To me, this presented 2 main issues:

Users are given too much freedom*1.
It might sound extreme to want to minimize the amount of freedom, but trust me, there are several reasons why this might be a good thing

a. If users follow a limited number of paths around your website, their behaviour is more predictable, which means you can better optimize for their specific user journeys. For example, someone who arrives on a site to browse through a list of options, will likely have totally different behaviour than one who wants to search for something specific. Therefore, if these 2 options are both given clearly, then users can self-select a path that works for them, rather than having to navigate a screen that tries to do both, but does neither well.

b. By limiting distractions that are shown to a user at a given time, this creates focus that can be tailored to a desired action. It is fairly common for e-commerce platforms to be designed for users who start a transaction, to finish it. That is to say, there are fewer navigation options available other than those to continue with the purchase, or to go back one step and correct information about the order. With this in mind, you may see improved conversion rates.*2

c. If users are given less freedom, there are clearer and fewer expectations placed on the site they are visiting. In other words, if you land on a page that as 4 clearly defined options in a Nav Bar, then this implicitly sets your expectations of what this website can offer you. Without this, your mind is given to wander and as you explore, you may be disappointed that you don't find what you had imagined might be available. This is not to say that users cannot think of what the site might offer without it being laid out explicitly, but research shows how setting expectations can change individuals' behaviour.*3
Potential confusion - particularly with the "our mission" link at the bottom of the page, and the "about" link in the Nav Bar both leading to the same page, users can falsely lead into thinking that there are 20 different pages they can navigate to from this homepage, when in reality only 11 of them are unique. Aside from the issues highlighted in point 1 (which also apply here), unless part of your brand is about mystery and misdirection, it will likely make the website much easier to navigate for the user, there is more consistency.

Unclear signposting

It's vital that users know what they can do on each page, can find what they need, and know where they can go to next.

Have you ever been on a confusing website, where you couldn't even find what you came for, so you just leave? Same. Let's try and avoid that here.

Example 1

If I were a user who had never heard of this website before, I would have no idea what was meant by rewards here. I'm also not given context, or direction of where I should go to find out more, so I have to start searching the website blindly, which I don't want to have to do (see Repetitious Links 1.3).

Ideally, messaging that is predicated on a previous understanding of the product should be limited to a restricted area. For example, the homepage could have this messaging for a user who is signed in (and therefore has visited before), while choosing to be more explicit and explanatory on a generic landing page.

Example 2

If I were looking at this search bar on a printed out sheet of paper, I might think that the search bar and the buttons beneath were 3, unrelated, elements. To this end, I might try to click the navigation icon on the right hand side of the search bar, only to find out it's a piece of paper, so of course nothing happened.

In all seriousness, icons are important. It's a way for us to hint non-verbally to a user, that they should expect a certain output from a specific action. In this case, using the navigation here creates confusion, as it is placed in a context where we normally might see a search icon.

Small detour: this reminded me of those mental exercises where you are a shown an word and you need to say the colour of the text, not what the word says.

Example here

Back to the matter: As I mentioned, you want to make sure that users are clear about the results of their actions before they take them.

So, it might be advisable to have a clearer grouping of responsibilities, where the search bar and button are clearly a pair, an alternative to which is the browse button.

Jack of all Trades, Master of None

Finally, but by no means last in terms of importance, a user should be able to explain to someone else what the purpose of your website is, and what a user can do there. Of course, social channels and SEO are very important, but there is so much evidence out there that highlights that Word of Mouth*4 and e-WOM, are of high importance as well. Therefore, you want our users to essentially be able to tell your user stories without being explicitly told themselves

In this instance, success can be achieved more easily when you can define a clear hierarchy of services that are being offered.

At present, I can list 5 different things offered by SayPlants: a dinner club, a tool for finding new restaurants, a blog, a newsletter and a quiz. Depending on my interests, I might be more likely to tell a friend that I found a great quiz, than a highly functional directory of restaurants serving plant-based food options. Now, this is all fine and good, but is that what you want to be known for?

If there is one major Unique Selling Point about your service, everyone who visits the site should know this, even if it's not something they use themselves. Thus, this should be highlighted in your layout and ordering of options.

References

*1 in this paper, Frei highlights that in order to reach customer satisfaction, sometimes a trade off must be made between efficiency and service. The particular area that is relevant here is Request Variability, as it explains why limiting customer's freedom minimizes what they might ask for. Thus, your service can be closer aligned with what they are seeking.

*2 In this study, researchers observed that while more choice attracts customers, fewer options leads to stronger purchase rates

*3 this research shows that when given a suggested amount, the value of individual charity donations rose.

*4 This paper identifies Word of Mouth, both online and offline as the most effective marketing tool

Music of the Moment

Edit: I forgot to include any music at first, so now I give you the aptly named: Sorry Ain't Enough by Sault

Thanks for reading, I'll likely have a follow up to this soon, where I talk about the changes I implemented after making these initial observations.

How does Netflix personalise your experience?

Gbenga Ojo-Aromokudu — Thu, 17 Sep 2020 22:16:49 +0000

In this post I'm switching up my style, and I want to look look at another application through investigative lens, using what I've learnt in my developer journey so far. My focus is the personalisation aspect of Netflix.

For the duration of this post I'll be referring to the image that is displayed to represent each individual show a "cover", as I don't know what they're officially called by Netflix.

What's a Cover?

For those who don't know, here is what the Netflix homepage looks like:

(This is not my own Netflix homepage so you can't judge what I'm watching [sorry Luke])

Each piece of content has a cover, and when you hover over this, either a trailer, or clip will start playing. There is obviously a lot to be said about the choices of content that Netflix pushes to a particular user, based on previous watch history, as well as location - but I want to talk about the covers.

Have you ever noticed that the covers for a show that you are watching change over time?

For example, here are some of the alternative covers for On My Block:

Now on face value, this might not seem that groundbreaking - why is it a big deal?

I thought that it might just be changing with each season, just like many traditional network TV shows release a poster per season, which subtly remind viewers which stage of character development they are currently at:

(You can see that there are more characters, the children have grown up etc)

However, I later realised that it wasn't quite so simple - the covers changing didn't line up exactly with my (rapid) progression through the seasons, so there must have been another explanation.

Testing 1...2

Applying my digital advertising knowledge made me realise: They must be A/B testing!

An A/B test is essentially when web traffic is randomly split into 2 categories, in order to assess the impact of one variable.

For example, you could show 2 different adverts to 2 randomly assigned, equally sized groups of users, and compare the number of purchases made within each group to assess the effectiveness of each ad.

Now in the context of Netflix, it's fairly similar: if they have 3 different "covers" for a show, they can observe how users interact with the content based on the cover, and draw conclusions from this data.

Scenario A:

You see this cover for Atypical, you hover over to watch the trailer, you think it looks interesting, and then you check the episode list to see how much commitment this might be (at least this is how I do it).

You decide to add it to your List for later, as you're really into your K-drama at the moment, but you would like to watch it later.

*2 weeks later *

You browse your list, and see Atypical waiting there for you, you and you hit play and binge the whole thing over a weekend.

Scenario B

You see this cover for Atypical, you hover over to watch the trailer... and you stop halfway through because from the cover it looks like a dark crime drama, but the trailer shows you were wrong. You're bored and you keep looking for something good to watch.

Scenario C

You see this cover for Atypical, and scroll past it without even really registering what you saw.

So, I'm sure you see my point now - different covers can illicit very different responses in the same type of user, even when keeping their preferences fixed, and only changing the initial, most superficial representation of the content.

Disclaimer: I do actually like this show, so my intention is not at all to bash the way it's been presented. The image choices were arbitrary for the purposes of demonstration, I like all characters equally. Apart from Evan who is my favourite and objectively the best character.

Let's go deeper

Why is this of any significant? There are 2 stages I would like to split this into: the data generated from A/B testing, and the way this informs your personalised version of the product.

The Data

Netflix knows what time of day you log in, what you watch, how long you watch for in a session, how many episodes you binge at a time, even your completion rate on content that is shown to you as a suggestion based on what you had already watched. Aside from the actual user input such as adding content to your List, and liking or disliking, there are so many datapoints that likely have a bigger impact on what your Netflix experience looks like.

Your Netflix

At the end of the day Netflix wants you to engage with their content. So it's in their interest to suggest content that you will watch. And this is what they do.

Given all the data that has been collected about you, people that are assumed to be like you, and their preferences, Netflix will not only try to push specific content to you, but also in a specific manner.

Have you ever looked at the title of a section of Netflix recommendations and thought : "Wow, that's a specific title"? Same here, but it likely is done with a view to increase our chances of clicking, than if the content were interspersed amongst more generic titles like "Comedy".

Back to the covers

Netflix covers, like books and many other media formats, are designed to entice you to engage with the content. The difference here is that the cover can change based on the time of day, your viewing history, location, language settings and a whole host of other parameters, to be optimised to maximise your chances of clicking. Now, I don't have access to any of Netflix's data, so don't quote me, but I would guess that personalising covers probably increased viewing rates by at least 20%.

By implementing a fairly simple change at likely a negligible cost, Netflix is able to improve the service for its 2 main stakeholders.

Users: spend less time trying to assess if they will enjoy content

Producers: Stronger view percentages/completion rates.

This raises an interesting implicit assumption I have made so far - everyone wants their content to be seen only by people who they think will engage with it based on data that is already available.

If this were the case, however, no one would find anything new on Netflix.

In reality, predictive models are likely made based on the perceived similarities between content, and other users to determine if you are a strong match for the content. Then if you are a strong match it may be suggested to you. On top of that there are likely some randomized suggestions added to catch anomalous users. Finally, there are some producers want their content pushed to a higher volume of users rather than quality.

Putting my Developer hat back on

Now, from my knowledge of React, I would hazard a guess that when a user opens the homepage, sevaral components mount, and including the containers for particular piece of content, showing the cover. Each container might use a function that references the App's state to see who is logged in, in order to inform the choice of cover shown to the user.

So, in Summary

Your Netflix looks different to mine (shock). Now you have an understanding of why this might be, and some of the elements that are customised.

I haven't touched on it here, but there are potential downsides to this kind of mass customization, however if you've done your homework you will know that most of the main issues are covered given the context.

I might investigate this a bit further in a future post, where I can explain (from an outsider's perspective) how I might try to simulate this level of personalisation in my own React app - let me know in the comments if you would be interested in reading this!

PS - Music of the Moment

I forgot to add the music section to my last post. Terrible behaviour - so I'm including 2 live performances this time.

The first is the one and only Yebba:

The amount of times I have looped her Sofar Sounds performance? It's ridiculous

Yebba - My Mind

I genuinely cant choose a favourite song from her catalogue, and I can't wait to see what she does next.

Secondly, we have Nao.

Let me tell you something about Nao: this woman has RANGE. Who is doing it like her?

Nao - Orbit/Saturn

Also I have to take this moment to give Kwabs the praise he deserves. His 2015 album Love + War still delivers to this DAY.

A bit about Haptics

Gbenga Ojo-Aromokudu — Thu, 10 Sep 2020 20:19:13 +0000

It started when I downloaded a 3rd party app to make my touchbar more interesting. Being the person that I am, I was combing through all of the settings to personalise as much as possible for my preferences. I noti there was an option to switch on haptic feedback, so I did so, and wondered what that would change. At first I didn't notice anything, but soon enough, I realised that it meant I got a small vibration when using the touchbar. Cool. Didn't think much of it and moved on.

Some weeks later, I was trying to do lots of things at once as usual, and I had one finger on the trackpad, and another on the touchbar, trying to change the song. I noticed that I felt the vibration in both fingers. This made me stop and think - what is going on when I use the touchbar that gives me this so-called "haptic feedback"? How can it be linked to the trackpad, and why is it something that I can turn on/off using a 3rd party app?

What is Haptics?

In short, Haptics is all about creating a sense of touch by directing vibrations to a particular area on a surface to create a feeling of pressure. It can have many applications: from my Macbook, to robotics, to prosthetics.

In investigating a little further, I realised that I, and likely you, have had more experience with haptic technology than you might realise. If you have a phone that vibrates, or have ever used a controller for a gaming system which vibrates, then you're familiar with haptic technologies in at least one of its applications.

An example that occured to me recently:

When I got my Macbook, and I tried to use it for the first time, I noticed that the trackpad didn't 'click' when pressed if it was still in sleep mode. However, when the screen was on there were two levels of 'click'. I did a small amount of research and found out that Macbooks use haptic trackpads, which explained what happened to me.

Before this point I had honestly never considered the kind of technology that goes into a trackpad, but, it lead me down an interesting rabbit hole.

How does it work?

Without getting too detailed, I'll try to explain simply how it works. There are receptors in the skin that respond to different stimuli, such as an object slipping our of your hand, or the sharp edge of a knife. Haptic perception is achieved by noticing and feeling contact with surfaces through movement (as opposed to tactile, which refers to static touch).

Given that, on the whole, many people are engaging in haptic perception without even realising it, I wondered how it might be applied to people who are otherwise limited in this area. Applications I have seen so far have ranged from an vibrating video games controller, to Exo-Skin, which can be used to help retrain patients through physical therapy.

Why do you care?

What is particularly intriguing to me about haptics, is the way it leans into minimalism and multi sensory feedback. By this I mean, it gives us options to split up methods of communication. For example, imagine you were filling out a form, on pen and paper. You answer each question one by one, and then hand it to a member of admin staff. You hay have mispelled your address, or missed a letter of your phone number without even realising it. However, there is a fair chance that this may go unnoticed by both you and the staff member. Evidently this could cause a number of problems down the line.

Then transfer this situation to a computer, which can dynamically give you feedback as you go through each question, using colours for example. You can use a controlled form that validates your input as you go, so you must at least give a phone number that could be correct. This is better, as it catches errors before they have a chance to occur and be saved to a database. However, depending on how cluttered the webpage you are on is, or how many tabs you might have open, sometimes you can miss these visual cues when completing forms. (Raise your hand if you've tried to submit the same form 3+ times, not understood why it hasn't worked, and then later realised your input was invalid. Guilty)

Now, imagine if upon filling out each field of the form, if you try to move to the next one leaving invalid input in the previous one, you recieved a small vibration. This would give you immediate feedback to let you know that something should be corrected, and it separates the method of communication into something that might be more noticeable. Alternative use: on online banking or other secure website, you might receive a vibration to warn you that your session is about to time out. This could be useful for those of us who get distracted in other tabs.

A realistic approach

Let me stress that the goal should not be to make everything vibrate all the time. Using haptics for a select few things currently allows us to separate what is important from the constant barrage of visual cues we see and have to interpret throughout the day. Converting too many cues to haptic feedback would just dilute the effect of each piece of feedback.

Haptics can also be used to recreate sensations that we would other recieve as feedback in real life, to enrich an otherwise completely virtual experience. Take for example, on an physical radio (if you still use one), you recieve sensory feedback as you adjust the volume, as you can hear the difference in volume, and also (depending on the radio) can feel the individual increments as you turn the dial.

Consider the equivalent but translated to a phone. An on-screen dial that you can rotate by tapping and holding the screen. But how do you know when you've gone up one level? Or when you've reached maxium volume? Haptic feedback can help here, especially if you're visually impaired.

Your Trackpad

Now, what I really wanted to do with this post was explain how my (and possibly your) trackpad works, so let's get into that.

To me, the wildest realisation was that the trackpad (on a Macbook 2015+) doesn't itself actually have multiple 'click levels' (not sure what else to call it), but in fact, based on the amount of pressure the user places, there is a targeted amount of haptic feedback, that makes you feel like you have clicked something.

There are sensors in the trackpad that can feel how hard it is pressed, and returns a vibration to the location where the pressure is applied

Practical exercise (if you have a Macbook)

Try to feel the 3 distinct inputs in your trackpad. ie. try tapping it gently, clicking it, and clicking it firmly. You can notice it feels like there are 2 different 'click levels'? now try using 2 fingers to do the same thing. What do you notice? there's only one 'click level'. This would not be possible if it were actually within the hardware to have 2 different click levels. Rather, in the software, there are sensors that make the trackpad respond to additional pressure only if it comes from one point, and no more.