8 Things You Can Learn About UI/UX From Grocery Shopping Apps
June 14, 2017

grocery appLooking to launch the next hot ecommerce app? You can learn a thing or two from the biggest grocery shopping apps that have captured what was once a strictly brick-and-mortar market.

Picture this: you sit down to eat a bowl of your favorite granola, with berries and yogurt. It’s sweet and crunchy, with the perfect ratio of nuts to oats. You’re using your favorite retro sundae glass to highlight those delicious layers (while you’re at it, you may as well post a quick pic to Instagram, right?).

This bowl of granola is more than just your breakfast; it’s the perfect blend of User Interface (UI) design and User Experience (UX) design.

UI and UX are part of virtually every product you use. In the case of your breakfast, the nourishing blend of granola, fruit, and yogurt is the UX. The bowl that makes your morning fuel Instagram worthy is the UI.

How you bought that granola and yogurt in the first place is another story, but one in which UI/UX is equally important. Consumers are increasingly favoring the UX provided by shopping apps instead of the UX found when walking amid grocery aisles, picking out ripe tomatoes (or, frozen pizza rolls and bakery cheesecake). Today’s hottest grocery shopping apps are gaining more users every day, because they deliver a smooth, supportive experience and eye-catching, functional aesthetics.

Get ready to take notes. Here are some of the top UI/UX lessons we can learn from the leading grocery apps.

Keep Sign-Up Simple

Apps are all about convenience — signing up shouldn’t take longer than a trip to the grocery store.

Popular grocery apps like Instacart offer the option to sign up via Facebook or Google+; A connected account sign up means fewer passwords to remember, and a one-touch start.

While most users love this convenience, it’s a good idea to offer a traditional sign up form as well, for those wary of connected accounts. Traditional doesn’t have to mean complicated; Instacart’s traditional sign up form includes only five fields to fill out. Take the hint: the easier and faster it is to become a user, the more people will give your app a try.

Display Costs and Totals Clearly

It’s hard for grocery shoppers to stick to a budget with that bag of chips sitting right in front of you, begging you to pick it up. Staying on budget and accurately predicting the cost of a trip to the grocery store is one of the major complaints of in-store shoppers.

Where the physical store fails, your app can triumph. Adding a feature that clearly reflects the cost of the shopper’s virtual basket helps reduce post-purchase regret — and improves your customer’s chance of return.

It may seem counterintuitive, because you want people to spend more but, by giving your shoppers a visual aid to help them stick to their spending goals, you can actually foster a more positive shopping experience. You’re doing one better than the physical store, by solving a common problem consumers face when shopping.

They may spend less with you in a single shopping trip than they would in a store, but they’re much more likely to choose your app over and over. Customer loyalty is worth much more than the revenue from one transaction.

Desktop to Mobile Continuity is Key

When you put your basket down to check your grocery list or answer a text in the store, you assume it won’t go anywhere. Shoppers love an app that mimics this — across different devices.

Companies like Tesco in the UK offer a desktop feature that syncs to a user’s phone app, ensuring that the cart a shopper began filling on his phone is also accessible on his desktop (or any other device he may use to complete the order).

Designing for continuity means tailoring the existing layout and functions of your app to various devices, to create a smooth transition between them. If a user creates a shopping list on her laptop, she should see that same list waiting for her when she opens the app on her mobile phone to continue shopping.

Put Barcodes to Work

Barcode scanning is one of the most popular features of most grocery apps, and a fabulous example of how a digital app can complement the in-store experience.

BagIQ helps shoppers stay on budget by tallying their items by barcode as they shop. Apps like ListEase make it easy for shoppers to add products they’ve bought before and want to reorder, by simply scanning them — without any searching, typing, or hassle.

Incorporating a feature that allows your app to interact with the physical store products is a great way to capture new users. A consumer may not be ready to take grocery shopping entirely online, but may use an app to quickly scan the pantry and make a list. Do research into consumer shopping behaviors in your brick-and-mortar stores, and think about how your app can add convenience to that experience.

Build Loyalty

From coffee stamp cards to frequent shopper clubs, loyalty programs are a great way to engage and reward your customers. Good UI/UX design will help you maximize the impact of your loyalty program.

One of the best ways to get more customers to use your loyalty program is to simply remind them that they can. Canada’s popular PC Plus program helps users track their points online, and notifies them of weekly offers as they come up, to encourage strategic purchasing.

