UX. Say it enough times, and you may question the meaning or its existence altogether.
If you follow us on social media, you may have seen that we recently launched a sci-fi mini-series called Digiccino (a quest to address those deeply heated UX questions). If you missed the posts and are curious about them, you can check them out on our LinkedIn, Instagram or Facebook pages.
The goal of this 4-part series was to provide insightful tips about UX/UI design in a fun, engaging way. In this blog post, we will analyze and breakdown the designs in these posts.
But first - what exactly is UX and UI design?
UX design, short for user experience design, creates an intended experience that a person has with a digital product. It encompasses the person’s perception of how easy the product is to use, how efficiently they can complete a task using the product, and most importantly, how enjoyable the experience was.
On the other hand, user interface (UI) design is about the visual look of the digital product - the colours used to represent the brand values, the look and feel of buttons, the overall style across the interface, and more.
Here’s an analogy that might make it easier to understand. Imagine that you are an architect building a house for a client. You generally know what a house consists of - a kitchen, living room, bedroom, washroom, etc. There are also smaller components to consider; how the doors work, the number of windows, and the placement of lights. The client has also stated that this house needs to have two floors and a basement. In addition, it should portray a majestic impression.
But how should it be designed for future inhabitants to enjoy living in this space? Would it make sense to have the dining room be upstairs while the kitchen is downstairs? Would it be better to have the washroom door swinging open into the bedroom or the other way around? That is what UX design is all about, but applied in the digital space.
On the other hand, UI design would equate to the visual look of the entire house in this analogy - the materials used to build the house, the style of furniture, the colours of the walls, etc.
And quite simply, how these two areas co-exist makes each house a unique experience for the dweller at hand.
With that said, we are now ready to dive into the series.
Digiccino is an ultra-light, sci-fi mini-series set in 2091, an absurd and strange future in which humans can now consume food in a digital format. The story revolves around Alexa, our protagonist, and her interactions with a new electronic cafe called Digiccino.
Starting a company is no easy feat, let alone maintaining it. In this series, Digiccino brushes upon many familiar digital touchpoints that businesses often have or would want to consider when engaging with customers, such as their website, emails, app, and social media presence. The big question here is, how would one strategically use these contact points to attract and retain customers?
More importantly, how could Digiccino not only survive in this saturated, digital marketplace but also stand out from its competitors?
Alexa considers ordering a drink from Digiccino
Recommended by her good friend, Siri, Alexa looks up Digiccino, her first real interaction with this futuristic cafe. Hopefully, Digiccino can give a solid first impression through its website.
Let’s take a look at the two designs in our first post:
Which design do you think is better? Before you answer, I want to clarify something - there is no right or wrong in design. There are, however, best practices. Ultimately, it is about what works specifically for the people using the product at the end of the day.
For example, in the left design, the size of the drink can be selected using a dropdown, while on the right, it uses buttons. The advantage of the left design for new customers like Alexa is a detailed label “Small” to help them understand what 64KB means. But the benefit of the right is that you can see all the sizes available upfront, whereas, on the left, you would need to click on the dropdown to view all the options (an extra step for the user to take).
So is using the dropdown better, or the buttons? When encountering a split decision such as this, it might be optimal to introduce user research and testing to understand your customer's needs better. In this case, because not all customers are digital-coffee-savvy or well-versed in the digital vernacular, the dropdown option may be better for helping customers make an order.
There are also accessibility concerns in the right design - the contrast of the white text on the bright, teal button makes it very difficult to read. Overall, considering all the elements, I would say that the left design is more user-friendly.
Alexa considers whether she should join the loyalty program
As we move into part 2, the plot thickens. After Alexa orders her drink, she discovers that she earned 50 points and is prompted to join Digiccino’s loyalty program to keep those points for future rewards.
Inherently, this could be a risky move for Digiccino - it would appeal to those who love earning free rewards, but it could also backfire on those who think that Digiccino is too pushy at this moment. Keeping that in mind, Digiccino needs to make the process of joining the program as frictionless as possible.
We see the design on the right is more streamlined. There are four fields in total to complete, with three of them already auto-filled from the order. At this point, Alexa is only one password away from collecting mega points! On the other hand (left design), there are six things required to fill out, with two questions that seem irrelevant - why do customers need to provide their favourite colour or indicate their preference between cats or dogs? Customers are highly cautious of the data they provide to businesses, so when they are invited to provide additional information, they need to see a clear connection between how this information helps the business and how it serves themselves.
Moreover, two primary call-to-action buttons on the left design compete for the customer’s attention: “Contact Support” and “Create Account.” A call to action is a prompt that encourages people to take a specified action. Having two similarly styled call-to-actions makes it unclear which immediate action Digiccino would like the customer to take.
If I were Alexa, I would find the design on the right more comprehensible at a glance while also requiring less effort on my part.
Alexa receives an email about an exclusive offer
Alexa ends up signing up for the loyalty program but, in the blink of an eye, forgets about Digiccino afterwards. It’s not until Digiccino sends an exclusive promotional email to members that Alexa remembers their very first interaction.
To be precise, the designs in this third post fall under email marketing and graphic design. However, because UX includes thinking about the entire user journey, we must not neglect this interaction - emails are a significant touchpoint between companies and their customers.
At a glance, both designs are visually pleasing. However, if you look more closely, the one on the right has more text and is structured so that Alexa has to read each line to understand the message. On the contrary, the left is concise, and the box helps highlight the information. Alexa can understand quickly that there will be magical offers every Monday and that today’s promotional special earns twice the points on any drink.
However, consider this additional detail. The email contains a secondary call to action (download the app). Although it is not noticeable in the left design, the example on the right has a clear button.
And thus, the duplicate calls to action triggers confusion. One has to ask: does Digiccino want me to download the app or order a drink? Taking a step back, would Alexa even want to download the app after just one interaction with Digiccino?
Customers are busy - they won’t be spending a lot of time reading these types of emails let alone exert the effort to decipher what the company wants them to do. Besides having a single clear ask instead of multiple requests, the timing of when we ask customers to do things is just as important as the request itself. In this case, because Alexa has had only one interaction with Digiccino, the likelihood of her downloading the app is probably not high. It is more strategic to persuade her to order a drink at this point than download the app.
Therefore, the left design is probably more user-friendly in this case. Not only is it visually easier to skim the content, but the call to action to download the app is also more of an informational tidbit. The smaller tip, in this case, is used as a means to inform Alexa that the app exists and is not the primary action she needs to take at this point. Digiccino could also consider sending another email at a later date that only focuses on the app and its benefits.
Alexa receives a notification about a surprise gift
The story has now reached a pinnacle: Alexa's experience with the Digiccino app and the immediate delivery of her order has left a strong impression. She gradually starts to order more from Digiccino, and over time it becomes her favourite electronic cafe. Fast forward to a summer evening in 2092, when Alexa receives a notification about a surprise gift from Digiccino to celebrate their first anniversary.
The left shows a fun, interactive design with a gift that invites Alexa to open it. The colourful, fullscreen approach also shows how Digiccino is treating this as a special moment, one where it wants her to have a memorable experience. On the contrary, the design to the right shows the gift as just another promotion, equivalent to other exclusive member offers.
If you were Alexa, which design would excite you more?
We’ve dived deep and analyzed the UX/UI of the individual posts in the series. But we haven’t talked about the series as a whole and how it alludes to CX (customer experience).
While UX primarily focuses on single experiences (for example, the e-commerce website where Alexa orders her first coffee), CX focuses on the entire journey a customer will have with a company over time across multiple touchpoints.
In the first three posts of Digiccino, we specifically showcased touchpoints that were noteworthy points of conversion for a company:
These are critical stages of the customer’s journey which can trigger success for a business if designed well. However, CX is not just about creating a functional and usable experience for the customer - it’s also about how it can bring moments of delight.
This is where our last post of the series comes in. We see how Alexa is elated to receive a notification from Digiccino about a surprise gift on her first anniversary with them. This might not seem like a big gesture, but it subtly demonstrates how Digiccino values Alexa as an individual, a unique customer not taken for granted. She might not consciously recognize it, but this isn’t merely a moment of delight for Alexa - it makes her view Digiccino more favourably too.
In any relationship between two people, it’s all about how each interaction, big and small, adds up. Are you happy when you’re with that person? Do you have fun when you hang out? Or do they upset you, make you frustrated, maybe give you anxiety? The same principles apply between companies and customers. A customer's perception and attitude towards a business come from all the interactions they have ever had with them over time.
For example, a teller at a bank might provide the best in-person service of their life - but if the customer goes home and has a frustrating experience trying to log into their account, that customer has now experienced a negative encounter with the bank. And we know already how negative memories generally imprint more deeply than positive ones.
That’s why businesses need to focus on creating memorable and enjoyable experiences across all of their touchpoints. It will also help them grasp a competitive advantage, an edge they may be seeking in their service offering.
You might be wondering what the process is like for designing a great customer experience, how you can apply it at your company, and how to get started?
At Digitalist, we are experts in UX/UI and CX, expertise built up by empowering companies to design products and services their customers love. It is in our DNA.
So let’s have a chat! Contact us at info@digitalistgroup.com. (We can do it over a cup of coffee too, if you’d like.)
