As designers, we’re often faced with what I call the cookie-cutter dilemma. No matter the project, you usually have a core journey defined that works well and meets your clients’ needs. You need to stick to the journey that works best—but you’re also expected to deliver outstanding work.
So how do you satisfy both seemingly conflicting tasks? I believe there are 3 ways to do it: streamlining the journey, personalizing the UI, and incorporating added-value features. You can add variety without throwing the rulebook out the window.
At NN4M, an app development company based in Edinburgh, Scotland, we design and develop transactional shopping apps for retail brands. At their core—regardless of the type of products they include or consumers they are targeted towards—these apps all follow a similar journey.
“You can add variety without throwing the rulebook out the window.”
The ultimate goal of a shopping app is to purchase a product—and it’s as simple as that. In order to make that process as seamless and easy as possible while minimizing basket abandonment, we’ve developed a tried and tested shopping journey that just works.
Few try to change the fundamentals of online shopping. The way we navigate from home page to product is the same everywhere:
- Home page
- Product category
- Product list page
- Product description page
- Add to bag
- Checkout
What’s important is that this shouldn’t be seen as a negative factor—it means these steps work.
“Users need to feel like they can trust a website or app before they make a purchase.”
We hear this a lot from our clients: How can we make our app different and exciting? It’s a difficult balance to achieve. Users need to feel like they can trust a website or app before they make a purchase. More to the point, it’s just too expensive and risky for our retail clients to try something completely and fundamentally new. But there are ways to keep designs fresh and exciting to the user without potentially alienating them.
We look to the key differences apps have over web design. An app serves as a playground for a myriad of different gestures and animations, and we’re finally finding exciting ways to use them while maintaining the core shopping journey.
Strip the unnecessary and stick to basics
In order to add a little something different from the usual journey for Warehouse, we incorporated familiar iOS gestures into their app. Users can swipe up and down to see large imagery of different products in a list, and swipe side-to-side to view more images of the same product. This removes the additional step of having to return to the product listing page, and it offers a quicker way to view more products. This approach doesn’t force the user to change the way they navigate, and it differs enough from the website to inspire a download of the app. Importantly, it’s not different enough to confuse users or push them away.
“Strip the unnecessary and stick to basics.”
In order to do this, we had to move away from the standard “scrollable” approach to product pages pervasive across most ecommerce mobile websites. Sometimes this is the best practice within mobile apps—especially if you need to display multiple product options such as a color selector or size selector—but every so often you get an opportunity to trim the page to its basics.
So what are the most important aspects of our products? For us, it’s image, price, name, and the “add to bag” call-to-action (CTA). It’s a common request with fashion apps to provide larger images, so that’s the route we took here—huge, almost full-screen images that take up the main focus of the screen.
Everything else that’s not essential to making a purchase is tucked away into smaller CTAs at the right-hand side of the image. It’s all there if you need it, but this stripped-down experience appropriately suits the needs of the typical window shopper.
Make it personal
It’s more than just ease-of-use and a clean UI. When someone decides to download an app, they’re doing so because they always want that app with them. Structure your app with that idea of personalization and personality and play on the aspect of friendliness. Just because it’s a branded shopping experience doesn’t mean it can’t be personal.
“Just because it’s a branded shopping experience doesn’t mean it can’t be personal.”
For example, we can offer the user a personal stream of products they may be interested in, or a personalized home screen with information specific to the user. Or we can be less direct in just making the app feel friendly with better terminology and an animated personality. We have the opportunity to give apps a personality through animation, much like you would a character in a cartoon. Just like a character down on his luck would drag his feet, your in-app error message can animate in similar ways. Think of enough clever (yet necessary) animations, combined with personalization, and your app will start to come to life.
Incorporate additional features outside of the main experience
Depending on your project and the time/money constraints set by the client, adding additional features may not be a viable option. But if you’re given this luxury, take the time to brainstorm features that could complement the main experience.
“Combine clever animations with personalization, and your app will start to come to life.”
We worked with Mothercare on delivering what became a multi-award-winning, feature-filled app. As the name suggests, Mothercare is a retailer targeted towards parents with children or with little ones on the way. Beyond the standard shopping catalog in the app, you can find a plethora of baby-centric add-ons.
There’s baby tunes, a collection of songs for children and babies—even ones who haven’t been born yet. There’s a baby names finder that randomly generates a name if you shake your phone. There’s even a contraction timer to accompany you while you’re in labor.
As ridiculous as it sounds, these features are actually used more often than the shopping side of the app—and they keep users coming back. They’re a huge part of the app and serve as more than a gimmick to a lot of mothers.
It’s a breath of fresh air when opportunities to think outside the basic journey arise, especially when you work on just one type of project. It allows you to experiment with different things as a designer and create a product that’s more worthwhile for a user.
Small risks, big rewards
We can apply these concepts to any kind of app or project. You could be creating the next multi-million dollar banking app, or a vegan-focused recipe app, or a social network app for pets.
Regardless, it’s all been done before and it’s easy to follow the formula. And while it’s sometimes best to stick to what you know, it doesn’t mean there aren’t small wins to be made. You don’t have to take big risks to achieve big things. Sometimes the smaller, less conspicuous enhancements can be the most rewarding.
by Jo Wigginton
Jo is a designer at NN4M, a Scottish retail app development company. She's passionate about all things design.