Your app’s UI/UX should also be designed to gamify your rewards program for users. After all, the appeal of a loyalty program is the thrill of racking up points and “winning” something. Give users a satisfying animation whenever they achieve a new prize, or a motivating visual that tracks their points, and you’ll find them coming back again and again for those sweet rewards.

Pictures are Worth…

No one has time to read 1,000 words on their phone. When you’re searching for your favorite cereal at the store, you look for the bright color of the box (and perhaps an iconic cartoon character) to find it quickly. Consumers want the same ease of searching and finding eye-catching products digitally.

Popular grocery chain Morrison’s uses images that mimic the visual inventory of a grocery cart. Using images with no text (or minimal text) helps people quickly find the products they’re looking for. Images also allow users to visualize their haul better when they look at their virtual carts. Make it just as easy and aesthetically pleasing to scroll through products on the screen as it would be to walk down the aisles in a brick-and-mortar store.

Find Recipes for Success

Apps offer unique opportunities to engage your customers, outside of strictly advertising your own products. Grocery stores like Whole Foods and Wegmans include recipe features in their apps, allowing shoppers to create grocery lists based on specific recipes, or vice versa: to find recipes based on ingredients they already have on hand.

The recipe feature adds value to the user’s experience, while encouraging increased purchasing. Try to find something relevant to the way consumers use your products, and design your app to support it. You may build app features to introduce shoppers to some of the specialty items you stock, announce brand new products, or inspire creative ideas for using your products.

Apps for Branding

One thing all the leading grocery apps have in common: they recognize that the app is not just a tool to sell groceries — it’s a tool to sell the brand.

The most successful grocery shopping apps aren’t working at odds with their brick-and-mortar counterparts. They’re working to enhance the entire brand, whether shoppers choose to get their food online or in the physical store. This is where UI becomes extremely important. Your app should echo everything from the colors, to the font, to the tone of your brand. If this isn’t your area of expertise, don’t be afraid to reach out for help. At Barefoot Solutions, we pay close attention to both the consumer experience and your brand image. Our designers excel in carrying your branding through to your app.

At the end of the day, your ecommerce app should focus on serving your customers. Some of the biggest turn-offs for users include a complicated interface and a lack of clear instructions. If your app doesn’t make it easier and more pleasant for them to shop, why would they choose it over the brick-and-mortar store, where they already know how to find what they want? If you want to ensure you’re truly meeting the needs of your target market, Barefoot Solutions can help you with market research and audience insights to determine what your customers want — and then work with you to design an app that delivers.

Consumers are hungry for convenience, and designing an effective UI/UX is one of the best ways to satisfy it.

