How do you build an app for a client who already seems to have it all together?
When we first started working with Frank & Oak, an online men’s clothing brand, they already had a fantastic desktop website and mobile website. Our design challenge was a unique one: how could we continue to push the envelope and enhance their brand experience with a mobile app? How could we build something that would contribute significantly to their eCommerce solution?
It was a challenge; fortunately, we were able to rise to it and build something we are extremely proud of. It also won a 2013 Applied Arts Interactive Award. Here are the three strategies we used to design an award-winning app:
Create a Mobile-First Approach
When we analyzed Frank & Oak’s brand identity, we noticed that one major reason they stood out was because of their focus on rich content. For example, they immerse storytelling editorial photography in which they showcase their products, along with style tutorials, videos, and writing.
We realized that editorial is a key part of their brand experience; however, this function is secondary when it comes to a mobile experience. Since a mobile phone screen has less real estate and the customer is usually on the go, it’s important to keep a retail app concise and effective. We decided to focus on the shopping, browsing, and purchasing functionality. We even added category sections for the app specifically, in order to help users shop and browse faster. (Frank & Oak’s eCommerce website does not have categories arranged by item types.)
To keep the stylish brand experience consistent, we simplified user interface (UI) design and exploit their editorial photography. For example, we made their monthly issue’s main image the splash screen for the app, which updates when a new monthly collection is released. It serves as an interesting visual parallel; much like how the cover of a magazine is the first thing a user sees, the splash screen is the first thing a user sees – and to provide a seamless omnichannel experience, both now feature the same image.
Additionally, Frank & Oak customers are stylish, and we know that users are more likely to engage with a beautiful app that correlates with their lifestyle. MSN points out that the more time a person spends in the store, the more likely they are to make a purchase; we wanted to create visual impact to advertise Frank & Oak’s fashion style to engage new and loyal customers.
Focus on UI details, Transactions and Customization
There are a ton of apps now, and many of them have strong identities. We wanted the Frank & Oak app to stand out, so we took it to the next level: we customized the details in the hopes that our users would notice and appreciate it. This is the reason we built a custom loading screen, custom sharing module, and custom tab bar.
We also made the decision to hide the navigation banner and bottom series of tabs when a user scrolls in order to make it easier to focus on the task of buying. The original website, which was beautifully designed, had many more details and interaction functionality with cursor rollover; we stripped these elements away (as they’re distracting on mobile), and put static images and very subtle grids to aim the eye as it browses through the app.
Similarly, we were extremely conscious of the ease of navigating around the app; we wanted to streamline it by minimizing the number of taps and gestures. Instead of forcing the user to go back to the original menu when they were navigating through the store, they could simply swipe left or right to go to the previous or next category. The status bar updates with that corresponding category’s name. This focus on simplifying brings us to the final point…
Simplify Shopping Experience Flow on Mobile
We knew that users usually buy from Frank & Oak monthly, often even twice a month; this is why figuring out a fast and simple user flow was essential.
Users have large screens when they’re browsing the desktop website. This means that Frank & Oak can get away with putting everything on one page, and the user can quickly see what they need to fill out. On mobile, users need to go step by step; they may get lost, or bored, or decide it’s taking too long and abandon their cart. It was our job to tackle all these questions and concerns.
In the design process for checkout, we focused on flow by grouping and separating information through visual communication. Examples of this oft-overlooked meticulous task: do we ask the user for a shipping or billing address first? Do we combine credit and gift codes together, or do we separate them? Do we pre-populate or save data for users? These types of questions led us to solutions that would simplify flow.
Closing Thoughts
The completed Frank & Oak app follows fundamental mobile design principles:
- Values: in our case, this was the reason behind our emphasis on the brand image and experience
- Remarkability: this is why we took the time to meticulously craft every detail we could
- Simplicity: make it a smooth experience, and make sure users find it easy to purchase
That’s what we did to build an award-winning app; it’s our hope that these principles help you to build a mobile experience that delights your users. And, who knows, it just might get you an award or a five-star app!
In related news, we just launched Frank & Oak for Android, as well as an iOS 7-optimized app with iPad-exclusive features, including The Edit, Frank & Oak’s lifestyle magazine!
Click here to download Frank & Oak for Android
Click here to download Frank & Oak for iOS
Connect with Raine on LinkedIn and Twitter.
About the Author
