After reading Mobile First by Luke Wroblewksi I challenged myself to create a website based on the mobile template first before moving on to desktop or another format.
Principles I wanted to implement include:
- Acknowledge the “one eye, one thumb” user
- Content first
- No hovers
- Enlarge touch targets
- Keep navigation buttons within a comfortable thumb swipe range
I came up with a conceptual business called the Lemon Twist Dress Shop (concept here) which accepts donated dresses and upcycles them into something fresh.
I started by collecting data on the target demographic of females between the ages of 18-35. Most importantly I wanted to know about their preferred devices, technology habits, and online shopping habits in order to develop a user experience that would meet their needs.
79% of Americans have made an online purchase and 51% did that through a mobile phone. As Luke W states in his book users aren’t using their phones just to consume online content but also to shop and conduct business transactions.
As I researched the potential customer base I created personas that encapsulated the user research. I’ve noticed my personas lend towards the psychology of users but knowing the WHY behind a need is critical if I’m going to create something of value. To share a biting quote by Steve Jobs, “It’s not the customers’ job to know what they want”.
When users state “I need a dress for the work party this weekend” their actual desire might be “More social currency”, “Be considered for that new position” or “To be viewed by my colleagues in a powerful way”.
At the moment I am still learning Principal so until then I am sharing static displays which makes explaining the mobile version a challenge. Without thinking I originally placed the hamburger menu and search option at the top of the page out of habit. As I worked through the design process I realized that directly violated a principal of mobile design (thumb led navigation) and so I fixed those tools to the bottom of the page allowing the user to scroll through content without losing access.
With a content first mindset, I kept the home page clean with a focus on product images, one sale, a How It Works, email sign up, and social media buttons.
To determine an appropriate size for the touch targets I followed Apple’s Iphone Human Interface Guidelines with a target minimum of 44×44 pixels.
This is my finished work on the desktop version. Unlike the mobile version, this has a navigation bar at the top and text size links leading to other pages. It is so much easier to create a working design with all the important features and data when you have so much space and more interaction options (like hovers)!
50% of web designers are not considering mobile users and I get it. Mobile design is hard work. Regardless of our preferences, the number of smartphone users has skyrocketed from 1.57 billion to 2.53 billion since 2012. Mobile users are not going anywhere and the savvy UX designer will choose adaption instead of complacency.
My goals in this project were:
- Apply the principles I learned after reading Mobile First (content first, enlarge touch targets, don’t rely on hovers)
- Challenge myself to design a clean functional mobile experience
- Conduct user research
- Create personas