FatWallet is one of the leading resources for online coupons and cash-back shopping. They came to Two Toasters looking for a significant update to their highly popular Black Friday holiday shopping app, as well as development of a Deal Hunter app that could give their customers the hottest deals throughout the year.
FatWallet shoppers are always on the lookout for the best possible deals; they’re moderately tech savvy and like to share information and opinions with their fellow users. Our goal in creating these two apps was to present deal content in a clear yet engaging way, and to also enable users to contribute opinions on offers and share with fellow shoppers. Because FatWallet supplies deal content daily, it was also important for us to present that information within the app to engage users to search for deals year-round. Our designers focused on a layout reflective of programs and apps that consumers might have used before, like the App Store, which has a tabbed layout. With this in mind, both apps have a four-tab format that makes it easy to browse for deals, search for stores and categories, and identify favorite stores.
We began this summer on both projects, and designed an entirely new Black Friday app to replace the existing one; we then used the Black Friday app framework to create Deal Hunter. As a result of our six-plus years of app development experience, we’ve established best practices that enabled us to rapidly implement functionality, so we could focus on fine-tuning and improving user experience. Under the hood, we used standard tools such as AFNetworking and Mantle, and our open-source library Toast, which included a Mantle add-on that allowed us to quickly accommodate changes in FatWallet’s API and rapidly deploy new builds. During development we also took advantage of Auto Layout, with which we could easily accommodate the new screen sizes of the iPhone 6 and 6+ (making the Black Friday and Deal Hunter apps the first from Two Toasters with full iOS 8 support).
Features We Love
Deals lists and ratings
FatWallet’s users insist on finding the best deal on the items they really want, so we focused extra time during development to ensure we displayed content that would interest customers. Deals can be sorted by category, and ratings provided by the FatWallet community are provided on the first screen. Users can provide their own feedback by swiping right on the deal to upvote or left to downvote. In addition, by continuing to pull left or right, consumers get options to indicate why they’re voting (e.g., this is a great price, this sells out quickly, deal has expired). During the development process, we iterated on the animations for these voting methods. Physics and animation are what makes iOS feel tangible and fun. We tuned the simulations that run FatWallet’s animations until the motions were just right.
Because we wanted to present as much of the deal content as possible while still providing clarity in the purchasing experience (e.g., why is this deal being shown, and how much of a good deal is it), we focused a lot on the deal details. In the detail screens, users can also provide additional comments that will be shared with other users. And so users don’t lose their sense of place, we created a “sticky” header that appears during scrolling when they’re deep into a detail screen.
Store searches, categories and favorites
Searching for stores and deals is an integral part of the Deal Hunter and Black Friday apps. Our goal was to ensure that searching was as simple and straightforward as possible, without a lot of complex filtering. Users can search by store, or product, and can drill down into products by brand (e.g., search by “shoes,” “women’s shoes,” “women’s Converse shoes”).
Users can also tag favorite stores, and subscribe to those stores for notifications when sales or ad scans become available. We also created an easy-to-read grid layout for store favorites, taking advantage of users’ familiarity with store logos, and used Parse to enable the push notifications.
In addition, because of the large amount of information available to users, we needed to ensure that scrolling through lists was as smooth as possible. During development, our team utilized a performance-testing tool created by Senior iOS Developer Kevin Conner that helped us optimize framerates and minimize frame drops.
The ad scans portion of the Black Friday app (also available in Deal Hunter during the holiday season) may be our favorite feature. When ad scans—also known as circulars—for Black Friday deals are made available, both apps show them with highlighted areas in which users can drill down into a deal. These tappable areas not only show details of a specific deal, but also indicate whether or not the price a user is seeing now is better than what is in the ad scan.
When we began working on this element of the app, we thought a lot about how best to indicate which areas were interactive. Our team came up with the idea of adding animation to the highlighted areas. We started off with randomizing the order of appearance of the deals, but then determined that a cascading sequence of highlighted objects worked best, and iterated on the timing and duration until we felt the animations would be both useful and delightful. Highlights cascade from one side to another, depending on how the user has paged through the ad scan.
As the preferred online coupons and cash back shopping resource for millions of smart consumers, and home to all the Black Friday deals, FatWallet.com works closely with 1,500+ retailers like Kohl’s, Newegg, Walmart, and Amazon to publish special offers, discounts, coupon codes, and Cash Back rewards to its members. The much-celebrated FatWallet forums represent the pulse of an evolving online marketplace where smart consumers gather to share and learn.
Today, Google released the official Android Wear Watch Face API. Two Toasters was lucky enough to get early access and had the opportunity to partner with Specialized, a brand well known to cyclists everywhere, to design a watch face uniquely suited to cyclists. Being an avid cyclist myself and having owned some Specialized bikes in the past, I was excited about this project (admittedly, my current steed is a Cannondale). Designing the watch face was an interesting challenge as the process doesn’t quite match what’s normally required for building a fully featured app. Below, you’ll find some of the questions we answered along the way, along with reflections on some best practices (and you can find the watch face here).
Q. What shape do I design for? Square or Circle?
Given the various shapes of devices that are in the market (and virtually infinite leeway manufacturers seem to have) it’s actually quite important to consider how your design may be flexible to fit various shapes. Of course, depending of the level of complexity you want to tackle, it’s easiest to create a design that fits within the circular face and then just sort of fill in the design around the corners, given that is going to be the most constraining form. Ideally, however, you should try and think about how your design can fit the specific to the shape of the device—it’s the sort of thing that will set your design apart. You could think about how to make the most use of the area and go as far as adjusting the layout completely so it is more in line with the shape of the watch. Not ones to cut corners, on this project we adjusted the layout completely between the two shapes. In fact, we decided as early as during the sketches how we would optimize the design to take advantage of available space while preserving the same feel. In our final design, you can see how the top graph is stylistically adjusted to follow a semicircle shape and adjustments are made to the sizing of typography to better fit the circular face.
Q. Should the watch do more than just tell time?
A. It depends.
The apps on the Android Wear platform are already fairly extensive in their coverage of functionality. But, if you’ve identified a niche user for watch face concept, surfacing some data could be much more interesting and valuable to the user than just displaying time. Even then, I’d caution restraint. There’s only a bit of space that you’re going to have to work with and you definitely don’t want to design something that will be intrusive. The watch face is going to live in the background, so it’s key to try and find the sort of information your user will want to passively consume. For our watch face, weather data struck us as particularly helpful for cyclists. More specifically, we believed our users would find it helpful to be aware of conditions throughout the day in order to to plan a ride. As a bonus, we were able to visualize daylight hours (as cyclists may find it safer to ride when it’s well lit).
Q. What hardware issues should I be aware of?
A. Battery life and screen burn-in.
Android Wear watches will live in two modes: ambient and interactive. Interactive mode is the fully lit, bright screen that you’ve seen in all of the device photos and app-store screenshots. Functionally, this is the mode that the watch will be in when the user is looking at the watch. If a user flicks their wrist or tap on the display, it will switch on to interactive mode. Even in this mode, it’s critical that you’re designing a watch face that isn’t too heavy on the animations (max 30fps) and doesn’t require a ton of images layered on top of each other (as drawing all of that is processor intensive). For our project, we tried to keep things minimal and used as few bitmaps as possible to not put much strain on the device to render things. We also gave users a preference to turn off a blinking colon (the only animation we had) in between the time to eke out a tiny bit more performance from there. (more…)
Transforming a mobile user into a mobile purchaser is an issue every retailer faces. The challenge is to overcome the perilous drop-off that occurs when a user is shopping on a mobile device but opts to complete the purchase elsewhere, often resulting in a lost transaction. How do we encourage users to see mobile apps as the easier, more efficient, and more valuable option for purchases?
The answer is in knowing as much as possible about the purchaser-to-be’s context. We’ve explored this challenge from a number of angles through design work at Two Toasters. There’s a crucial spectrum, spanning the range of inputs that can be used to receive data about the user. A mobile device is a “box of sensors,” the data from which can be used to steer a user to purchase. Sensitivity ranges from simply appreciating that a user is on his or her phone for only brief periods of time, to utilizing iBeacons and other emerging technologies.
Know how your user interacts with the mobile platform
Smartphones are used for convenience, and this differentiator from a web or brick-and-mortar experience must be taken advantage of. While interacting with a small screen and with limited time, the user can’t browse products in the same way as on a website or in store. M-commerce apps should offer a more carefully curated selection, with clear and simple navigation. If the app and its content fits the user’s life and needs, they’re far more likely to make a purchase. (more…)
We know that more and more consumers want holiday shopping at their fingertips. But we’ve passed a milestone this year—as Artisan Mobile’s research shows—by tipping the half-way mark, with 54% of consumers surveyed planning to do at least half of their holiday shopping through a mobile app.
The first, crucial opportunity for apps to cash in on this trend will be Black Friday. What are some of the top retailers doing to attract sales through their apps? Here are three very different mcommerce tactics, and how we think they’ll fare:
Walmart’s in-store price-matching: weak or wise?
Bargain-hunter bait: The Savings Catcher feature of Walmart’s mobile app promises to price-match its online competitors, asking for a mobile screenshot of the product selling cheaper elsewhere.
Will it work? Walmart’s price-matching pledge last week was immediately vulnerable to canny mobile users’ fake Amazon accounts, for example, beating Walmart down to sell a $399.99 PlayStation 4 for just $90. (more…)
Award-winning mobile design and development team to create consumer-facing application for groundbreaking development project
DURHAM, NC and NEW YORK—November 25, 2014—Leading mobile app design and development agency Two Toasters today announced they have been chosen by Google’s Advanced Technologies and Products group (ATAP) to build the Android app for the Project Ara module marketplace. The Ara Module Marketplace (analogous to Google Play but for Ara hardware modules) will act as a consumer’s primary tool for learning about, exploring, configuring, purchasing, and managing Ara devices and modules.
“We’re excited to be working on Project Ara and be a part of a fundamental re-imagining of smartphones,” said Rachit Shukla, CEO at Two Toasters, “To be selected because of our expertise in designing mobile user experiences is a great honor, and we look forward to the unique collaborations that arise from this effort.” (more…)