Learning to see UX as more than design
a case study of learnings from Anudeep Ayyagari’s UX Kickstarter Workshop
For quite a while, in my mind, UX design has been always about the interfaces. Whenever I looked at an interface, the aesthetics were always my focus .
Over the past couple of weeks the UX Kickstarter workshop clarified the way I think about UX
Here are 4 things I learned and unlearned (stick around till the end to see how I applied these learnings to a mobile web interface)—
(Not going to bore you by stating complete laws and principles here, but I will mention which laws apply where. Look up the principles if you’d like!)
1 — The look of the app is the NOT the first thing in UX.
UX is about delivering a product that works for users and businesses. A stunning interface that is confusing to navigate or doesn’t solve a problem is useless at the end.
So the first thing in UX is to identify what the problem of users is (+ I’ve learned I should rely less on my assumptions, and more on listening for actual problems).
2 — You don’t need to reinvent the wheel.
UX is not about packing in the creativity. This was fairly easy to understand, since I myself get pretty frustrated with constantly changing interfaces on some apps.
Repetition and similarity are the way to go when it comes to commonly or frequently used actions and navigations. So it’s good to follow placements and navigations that have worked well for other similar platforms.
(cue Jakob’s Law)
3 — Understand the audience: your users and your business.
Audience behaviour helps so much to guide your UX design.
For example, it will be easier for people to press a “Buy now” button on a mobile app if it is close to their thumb, at the bottom of the screen. Using a contrasting colour and a good size will make this button easier to find.
Let’s say they click buy now — now it’s time to help them transition to the checkout page. A user who sees a loader telling them the next page is coming will be more relaxed than a user who sees a blank page while waiting for checkout to appear! Wouldn’t you simply leave the app and try again if you saw a blank page for a long while?
So we make things move. Use loading bars or some indication of the page loading so that the user is engaged while waiting. Then, the user reaches the checkout page and is prompted to complete the steps to purchase
(cue Fitt’s law, Doherty threshold, Zeigarnik effect)
Now in the same example, since we’ve made the ‘Buy now’ action easier, and we’ve retained the user until checkout using a clear transition to the checkout page, we have helped the business gain a customer.
This need to also evaluate the business impact of your design has been an important learning for me.
4 — The looks are a later stage topic — but they’re still important.
A cluttered interface is confusing. People’s minds will not know where to focus, if there are several colours, clashing contrasts, too many things that ‘pop’.
Make life easy for yourself and the users and create clean, minimal designs.
Reducing the number of things that catch the attention of the user on a single screen, offering clearer and simpler choices — these are great ways to reduce clutter on a page.
Of course, always check alignment and placement. If all of your elements are disorderly, it can create the illusion of clutter.
(cue Hick’s Law)
Case study — reimagining the Hushstays mobile interface
Find my prototype at the end.
HushStays owns the copyright for their web content, so all content in my prototype has been modified, but mimics their interface for the purpose of learning :) I used the Unsplash and Iconify plugins for pictures and icons.
What is Hushstays —
Hushstays (https://www.hushstays.com/) is a platform that helps tourists and travelers find vacation homes and glamping sites.
Understanding the stakeholders —
Users:
The users of this platform are travelers and tourists who want to find spacious, well-maintained, aesthetically built homes near prime tourism locations the Himalayas.
Business:
The business is looking to create high-quality vacation stays for tourists. The business has a collection of beautiful vacation homes of various sizes. The homes are located in offbeat, scenic locations near the Himalayas.
Identifying improvements in the current mobile interface —
The HushStays website can be accessed on https://www.hushstays.com/ (open on mobile to check out the mobile interface).
As a way to apply some of my learnings, I reimagined HushStays’ mobile web interface.
The 2 aspects I chose to improve:
- Reducing clutter
- Making common/frequent actions easy to perform
What I did not change:
- The overall colour palette,
- The types of information originally listed.
Home Page
Website Menu
Book Now Page
I chose to work on a limited number of pages for the above.
Check out the prototype for my reimagination of the HushStays mobile web interface HERE.