Let’s Build Together
We would love to hear about your product or idea.
GET IN TOUCH
Related Articles
website-redesign2 Signs It’s Time for a Website Redesign
So, your website is up and running, people come to your site and get value from it... but are you really maximizing the opportunities you have? A wise person once said, “Excellence is not a destination; it is a continuous journey that never ends.” And while this quote was in relation to someone's personal life why can’t it also pertain to your company’s web presence? Taking this philosophy and applying it to your company is what will put it in the top tier.  Just because you have a functioning website does not mean that it’s the best possible website you could be giving to your visitors. Re-design will allow you to improve the way you present your information and change how visitors use and engage with your site. Below we have detailed  a few of the reasons it might be time for you to redesign your website. You aren’t getting the results you want. If you’re not getting the results you want it may be time to improve your website. A new design can allow you to create new calls to action that will allow you to better optimize your site for lead generation. Because at the end of the day that’s the end goal, right? So it's definitely beneficial to do what you can to improve your conversion rates. A few important things to take into consideration is the copy of your website:  is it too text heavy or does it not give enough details? Does it match your company's voice? What about the look- does it go with a general theme or just seem sporadic? While these all might seem like minescule factors about your website it's important to remember that all combined together they are your company's voice and online impression. Make it count. Your website doesn’t work across all platforms. If you’re anything like me you like to do majority of things from your phone and then later will check it again from your computer. We expect things to be easy across all channels and to be able to seamlessly  transition between any platform. Providing a smooth experience for your visitors is a key factor. By having a responsive design it allows your website to be easily adaptable from any screen on any device. Another key thing to take notice of is the functionality of your website. How easy is your site to use? Are your call to actions visible and easy to access? These are highly important factors that can make or break your website! The purpose of your site has changed. It's important to stay on top of your website's purpose; if it has changed then your website should reflect this change. Perhaps your marketing strategy has changed or you have decided to feature different aspects of the company altogether. Perhaps you want people to read your blog more or use your request a quote box more often. Whichever it is- keeping up to date with your site’s purpose is highly important. Another instance to be mindful of is if your company has added new services or features. If so, then your website should reflect this change otherwise your visitors will take their business elsewhere! Your third-party tools are outdated. A very important factor to pay attention is to how your third party tools are functioning. Ask yourself the questions: are these tools up to date ? Are they functioning at the highest level they could? If you answered no to either of these questions then perhaps it's time for an upgrade. Making the moves to more modern third party tools will not only appeal to your visitors but also turn them into leads. By ensuring that you are up to date with current technology you will not have to worry about your website lacking in loading times or meeting your guests with error pages! Your Sites Loading Time is …. Slow! As we’ve entered 2018 its important to note that loading speed is now a MAJOR factor. Even if we don't like to admit it, we’re impatient people who have grown accustomed to pages loading instantaneously. “People will visit a Web site less often if it is slower than a close competitor by more than 250 milliseconds (a millisecond is a thousandth of a second)” (Ny Times, 2018). Website speed and mobile speed should be  a top priority. If your website is loading slowly then it's definitely time for an upgrade.  Some of the Features or Content Don’t Display Properly Ensuring that your content displays properly is another major factor to be mindful of. As I said previously it's important to have seamless transitions between your web and mobile and the same goes for the way the content displays. You should also be mindful of the many different mobile devices your visitors may be using- there are lots of options out there! Whether they are looking from an iPhone or an Android Tablet the navigation and display should be easy to use and look the same across all channels. Compare to Competitors Another important reason to consider redesigning your website is seeing how it stacks up against the competition. By keeping up with the competition you are able to set your prices competitively, create marketing strategies, and accurately respond to rival marketing campaigns. If your top competitor is having far more success generating traffic to their site  then perhaps it's time to take a look at their site and see what they are doing differently. Now you don’t need to redesign your website every time you see your competitors making changes but staying relevant and up to date will be beneficial in the long run. I hope that you’ve found the above reasons as useful insight on whether or not to redesign your website. It’s easy to remain content with a website that’s working but as we said above: are you maximizing on the opportunities you have? If you’re not, or you felt like any of the above reasons directly related to your website, it's time to redesign! This will be an exciting time because you will be able to take a close look at your website, analyze the strategies that have worked, and improve! Remember “excellence is a continuous journey, not a destination.” Now, we are aware that redesigning your website can seem like a daunting or overwhelming task, but that's where we come in! Barefoot Solutions is more than happy to work with you to help redesign your website. Use the contact button located below and let's get redesigning!  
Read Article
push notifications A Little Push: Best Practices for Push Notifications
In the 1990s, we had the friendly “you’ve got mail!” In 2017, we have the trying-to-be-friendly push notification. Push notifications are ubiquitous in the internet experience — but most developers don’t use them effectively. Push notifications present a huge challenge for app developers. All but one industry have an opt-in push notification interaction rate of less than 60% (figure for iOS devices). The best app push notifications are those that integrate seamlessly into a user’s day, and provide more value than annoyance. If your push notifications are on the wrong end of this spectrum, you could be driving users away who are otherwise perfectly fitted for your product. Follow these best practices for designing push notifications and enhance your user’s experience, without crossing the line into nagging. When to Provide a Push The only industry with an opt-in rate above 60% is that of ride sharing apps. The reason is obvious: notifications from these apps provide a valuable, timely, and relevant update on the location of a user’s ride. The information provides instant value — all apps should strive for this. Unfortunately, most apps nag rather than inform. This is because they don’t take into consideration the three elements that should be present in all push notifications: information must be valuable, timely, and relevant. In order to successfully create timely and relevant notifications, you must align external and internal triggers. External triggers include the push notification itself — a nudge to get people to take a certain action. Internal triggers include what your user is feeling: bored, hungry, in need of a vacation, etc. Combining the two creates a useful push: i.e. timing your food delivery app to send a notification around dinnertime, when people are already thinking about their next meal. This creates the “you just read my mind” sensation that feels delightfully gratifying in the user’s experience with your brand. Creating a push notification that provides valuable user information is more challenging, but possible. Here’s an example: language learning app busuu totally redesigned the user experience around push notifications, upping its open rates by 300%. It did this by creating personalized and variable push notifications for users. This included asking users if they remembered a recently learned word or phrase. The push notification also linked users to a part of the app directly relevant to the notification. If the notification asks you a question, you can click through to a quiz that answers said question. Developers found this much more effective than simply linking back to the home screen of the app. When determining content for your push notifications, ask yourself: am I providing valuable information at a time when my user needs it? If the answer is yes, is the push notification linking users to the place where they can appropriately take that action? Push Notifications for Wearables and IoT Wearables and IoT devices benefit from the fact that people have purchased these devices to stay informed. Therefore, users are more likely to want and appreciate push notifications; still, considerations should be made to keep the experience a positive one. Since wearables and IoT devices are more deeply integrated into our lives, push notifications here must be even more seamless than mobile notifications. Aim for a simple user experience — opt for shorter, grouped notifications rather than lengthy ones — and avoid irritating users. This can mean getting creative with your notifications; for instance, have a wearable or IoT device panel that lights up softly when a new message comes in, which can be a much gentler nudge than a jingle or vibration. The practice of personalization is even more key with push notifications for wearables and IoT devices. Fitness wearables should send notifications encouraging users to continue their exercise streak, and the more personal these are to each user’s exercise preferences and routine, the more your app becomes part of their life. IoT devices can use internal data to “learn” about their owner — if a smart fridge realizes a given household goes through a lot of milk, then a notification can be specifically sent as a reminder to purchase that item regularly. Personalization enables notifications to be perceived as more friendly, helpful, and welcome; just as a coach may encourage you to jog another mile, or a family member may remind you to add milk to the grocery list. Push Notifications for Enterprise Apps Enterprise apps are developed for internal employee use, so push notifications in these devices must be personal, professional, and positive. Here are the features enterprise apps should consider: Individualized performance data: Everyone likes a confidence boost on the job. Push notifications highlighting positive performance are an excellent way to prompt an employee to open your enterprise app. It doesn’t hurt that employee recognition has been proven to create better workers. Chances are your enterprise app is already logging data on each of your employees — ask your developers to create a way to share this. Location-relevant data: Employees in Kansas City don’t want regular push notifications updating them on what’s happening in Boston, and employees on the Red Campus don’t necessarily need to know about the lunch specials at Blue Campus. Location-based push notifications offer timely and relevant updates for staff based on where they are. Every notification a user receives that appears irrelevant to his or her individual situation is a rift in the user experience. Information based on position: When developing your app, segment your employee pool by position in the company. That way, you can send relevant push notifications even across a large geographic area, based on staff position and rank — for example, a reminder of the upcoming all-manager meeting could be sent to people holding a manager title; a new sales training program notification could be directed at users with the title of “senior sales staff.” Push notifications give developers a unique opportunity to start a conversation with their user — don’t make it an annoying one. Need help crafting and implementing your app’s push notifications? Looking to improve your user experience as a whole? Reach out to our team at Barefoot Solutions, to chat about your app project. Our development team has the skills and experience to guide you in crafting a smooth and enjoyable user experience. We develop apps for both web and mobile with a focus on designing user interfaces that are beautifully simple to use, and offer true value to your consumers.
Read Article
minimalist app design Simple & Clean: The 4 Most Important Elements of Minimalist App Design
Have you noticed a change in some of your favorite apps over the past few years? Instagram’s controversial logo change; Airbnb’s swap from a photo-filled app background to plain white; Apple Music’s decision to remove almost all text and display album covers front and center. Perhaps you’ve noticed other apps you love transitioning to fewer colors, a simpler art style, more white space, or concise typography? Minimalist app design has taken over. This isn’t an accident. In a journey to deliver the best experiences to users, app companies adopt the design styles that work best for users. Minimalism isn’t just an aesthetic choice; this style delivers an exceptional user experience, which has prompted many of today’s popular apps to take the minimalist plunge. What makes for great minimalist app design? Read on to find out. 1. Color One of the key factors at play in minimalist design is color choice. In the early days, developers and designers were eager to explore photo backgrounds and palettes of multiple colors. Now, these choices make apps feel more cluttered and overwhelming than exciting. Minimalist design approaches color in two different ways: Monochromatic Color This scheme is made up of shades, tints, and tones within one hue. Various colors are created by changing the hue brightness and saturation. The result is a color palette that’s very easy on the eyes, although its main disadvantage is the lack of color for accents and highlights. This wallet app design makes great use of monochromatic color, using blue as its hue and supporting it with lighter and darker versions of the main color. [caption id="attachment_14682" align="aligncenter" width="400"] Monochromatic color scheme in finance app, Photo Source: dribble.com[/caption] Analogous Color This scheme uses three colors that sit next to each other on the color wheel, to highlight different aspects of the app. Each color, for instance, may be used to designate the level of categories. Bold colors are typically used to designate important aspects. This vitamin app design uses purple, yellow, and orange as its analogous color scheme. [caption id="attachment_14683" align="aligncenter" width="400"] Analogous color scheme in vitamin app, Photo Source: dribble.com[/caption] 2. Clear Typography The goal of typography within an app is to establish clear communication of the app’s purpose, and help users achieve that purpose. The purpose of Instagram is to post images and comment on others’ images. For Spotify, it’s searching for and playing music. Minimalist app typography focuses on using one typeface throughout. Multiple typefaces — even if used for different categories — can give your app a sloppy, disorganized feel. Instead, designers use varying sizes, styles, and weights within one typeface to create these differences while giving a cohesive feel for the app as a whole. With some exceptions, most apps focus on using the OS’s standard typeface (Noto and Roboto for Android, San Francisco for iOS) as they are simple and easy for users to read. 3. White Space Apps need to organize and divide information for easy user navigation, yet traditional divider lines are becoming less common. That’s because there’s only so much space on mobile devices. Too many lines can result in a cluttered interface. Minimalist design relies on spacing, shadows, and blocks to divide information without filling the screen up with lines. Indeed, white space is referred to as the “backbone” of minimalist app design. White space gives apps a simplified yet refined look that’s pleasing to the eye. White space also enhances the chosen typeface and colors, allowing them to stand out amid an overall minimal background. Apps like Ghani Pradita and Apple’s Timer are two fabulous examples that successfully use white space to organize information for the user. [caption id="attachment_14684" align="aligncenter" width="400"] Ghani Pradita app, Photo Source: smashfreakz.com[/caption] [caption id="attachment_14685" align="aligncenter" width="400"] Apple’s Timer app, Photo Source: smashfreakz.com[/caption] 4. Enhancement There are many ways to enhance or highlight app information with minimalist design. Some apps use bold color, or a contrasting color against a generally neutral color scheme for calls to action. These colors draw the user’s attention to important next steps (more on this in our next section). Another option is increased font size, which should only be used to spotlight your app’s most important information. Some minimalist apps get more creative to highlight important information. Shadows and elevation are great division options, apart from white space or traditional lines. Even in straightforward apps like calculators, shadows can enhance the app’s look. Blurring backgrounds is another way to focus the attention on particular menu or action. [caption id="attachment_14686" align="aligncenter" width="400"] Calculator app design, Photo Source: dribble.com[/caption] Minimalism and the Modern App Keep in mind, among all successful apps that use a minimalist design style, minimalism isn’t a goal in itself. The goal of app design remains true to its purpose for users, and minimalism is simply a tool used to achieve that purpose. Accessible design, for instance, is particularly important for people with disabilities (e.g. blindness) to access your app. One of the benefits of minimalism is that it can accommodate accessibility guidelines and create excellent experiences for everyone. Apps have been pervading mobile devices for a decade now, and we are continuing to gather feedback and learn more about creating excellent user experiences. Minimalism has popped up recently as a popular — and very effective — app design style to achieve a successful user experience. When designing your own app, don’t shy away from minimalism for fear that it may make your app look too much like others in the Apple and Google stores. Today’s hottest apps have adapted this style for very good reason; before you push away from the “trendy” design style for the sake of standing out, consider carefully whether minimalist design may deliver your users the best experience for your app’s purpose. Interested in designing a minimalist style app? Get in touch with our experienced team of developers today!
Read Article
Chat With Us
We love talking tech and business.
(619) 870-0114 [email protected]

4241 Jutland Dr., Suite 300
San Diego, CA 92117

    Name * Incorrect format
    What would you like to talk about? * Incorrect format

    This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply

    Thank You
    We’ve received your message and someone from our team will contact you soon.
    linkedin Connect with us on LinkedIn