Hello, I’m Brian Smith, the Design Director at the React Native consultancy, FullStack Labs. In our continuing series for the React Native App of the week, I completed a design review of Honey, an app designed to save you cash. We did a review of the app to identify areas and features that succeed and others that could use some improvement. Let’s have a look...
The home view is beautiful. The product sliders work seamlessly, and they even have a View All Items CTA at the end to prevent users from getting in an endless horizontal scroll loop. The hierarchy of information is excellent. The product and cost are emphasized and the seller is minimized. This is because the purpose of Honey is that you can shop and save with a wide variety of retailers, so exactly who it is coming from doesn't matter much. To scroll back to the top, the user just has to tap the home screen again. This feature helps reduce several scrolling swipes of your thumb.
When titles are too long, you should expect them to be shown in full in the full view. When tapping on "Best-Selling Sneakers and Accessories You Need to Train f...", a user would expect to see the remainder of the name on the following screen. And even though there is enough room, the title is still truncated.
When scrolling down through a list of search results, the only way to get back to the stores and filters components is to manually scroll all the way back to the top. The stores and filters components should re-appear when the user begins to scroll up, regardless of their scroll position. Then slide back out of the way when the user continues scrolling down.
The product detail page is nice and simple. You can get all the info you want on a product without much scrolling. It's cleanly laid out and organized. Adding to cart is straight forward and easy to follow. It's easy to identify and navigate to the seller's page. When creating a droplist, there are 5 potential actions for the user. This conflicts with Hick's Law which states that "The time it takes to make a decision increases with the number and complexity of choices."
The Testing Codes view is really cool looking, it has this great repeating geometric animation and code text animates to show progress. The speed of the codes swapping in/out makes it feel as though the process is going very slowly due to the app's performance. Increasing the speed at which the coupon codes enter and leave the view will make it feel like the process is running faster and is just trying out several code options.
There is no way to cancel testing codes. A user can continue shopping, but is prevented from completing checkout until the full process has run. Including the ability to cancel checking codes would allow impatient users to complete their checkout. Sure they may be missing out on a deeper discount, but at least they can complete the checkout.
There’s a lot more to this React Native application that we didn’t review today. If you are interested in learning more about how FullStack Labs can help you with your React Native app, or if you’re looking to hire React Native Developers, please let us know and we’d be happy to arrange a free consultation.
We’d love to learn more about your project.
Engagements start at $50,000.