It’s been a record-breaking several days online, and the holiday season is tracking at 14.5% growth in online sales compared to last year, according to Adobe Analytics, which tracks transactions at 80 of the top 100 retailers in the U.S. Online revenue for November was up 16.5% year-over-year, reaching $68.2 billion, Adobe Analytics reported.
Online-to-offline drivers. Meanwhile, in-store sales were off 6.2% on Black Friday according to ShopperTrak. A bright spot is “buy online, pick up in-store” (BOPIS) and curbside pick-up services. Since November 1, these online-to-offline orders have grown 43.2% year-over-year, according to Adobe. “These services are breathing new life into physical stores, and we expect growth to climb as we get closer to Christmas,” the company predicts.
Black Friday topped expectations. Retailers generated $7.49 billion in online sales on Black Friday, Adobe Analytics reported. That exceeds the company’s prediction of $7.4 billion for the day and is an increase of 19.6% over last year when consumers spent $6.22 online on Black Friday.
Looking at the impact on smaller e-commerce sites and direct-to-consumer (DTC) brands, Shopify reported the 1 million merchants on the platform generated more than $900 million on Black Friday, with sales-per-minute peaking at $1.5 million at 3:01 PM ET.
The mobile impact. Smartphone traffic has eclipsed desktop in traffic for a few years now and continues to make gains in conversion impact. Smartphones are also changing when consumers buy. “Digital buying on Black Friday was more evenly spread throughout the day, with shoppers less inclined to take a break in the mid-afternoon, thanks to the convenience of their phones,” Salesforce reported.
While Salesforce and Shopify both reported mobile sales surpassed desktop, Adobe Analytics reported desktop accounted for 60.4% or $40.3 billion in online sales in November while smartphones generated 34.5% of online sales.
Shopify merchants saw 69% of sales come from mobile and 31% from desktops on Black Friday. And Salesforce reported 60% of Thanksgiving Day online orders came from mobile. This perhaps highlights performance and consumer differences of DTC and merchants that have come up in the mobile-first era compared to more legacy retailers that have had to go through digital transformation.
Smartphones accounted for 41.2% of e-commerce revenue on Small Business Saturday, up 22.2% and higher than the overall seasonal trend, according to Adobe Analytics.
For the retailers captured by Adobe Analytics, desktop conversion rates continue to be significantly higher than on smartphones. On Black Friday, for example, desktop conversion rates were 6.9% compared to 2.9% for smartphones, Adobe Analytics reported.
Discounts and rising CPAs. The profit story may not look as rosy as the revenue picture painted in the latest reports from Adobe Analytics, Salesforce and Shopify, however. All those discounts come at a cost: Salesforce reported the average online discount was 28% on Black Friday and expects discounts to be even steeper on Cyber Monday. Salesforce data represents the activity of more than 500 million shoppers globally.
Over 45% of retailer marketing investments went to paid social over the holiday weekend, generating nearly 33% of all revenue, according to digital marketing agency PMG. That’s an increase from just 16% last year. Stiffer competition on digital advertising platforms, and social in particular, is driving up the cost-per-acquisition for many advertisers.
While many reported great revenue numbers from Facebook campaigns over the weekend, ROAS may look quite different. David Hermann, a paid social media buyer who works largely with direct-to-consumer (DTC) brands, said competition on Facebook has cut deeply into profits even as revenue appears to be growing.
Cyber Monday predictions. Today is expected to be another record-breaker at $9.37 billion in online revenue, up 18.9%, according to Adobe Analytics. That would be an increase from $7.9 billion spent online last year.
Salesforce pegs U.S. sales for Cyber Monday at $8 billion, up a more modest 15%. Globally, online sales are expected to reach $30 billion, according to Salesforce, an increase of 12%.
About The Author
Ginny Marvin is Third Door Media’s Editor-in-Chief, running the day to day editorial operations across all publications and overseeing paid media coverage. Ginny Marvin writes about paid digital advertising and analytics news and trends for Search Engine Land, Marketing Land and MarTech Today. With more than 15 years of marketing experience, Ginny has held both in-house and agency management positions. She can be found on Twitter as @ginnymarvin.
If you want to create a mobile app with a great user experience, you should always start your project with a wireframe. In this post, we share a collection of modern mobile app wireframing templates to help you get started in your design process.
When using a wireframe template, you won’t have to spend hours crafting layouts, buttons, image placeholders, and all the other elements that take hours to create from scratch. All you need to do is edit the templates and rearrange the elements to make your own app wireframe design.
We’ve handpicked some of the best mobile app wireframes you can use to design both iPhone and Android app user interfaces, all in various file formats.
High Fidelity is a massive collection of wireframing templates that includes layouts for designing Android and iOS app user interfaces.
This bundle features mobile wireframe designs in 7 different categories. You can edit and fully customize the templates using Adobe XD, Sketch, and Figma as well.
Why This Is A Top Pick
This wireframing kit is quite special. Not just because it has lots of professional layouts. Mainly because it includes layouts for both iOS and Android apps. And it also comes in multiple file formats.
Baseframe is another huge bundle of wireframe templates. This pack comes with more than 200 unique layout templates. It supports both iOS and Android mobile app designs and the templates are available in Sketch file format.
If you’re a fan of Photoshop, you can use this mobile wireframing kit to design unique app wireframes using your favorite app. It includes 150 unique templates you can easily customize using Photoshop. The UI kit is also available in Sketch and Adobe XD format as well.
Don’t let those bright pink colors confuse you. This is not a wireframe kit made just for designing feminine mobile app designs. It’s also suitable for many other app user interface designs. It includes 26 easily editable mobile layouts in Adobe XD and Photoshop formats.
Pride is a collection of minimal mobile wireframing templates featuring various user interface templates for crafting mobile app experiences. The bundle includes more than 30 unique interface designs in Photoshop PSD file format.
Another big collection of wireframe templates. This kit is designed for iOS mobile app layouts. It comes with more than 200 templates with layouts in 22 different categories. You can customize them using Adobe XD.
If you’re looking for a mobile wireframing kit with a simple design, this bundle of UI templates is for you. It includes more than 90 unique mobile app wireframe templates featuring simple and clean designs. The templates are also available in both Sketch and Illustrator file formats.
Sketchy is a bundle of creative wireframing templates for designing iOS app interfaces. It comes with 218 app interface templates that are made up of over 500 elements. The templates are available in 29 different categories.
This collection of mobile wireframing templates are fully optimized for crafting iOS 13 app interfaces. In addition to dashboard and chart wireframes, this series also includes templates for walkthroughs, settings pages, and more. Be sure to download them all.
A unique wireframing kit for designing iOS apps with dark color themes. This bundle comes with more than 100 unique app screens in 16 categories. You can download the lite version of this wireframing kit here.
Liberty is a modern wireframing kit you can use to craft trendy and stylish app designs. The bundle includes 125 app screen layouts in 9 categories. The templates are also available in Sketch and Photoshop file formats.
Another wireframe kit for designing modern mobile user interfaces. This kit comes packed with 23 different app layouts with organized layers and free fonts. The templates are available in PSD file format.
This kit if iOS app wireframes it most suitable for designing blogging and magazine app interfaces. It includes 90 screen designs that are compatible with iPhone X and iPhone 11. You can edit them using Sketch.
Turbo is a bundle of iOS wireframe templates that comes with layouts in 9 different categories. It includes a total of 100 mobile UI templates. You can easily edit and customize them to your preference using either Sketch, Illustrator, or Photoshop.
Being able to print your wireframe designs can be quite beneficial. It will allow you to show off your wireframe designs in meetings and to clients. This bundle includes 55 templates for both desktop and mobile interfaces with printable designs.
Have you ever briefly turned on your phone, glanced at it, found whatever needed to find, and then turned it back off? That’s an example of a microsession — a quick session with minimal interaction that completes a user goal.
Definition: Mobile microsessions are mobile sessions shorter than 15 seconds.
The word “microsession” follows the terminology introduced by an article by Ferreira and his colleagues, who coined the term “microusage” to refer to mobile usage that is shorter than 15 seconds. They found that a little more than 40% of the mobile usage was microusage.
While the exact time threshold may be arguable (and may vary depending on the population — for example, another study, coauthored by researchers from Stanford University and Apple, found that for elderly adults, the microsession threshold moves up to 22 seconds), it does not really matter. What matters is how to design your apps so that you can allow users to complete certain tasks quickly.
Microsessions are good for the user experience. Generally, time on task is inversely proportional with usability. Time translates in interaction cost, and low interaction cost leads to good user experience. A microsession means that users were able to reach their goal very quickly — likely, because the mobile design supported them.
Supporting Microsessions Benefits Even Apps with Complex Tasks
There are many mobile tasks that we do every day and that are so simple that they can be easily completed in a few seconds. Setting an alarm, checking whether you have any new emails, looking up the calendar for the day usually involve just a quick glance at one screen and maybe 1–2 button presses. These are most likely to result in microsessions.
However, not all tasks can be completed in 15 seconds, even with the best possible design. Researching and buying an air purifier, watching a video, reading and following instructions, composing an email to your boss are all fairly complex activities and most users will take more than 15 seconds to complete them.
But even if your app involves several convoluted steps, reducing the time to complete the task will improve the user experience. A good design will often translate into a reduced interaction cost and thus low task time. Yet, it is not enough. You can do more.
To understand why, let’s think of a user who is trying to check in for a United Airlines flight on the phone. First, the user must find the app on her phone, launch it, wait for the splash screen to load, bypass a login wall or sign in if she does not notice the Continue as guest button, then find the Check in button on the United homepage, tap it, and eventually start the login process. In other words, she has to spend a lot of time to locate an entry point into the task.
Designers can provide users with quick, outside-the-app access to the tasks that they perform the most. Doing so can save users the need to locate the entry point by themselves, and if the task is significant enough, can substantially improve the overall user experience.
Designing for Microsessions
Of course, the first worry that you should have is to design your app so that the entry points to these tasks are easily discoverable within the app and the flows are simple and easy to understand. However, you can go one step further and allow people to start these tasks (and sometimes even complete them) without launching the app. Here are 4 common ways to design for microsessions and thus accommodate external task entry points:
Notifications are the main way in which apps today support microsessions. About 60% of the microsessions in the Ferreira study involved reading or interacting with a notification.
Although notifications do provide at least one entry point to the app (tapping on the notification opens the app), in many cases their function is to update the user on a state of affairs. When a notification is well-designed, users can often get all the information they need from the text of the notification and may not need to launch the full app.
In order to design a successful, notification-based microsession, create notifications that are self-sufficient: that convey a fully formed idea and do not require the user to go elsewhere to understand what the notification is about. Text that is truncated or that does not include enough information forces people to gather additional context for the notification, and that action not only lengthens the session, but also degrades the user experience
If it’s not possible to create a notification that is entirely self-sufficient, at least give users enough context to decide if they are interested in the notification.
Make sure that tapping on the notification not only launches the corresponding app, but it takes users to the corresponding page in the app (for example, for a news story, that may be the article page). And, because most users are familiar with this functionality, it’s unnecessary to have an additional Open up in app action present in the notification.
Consider supporting the main actions that apply to the notification item within the notification itself. Doing so presents the user with the opportunity to complete the task without launching the app. For example, for a news article, an appropriate action may be to save it for further reading, whereas for an email notification, deleting the message may be a good one to support.
In some cases, consider providing entry points into typical flows that the user may take from that notification. For example, the Weather Channel’s Android app notification allows people to access weather info in different formats (Hourly, Daily, Radar).
Widgets are compressed views of the app that usually present a single piece of data that represents the state of the app. They are ideal for tracking frequently changing information (such as weather) and are typically accessed from the phone’s homescreen (on iOS, from the Search screen), if the user chooses to add the respective widget to the screen.
In iOS, widgets can also be accessed through a long press or 3D touch gesture on the app icon, even if the user has not decided to install the widget.
Widgets are helpful because they allow users to quickly inspect data from the app and track if something has changed. Like notifications, widgets should be self-contained and preferably not truncated. For example, the CNN widget should not display a truncated title; instead, a full sentence should describe the story even at the smallest widget size.
Widgets are, however, more powerful than notifications. They allow simple interactions within the widget itself. For example, the user can scroll vertically within the Gmail widgets or can tap the lateral arrows to move through news stories in the CNN widget. And sometimes widgets simply offer a list of entry points to tasks in the app (similar to quick actions below).
The key issue for widget usability is whether you can indeed identify the one thing people will want to track, and if so, whether you can compress that information into a concise unit for display in the widget. If there are several items of potential interest, s, then a collection widget that shows them may be a solution, although the same general problems arise: can you reasonably focus on those few items that your users will want to see, and will they remain useful even after being seriously compressed to fit within the widget space?
3. Quick Actions
Recent versions of iOS and Android support accessing actions within an app directly from the homescreen, through a long press or a 3D Touch gesture — essentially an implementation of a contextual menu. (Note: the 3D Touch is no longer supported on iPhones XI and it was replaced by the long press.) In iOS, the gesture can also display a widget alongside the quick actions.
The quick actions save users from having to launch the app and find the within-app entry point for the task they want to accomplish. The quick actions don’t need to include only tasks that can be microsessioned — instead, they should link to tasks that are important to your users.
There is only a limited number of quick actions that can be displayed in the quick-action contextual menu, so don’t waste the space with actions that are likely irrelevant to your users. Instead, focus on the top tasks — the tasks that are performed often by many users. For example, inviting friends to Airbnb is likely a rarely performed action, as is contributing to Google Maps — none of these actions need to be included on a quick-action list.
4. Through an Intelligent Assistant (Siri or Google Assistant)
Both iOS and Android apps can take advantage of intelligent assistants— Siri and, respectively, Google Assistant — to allow users to quickly interact with the app using voice.
In iOS, applications can provide shortcuts to Siri that enable users to perform certain frequent tasks or tasks that are appropriate at certain moments of time and in certain locations. For example, upon noticing frequent payments to a certain person, the PayPal app can suggest a shortcut that enables the user to do that action directly through Siri. While the user has to accept these shortcuts, it’s still important for the application to identify them and suggest them to the user (ideally, even within the app).
In the Android ecosystem, it’s also possible to define shortcuts, or, in Android parlance, routines. For example, one such routine can ask Google Assistant to report the Weather Channel forecast for San Francisco whenever it hears the word Weather.
Most users are not familiar with the tools available for microsession support — widgets, quick actions, Siri shortcuts, and Google Assistant routines don’t yet get widespread usage (the only notable exception is notifications). Yet, these actions can offer significant speedups for those users who know about them, and are thus an example of usability heuristic # 7: flexibility and efficiency of use. And more and more users will discover them accidentally — for example, long pressing an app has long been the gesture for rearranging apps on the screen in both iOS and Android. Because now long press also shows quick actions, people will uncover them while trying to clean up their screens, and thus they will eventually get used to them. Or, if apps advertise their Siri suggestions inside the app, users will notice them sooner or later and may take advantage of them.
Normally, if a design change or innovation will take a lot of money to implement but will only benefit a few of your users, we don’t recommend it. Its ROI is likely too low. But unlike other fringe design innovations, support for microsessions is easy to implement. Take advantage of these features in order to improve the overall user experience.
If your mobile users can quickly finish what they want to do in your app, it means that you’ve done a good job of designing it. You can save users even more time and effort by allowing them to circumvent the launching of the app through self-sufficient notifications and widgets or by providing them with external task entry points through quick actions and voice-assistant shortcuts or routines.
D. Ferreira, J. Goncalves, V. Kostakos, L. Barkhuus, and A. K. Dey. 2014. Contextual experience sampling of mobile application micro-usage. MobileHCI ’14. DOI: https://doi.org/10.1145/2628363.2628367
Athletes, sports teams and their coaches always look for ways to get better results and guarantee victory. New technologies are a great advantage for professional athletes to improve their techniques and estimate the pros and cons of the practice.
AR can become an indispensable tool that all athletes will handle to obtain real-time data on each hit, running distance, thrust, throw, jumps and more. With this information, athletes can correct their actions, change the technique and make the right decision.
AR Users Feedback
In the absence of user surveys, I took the initiative to study the various comments and views on existing users of the various store platforms to download applications from both Google Play and App Store, to identify the main pain points and challenges that users find in AR apps. The pain points that users exposed were:
Poor use of the user interface design because it caused confusion on how to use certain features
Poor reliability in measuring distances
GPS and location issues and failures
Problems to register for buttons that appear inactive
Excellent performance for one type of device and for other devices app does not work
The most recurrent pain point in all reviewed apps was confusion when using the user interface. Users felt that more instructions were needed one even had to contact support to figure out how to an app. That being said extensive research was put into user interface legibility and readability in an effort to avoid these challenges AR users have experienced in other apps
The applications which user reviews were taken into consideration for this evaluation were Strava, Jefit, Nike Run Club, Argus, Houzz Home Decor (ar), TapMeasure — AR utility, AR Civilizations, AR Fitness
User Interface Legibility for outdoor or bright lights
daylight readability assumes negative contrast polarity will degrade readability.
This information lays a crucial role in the development of the user interface hence users will be using the app in varying lighting. This is why UI efforts will focus on contrast. The more contrast the more visible in varying light. Earthy, pastel and desaturated colors are to be avoided. The color palette will focus on bold, saturated, complementary colors to maximize contrast.
Readability and typefaces in AR
Although no conclusive research can prove if san serif or serif fonts are more legible between each other recent studies have proven many sans font are legible but not readable. Much of it has to do with the letter shapes themselves. Monotype and MIT AgeLab conducted a study that found that the style of a sans-serif typeface can affect how long a driver’s eyes fixate on a dashboard screen and off the road while driving. The study tested humanist and grotesque typeface styles against each other and found that humanist typefaces were significantly quicker and easier for drivers to read.
“There was a 12% difference in average glance time, which represents approximately 50 feet in the distance when traveling at U.S. highway speed.”
The research has shown that the glance time difference between the two sans-serif typeface styles is too great to ignore. Hence the preferred font for increased readability in order to enhance the overall user experience within an Augmented Reality app is a humanist sans font.
UX Audit — App testing
Since there is an existing app to test I like to conduct a UX audit. Where I create a document outlining a usability inspection and the recommendations from UX best practices. The existing design was not visually appealing and lacked the fundamentals of user experience design and user interface design for augmented experiences. There were many areas to improve from a visual standpoint as well as a usability point areas such as:
AR objects should engage with and reflect their environment. Using shadow planes, reflection, lighting, and textures help emphasize the objects in place making use of realism.
Identifying how far away a cone was difficult even though they included distance markers. In AR experience, it is best to create depth by properly using shadow planes, occlusion, and perspective. It would help to place larger objects closer to the user and smaller objects further away to define depth.
Just about all the controls in this app are buttons. Avoid on-screen control under all means in AR experiences. Content selection, scaling and rotation should all be done through gestures. Example multi-touch gestures:
Rotation — support both 1-finger and 2-finger gestures
Scaling — Pinch to scale
Not all was terrible focusing on usability the app did 2 aspects very well.
Nchworm encouraged movement which is a key element that is often overlooked when designing for AR the app clearly reminded users they can move around through guided steps. It also places objects cleverly encouraging them to move toward it.
The app effectively shows users how to find a surface using their phones. It used illustrations to show users how to scan properly and gave instant feedback to show the surface was detected.
From idea to MVP and 10 000 registered users. The total valuation of products on Merkato’s marketplace exceeded 1 000 000 PLN.
From idea to MVP and 10 000 registered users. The total valuation of products on Merkato’s marketplace exceeded 1 000 000 PLN.
From creating MVP to more than 12 500 registered users. From 0 to total valuation of products on Mercato’s marketplace exceeding 1 000 000 PLN.
The Idea was born. You’ve probably experienced it before…
It’s quite uncommon for 3 people to come up with the same idea in the same week but that actually happened, and I’m going to tell you the story of how it started.
Few phone calls, few chats, we were pumped! You know how it goes, you probably experienced it before.
You think about an idea and you are really excited about it….you get the dopamine & endorfines flowing in your blood stream when you talk about it with your friends and they share the same vision….coincidence? I don’t think so! 😉
You are waking up the next day and the idea is still there and it still sounds reasonable. Ok, let’s do it!
“With Great Power Comes Great Responsibility…” – Ben Parker, the Spiderman
Each of us have expertise in our field. The combination of our skills made us self-sufficient and the project sustainable in the long run.
Strategic decisions were made always together and each of us had freedom & their own responsibilities in their own area.
On the high level approach we had the same vision & drive for the project.
Research, do your homework first!
“Give me six hours to chop down a tree and I will spend the first four sharpening the axe” ― Abraham Lincoln
We conducted research to better understand and learn more about the filed. We collected a lot of data – extracted insights and benchmarks. We were taking deep dives into this subject from the angle of each field (business, technology, design)
From the high level perspective, during that stage we found answers for following questions:
For whom we are solving the problem? (Target audience)
How big is the problem we are trying to solve? (Market)
Are there other products that are already solving it? (Competition)
if so…..how are they solving the problem? (Products)
Many findings from this stage were added to the presentation that was created months later.
Few slides from the presentation
The bird’s-eye view of the solution – the backstory
Personally I’m a sci-fi fan. In the “Eva” (2011) movie, Daniel Brüh is playing a genius which was employed by his former university to design AI for robots. There is a scene when he is at home in his workshop.
He has this really cool tool to design AI.
Think about it as a Lego bricks visual programming language fully interactive holograms gesture UI.
In an instant he is able to zoom out and see the bird’s eye perspective of his project.
And zoom in to see the smallest tiniest details…
He can see how different systems are working together. Everything is interactive & interconnected. He can change each module, he can play with it the way he likes.
I wrote this long introduction because user story mapping for me is what this design tool is for the main character from the “Eva” movie.
Sure it’s a little different, two-dimensional and not so interactive and high-tech. Instead of holograms there are sticky notes and instead of gesture UI there are pens and pencils 😉 but it’s just a great tool to envision new ideas and explore their dynamics.
PS. If you are working on an interactive hologram version, please contact me right away! I am your perfect early adopter 😉
Clarifying the idea – User story mapping
I always see value in doing user story mapping.
It’s build from the user perspective. Every feature, every interaction is built on top of the user journey.
It helps everybody get on the same page. It fosters discussions and helps to get the same understanding about high level features & every little detail.
It’s great for MVP & Lean development. Based on it you can craft your first release, first version of your idea. It’s a reference during every and each of your next iteration.
It’s great for most projects. Personally I believe it’s useful 90% of the time. It’s a design tool that you can use whether you are creating a new app or planning your 1 month of traveling through Indonesia.
Below you can see the user story map of our app.
All user stories – User story map of our app.
MVP – The way we crafted first release
“If You’re Not Embarrassed By The First Version Of Your Product, You’ve Launched Too Late” ― Reid Hoffman
We distilled the experience down to the core functionality – core value proposition.
Releasing something into the world (in the early stage) is always exciting and a little scary at the same time.
However it is the best way to test assumptions and get early feedback.
We got four 1-star reviews on Google Play. Below you can see one of them.
Screenshot of the review from Google Play console
Those four reviews were a little painful but it was something we knew could have happened and it was fair. In MVP version you could add only one photo of your item (no ability to add title, description, category or more photos) so people had to send messages to each other and ask about everything – it’s understandable why they were upset.
There is no such thing as “bad feedback” and to be honest we were kind of happy that somebody cared enough to let us know what’s the most important for them.
Also, we had already prioritize the features that were mentioned in the review to be built in the next releases – those reviews were another thing that confirmed our roadmap.
During the first release we were able to get answers for many questions, here are just a few of them:
Cost of acquisition from Facebook & Google Adwords (CPC, CPI, CP added products)
Conversion rate on app install from Google Play & App Store
Conversion rate on registration in the app (Continue with Facebook)
Engagement inside the app (% of active users who visit item, add item, send message)
After the first release, we learned that this idea about the app can actually work.
Each new release – Lean development
“If you can’t measure it, you can’t manage it” ― Peter Drucker
We were crafting each release having in mind the value that we are bringing to our users.
Hypothesis – Assumptions – The way we are going to measure it. Learn – Build – Measure loop.
We weren’t able to conduct an A/B test at that stage but because we were doing it step by step we were able to double check each feature and make data informed decisions.
We were tracking our core KPI’s and with each new release we were adding events to track new features. After a while we started learning from the data we had been collecting.
First few releases were focused on the core functionality, mostly on the basic features with high value for users (add titles, prices, categories, visit other user profile etc) after that we were using RICE method to prioritize each release.
Below you can see what was shipped in the first six sprints.
First six sprints of development
3 pillars of user experience
Based on a research, competitive analysis and our gut, we wanted to focus on those 3 core elements right from the get go:
Flow of adding items for sale
1st – Flow of adding items for sale
For users – adding products, something that takes a long time on other platforms we wanted to be as fast as taking a photo.
For the platform – it’s the answer to the question “what came first the chicken or the egg” in the case of building a marketplace from scratch.
Also on the Polish market there are many products solving that problem but none of them are mobile only. It’s not only about the platform – it’s about how we believe this problem will be solved 5 years from now.
Win – win. For users & for the platform.
There was one major insight about adding/posting products for sale online. It was something that came up at interviews and was also seen in the reviews of our competitors online – Posting items for sale is time consuming.
Based on some interviews it takes about 10-40 minutes to post your item/items. This is how it looks like:
You have to find the item you would like to sell (often it’s at the bottom of your closet)
Sometimes (depending on the item) you have to clean it first to make it look good on photos.
You are ready to go online & create your listing. On most of the services in Poland it’s obligatory to fill in all fields, like: add Title, Description, Category (sometimes there are more things depending on the category) and at least one photo.
So as you can see it’s time consuming.
Also, based on our data 63% of people are adding 2 or more items to sell.
If you have more than 1 item for sale – you have to block even more time from your day to post all those products.
That’s why most of the time selling your unused stuff is tagged in your mind as “I will do it this weekend”. We wanted to change that perception. Eliminate unnecessary steps & brake the flow into small chunks – You don’t have to do it all at once.
Don’t wait for a weekend – it’s so fast you can do it now!
There is a good piece of advice from James Clear “Atomic Habits” book that can be applied here. The author is writing about taking small and incremental steps towards building a habit. He advises “make it easy for yourself” – even though that sounds obvious it’s not used so often. If you want to build the habit of drinking water always after waking up, just put the bottle next to your bed. Boom!….you just hugely increased your conversion to drink water after you open your eyes.
The same goes with adding your products for sale.
The most important step (the one that is moving the needle) should be the easiest one. Just open the app and take a photo. You take the photo & and your listing is live for sale – your chances of selling the product hugely increases.
Want to increase your chances even more?
Share it with your friends (you just increased your chances by 20%)
Add more photos (15% increase)
Add the title & description (10% increase).
All those things can be done later. The most important step is already made. Your listing is live for sale.
Easy way to enter the flow
Add an item button. This is the most important action in the app. CTA is highly visible and easily accessible from every main screen in the app.
Number of steps in the flow
The balance between number of added listings & the number of high quality listings (many great photos, well described item) is the most important.
Add listing selected screens
Below you can see some of the selected screens from Add listing flow. (awesome illustrations by icons 8)
2nd – Fostering trust between users
2nd – Fostering trust between users
If you think about it, trust has always been and still is the biggest currency in trade.
The most effective way to foster trust from the beginning was to use Facebook as a way to verify users. Facebook is the most popular social media platform in Poland and we were already using it to drive traffic to our app.
Fast and easy registration (Continue with Facebook CTA)
Legit users & their profiles (real photos, real names)
Possible lower % of spam and abuses from the beginning
Main elements to establish and foster trust:
Verified by Facebook sign in Profiles
Real names of the sellers and buyers
Large photos of sellers and buyers
Ability for instant contact
3rd – Product presentation
Right from the beginning we wanted to focus on an advantage that we had because we were creating a mobile platform. I’m talking about product presentation and the difference between vertical and horizontal listing photos.
All platforms of our competitors in Poland are designed in a way that product is presented horizontally (on the feed & on the listing detail.)
When you think about it, back then in 2006 when they were designing the platforms it made perfect sense – there was only desktop traffic. On January 9, 2007 the first Iphone was officially announced.
Since then mobile phones became more popular. Therefore mobile apps were created to take advantage of more and more traffic coming from mobile devices – but the framework stayed the same. They were designed having a horizontal photo presentation as a default. Once again it made perfect sense because their main traffic still was coming from desktop.
But the dynamic was changing, one mobile user at the time…Now in 2019 the mobile is huge and there is no going back.
Because we were creating a mobile platform we wanted to use that dynamic to our advantage.
Home screen – difference between horizontal and vertical.
Product detail – difference between horizontal and vertical.
Mobile conversions growing but less valuable. But while mobile conversions grew a significant 10 points from 2018 to 2019 (39% to 49%), the majority of conversions still come from the desktop. AccuraCast said, “overall, desktop visitors convert 60% more than mobile visitors, and conversions from a desktop device are worth 93% more than mobile conversions, on average. (For B2C companies, conversion value was calculated as the average order value, and for B2B it was calculated as the lead value and propensity to buy.)”
Historically AOV for desktop transactions has been higher than on mobile devices. This is backed up by multiple other studies and reports. As a generalization, consumers browse on mobile devices and tend to buy on the desktop — although that is changing.
A year’s worth of data analyzed. The firm looked at mobile and desktop ad clicks between August 2018 and and August 2019. Mobile impressions, clicks and conversions (e-commerce or lead capture) grew during the 12-month period.
“Install App” ads — which ask mobile website users to install the site’s application on their mobile device — are quite common on mobile e-commerce sites, with 53% of sites during testing displaying one.
Indeed, it’s entirely understandable that e-commerce sites that have apps would want to promote them while users are on their website.
Yet our newest round of large-scale mobile e-commerce usability testing reveals severe and disruptive issues caused by these “Install App” ads. These include:
“Install App” blocking the view for critical site content (e.g., blocking an “Add to Cart” button),
“Install App” appearing multiple times even after users have dismissed it, or
“Install App” narrowing the viewport when users choose to ignore it, leaving them with a reduced view of the main page content.
These issues make it clear that having an ad for “Install App” has a high cost in terms of causing an often severe negative impact on users’ product-browsing and -purchasing experience on the mobile website. During our testing “Install App” banners were the direct and sole cause of several abandonments of some of the world’s largest e-commerce websites.
In this article, we’ll discuss the test findings from our latest mobile usability study related to “Install App” ads. In particular, we’ll discuss:
Severe usability issues caused by “Install App” ads
3 ways issues caused by “Install App” ads can be minimized
Carefully weigh the benefits vs. drawbacks to showing ‘Install App’ ads
Observed Issues Caused by ‘Install App’
It’s a bit of a disaster now, it’s not very straightforward. I can’t see where it says ‘Add to Cart’. A subject at Sephora, who had already decided that she wanted to add a lipstick to the cart, was unable to do so. She scrolled the product page multiple times, scanning for an “Add to Cart” button, then went to the cart and assumed she had to sign in to add the product to the cart. This was a stopping point for her, and only after the facilitator asked her to close the “Install App” ad did she see the “Add to Cart” button. Such a severe block to users’ ability to make a product-purchase decision will be a direct cause of site abandonments.
In testing, the most severe outcome of having the “Install App” ad displayed was when it covered critical site elements — for example, the “Add to Cart” button. As one user said, “‘Add to Basket’ was underneath the little flash pop-up thing. Yeah, that’s stupid [laughs]. That annoyed me.”
With the “Install App” ad displayed, some users won’t be able to add products to their cart without first dismissing the ad — which testing revealed not all users will think to do. Consequently, in some cases the “Install App” ad will be a direct cause of abandonments.
“I don’t know how to get out of this…Oh there”. A user at Under Armour was viewing images of shoes in an image gallery overlay. When she was finished she wanted to return to the product page but couldn’t figure out how to exit the overlay. She first tried tapping the page behind the overlay but nothing happened (first image). Stumped, she wasn’t sure what to do, before she finally noticed and closed the “Install App” ad, which revealed a “Back” link to exit the overlay (second image).
At Under Armour, the “Install App” ad blocks critical product filters (“Gender” and “Category”; first image) until another user dismisses the ad (second image).
“Is there a way I can find it for “Men” and not “Youth”? None of them are clickable. It doesn’t seem like I’ve got size options. There should be something underneath “Size” that I can click…I don’t know what to do.” A different user at Under Armour never thinks to dismiss the “Install App” ad — consequently, he never discovers the filters for “Gender” and “Category”, which were required selections in order to see “Size” filters. He ended up with an overly broad product list that was difficult to navigate.
At B&H Photo, the “Install App” ad covers the “Done” button to apply filters. This user initially exited the filter interface and was confused when his filter changes weren’t applied. He reentered the filter interface, dismissed the app ad, then noticed the “Done” button to apply his filtering choices.
Covering the “Add to Cart” button is obviously a severe issue, but other instances of the “Install App” ad covering crucial content were uncovered as well during testing. For example, the “Install App” ad covering buttons or links needed to exit interfaces or apply selections (such as filters).
These instances, while less severe than when the “Install App” ad covers the “Add to Cart” button, are also quite disruptive for users, as they begin to feel lost and no longer in control of the interface.
Furthermore, some users will never think to dismiss the ad and, consequently, will never find whatever the ad is covering (e.g., crucial filter types). Other users may go back-and-forth between different interfaces as they try to figure out why their selections aren’t being applied (e.g., when the “Install App” ad is covering the “Done” button in filtering interfaces), before finally thinking to dismiss the ad.
Indeed, the “Install App” ad is, for many users, an example of “banner blindness”, where despite its prominence it is ignored. Users missing banner ads for promoted products is one thing, but missing crucial site elements and features because an “Install App” ad is covering them is a much more harmful case of banner blindness.
At Overstock a custom “Install App” ad, combined with a tracking privacy notice, severely limits the actual page content a user is able to see (despite using a tall iPhone XS). Even when “Install App” ads aren’t covering crucial site content they limit a user’s viewport — and therefore hinder the product-browsing experience.
In addition to covering site content, “Install App” ads were also observed in testing to severely limit users’ ability to view main page content.
On mobile, screen real estate is already at a premium, and small viewports are simply a fact of life.
However, making the effective viewport even smaller by showing an “Install App” ad — which, again, not all users will actually dismiss right away — makes it even more difficult to browse and evaluate products. This is especially true when the app ads are combined with privacy notices and other nonproduct-related content, which combined may reduce a user’s ability to see actual page content by 50% or more.
Additionally, it’s worth noting that issues were caused in testing both by the native “Smart App Banners” and custom-designed “Install App” banners.
Now, an obvious solution to the issues caused by the “Install App” ad is not to display one at all to users. In fact, 47% of sites during testing didn’t show an “Install App” ad when users were browsing the sites.
If opting not to display the “Install App” ad at all on the site due to potential usability issues, consider other, less-distracting ways the app can be promoted to users. For example, displaying the ad only on the order confirmation page (after users have placed an order) or including links in marketing emails and newsletters.
Adopting a more subtle approach may allow sites to straddle the line between disrupting users and promoting their app: ensuring that users are allowed to browse free of issues caused by the “Install App” ad while satisfying business interests to promote the app to users.
Three Ways to Minimize Issues Caused by ‘Install App’
While we advise great caution before using “Install App” ads, if it’s deemed that the business case is sufficient for disrupting website users with “Install App” ads then consider the following 3 implementation details, which we observed can greatly impact the cost / benefit ratio.
1) Incentivize users to install the app. While showing an overlay immediately on page load is disruptive, at least Amazon offers users an incentive to download their app.
1) Incentivize users to install the app. If the business case is strong enough to accept losing some mobile website users due to the “Install App” ad, then consider at least incentivizing users to download the app from the site. Offering users “10% off your first order” or “Get $10 to use after installing the app” may get more users to actually install the app on their device, and therefore may offset to some extent the users lost due to usability issues caused by the “Install App” ad on the website.
2) Don’t permanently display the ad. At Walmart an “Install App” ad persists despite this user having been on Walmart for several minutes. This is disruptive to the product-browsing experience. Additionally, it’s likely that few users will decide to download an app when they’re already minutes into their browsing on the mobile website.
2) Don’t permanently display the ad. If an “Install App” ad must be displayed, it should be removed once users have navigated to a new page on the site or have been on the same page for a certain amount of time. Once users have been on the site awhile, or have navigated to new pages, the benefit of showing the “Install App” ad decreases, while the potential to distract users is constant or increases.
As mentioned above, “Install App” ads were observed during testing to suffer from banner blindness, where some users simply ignored them. For these users, the end result will be that they’ll have a much more limited view of the main site content for the duration of their time on the site, if the ad is permanently displayed. Furthermore, these users will potentially never see some critical site elements that are hidden by the “Install App” ad.
3) Show the ad only on certain pages. At Amazon, the “Install App” ad was automatically removed once this user moved from the homepage (first image) to viewing search results (second image) — greatly reducing how potentially distracting the ad is to users.
3) Show the ad only on certain pages. Showing the ad only on certain pages — for example, only on the homepage — also will limit the damage to users’ browsing experience by removing the ad from potentially problematic areas (e.g., product lists, product pages, or search results).
Additionally, limiting where the ad is shown will allow potential issues that the ad may be causing to be better monitored (e.g., overlaying important site elements or content). Conversely, displaying the ad universally throughout the site makes it nearly impossible to control adverse effects that are caused by the ad.
Carefully Weigh the Benefits vs. Drawbacks to Showing ‘Install App’ Ads
The “Install App” ad partially covers the “Added to Cart” overlay for another user at Under Armour.
Sites that choose to display “Install App” ads are clearly hoping users will download the app and then use it on their mobile device to make purchases, rather than going to the mobile website. The reasoning likely is that users using the app are likely to be more frequent and loyal customers.
However, as illustrated above, displaying an “Install App” ad to users isn’t a “freebie” and, depending on the implementation, will either directly or indirectly lead to mobile website abandonments (e.g., if users are unable to find the “Add to Cart” button or if it’s more difficult to find products using filters).
Sites should weigh these costs carefully against the benefit of having a minority of users actually install the app on their device, and then also use it instead of the website.
If “Install App” ads must be displayed to users, then be sure to minimize the disruption for users, by:
1) users are incentivized to download the app,
2) ads are temporary, and
3) ads are only displayed on a select few pages
This article presents the research findings from just 1 of the 690 UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” mobile e-commerce user experience.
Authored by Edward Scott. Published on August 20, 2019.
React developers can get the advantages of Ionic to build hybrid mobile apps and progressive web apps. In this tutorial, we’ll be using Ionic and React to build a mobile app from scratch.
Ionic has recently added support for React; so now, React developers can get the advantages of Ionic to build hybrid mobile apps and progressive web apps (PWAs). In this post, we’ll show you how to get started using Ionic with React by building a simple demo app from scratch.
In order to properly follow this tutorial, you’ll need the following prerequisites:
recent versions of Node.js and npm installed on your system,
working knowledge of TypeScript and React.
You can check that you have the latest Node.js version (v10) installed by running the following command:
$ node -v
Introducing React And Ionic
Let’s start with brief introductions to both React and Ionic.
React focuses on building UIs and doesn’t provide any built-in tools for the common tasks required in web development, such as fetching remote data and routing, so you’ll need to use some existing third-party libraries for these tasks.
“Ionic Framework is the free, open-source mobile UI toolkit for developing high-quality cross-platform apps for native iOS, Android, and the web — all from a single codebase.”
In this tutorial, we’ll see and use some Ionic UI components such as the following:
IonMenu: With this, a navigation drawer will slide in from the side of the current view.
IonToolbar: These top bars are positioned above or below the content.
IonHeader: This parent component holds the toolbar component.
IonContent: This component provides a content area, with methods to control the scrollable area and other things. You need only one content component inside a single view.
IonList: This component contains items with similar data content, such as images and text. It’s made up of IonItem objects.
IonItem: This component may contain text, icons, avatars, images, inputs and any other native or custom element.
IonButton: This component provides a clickable element, which can be used in a form or anywhere that needs simple, standard button functionality.
Installing Ionic CLI v5
Ionic’s command line interface (CLI), version 5, has support for creating Ionic projects based on React. So, let’s get started by installing the tool from npm.
Open a CLI, and run the following command:
$ npm install -g ionic
At the time of writing, Ionic’s CLI v5.2.3 is the latest.
Note: *According to how you installed Node.js in your system, you may need to add sudo before your command in macOS or Linux or run the command prompt as administrator in Windows if you get any permission errors. You can also simply fix your npm permissions or use a tool such as nvm.*
Next, install Cordova Resources (which is used to generate Cordova resources locally) and Native Run (used to deploy app binaries to devices):
$ npm install -g cordova-res native-run
These are required only if you want to test your application on a real mobile device or emulator.
Creating An Ionic And React Project
Now, let’s create a project based on React. Go back to your terminal, make sure you are in your working directory, and run the following command:
$ ionic start myApp --type=react
We use --type=react to generate a project based on React. You’ll next need to choose a starter template from the available ones. Let’s pick sidemenu for a starter template with a side menu and navigation.
After generating the project and installing the dependencies, you can serve your app locally using the following commands:
$ cd ./myApp
$ ionic serve
Your app will be available from the http://localhost:8100 address, and you can actually use your web browser to start playing with it.
Ionic is called a hybrid mobile framework because it makes use of web technologies that were originally designed to create web apps, along with a native container (Cordova or Capacitor), to build mobile apps without using native technologies for the target platforms, such as Java or Kotlin for Android or Swift for iOS.
Because your mobile app is actually a web application, you can do most development by testing in a web browser without using an emulator or a real mobile device, except for testing native device features such as the camera or the SQLite storage, in case you’ve used them in your app. In fact, it’s even possible to use certain techniques to mimic the plugins that provide the native features and do the entire testing during development in your web browser.
Cleaning Our Project
We have the app’s basic structure, with two pages (home and list) and a menu. Let’s remove the list page since it’s just boilerplate code.
First, remove the src/pages/List.tsx file, then open the src/App.tsx file, and remove the entry for the list page from the appPages array:
Ionic provides some default colors (primary, secondary, tertiary, success, warning, danger, light, medium and dark) that can be used to change the color of UI components. A color can be applied to an Ionic component in order to change the default colors using the color attribute. See “Colors” for more information.
These colors have default values, but you can customize them via some predefined CSS variables. See “Modifying Colors“.
This is a screenshot of our menu:
Next, let’s change the color of the Home page. Open the src/pages/Home.tsx file, and set the color attribute of the IonToolbar and IonContent components to primary:
We’ll see how to install Axios and consume a third-party RESTful API in our application, and we’ll also see how to display the fetched data using Ionic card and list components.
Having themed our application, let’s now see how to fetch data using Axios. We’ll use the third-party API available from NewsAPI.org.
First, we need to grab an API key, so that we can communicate with the API. Go to the registration page, enter your information, and register an account. You’ll be given an API key; note it, and let’s continue.
Head back to your terminal, and run the following command to install Axios:
$ npm install axios --save
Next, open the src/pages/Home.tsx file, and start by importing Axios and IonButton:
} from '@ionic/react';
import axios from 'axios';
Next, define the API_KEY and URL constant variables:
In our function component, we first call the useState() hook of React to create the articles state variable, which will hold the news articles after we fetch them from the API.
useState() returns the state variable, which has the empty array as its initial value and a function that we can use to change the value of the variable. We use destructuring assignment to unpack the values from the returned pair into distinct variables (i.e. articles and setArticles()).
Next, we call the useEffect() hook to perform a side effect in our component. In our case, the side effect is to fetch data from the news API using the fetchArticles() method, which returns a promise. Once the promise is resolved, we call the setArticles() method to assign the news data to the articles variable.
Both useState() and useEffect() are built-in React hooks that were introduced in React 16.8; they simply let you use state and other React features without having to write a class. The useEffect() hook is equivalent to calling the componentDidMount, componentDidUpdate and componentWillUnmount lifecycle methods combined in class-based components.
Finally, in the view template, we iterate over the articles array using the map() method, and we display the title of each news article inside an IonItem element of the IonList component, and also a button that takes us to the page of the full article.
In this tutorial, we have started using both Ionic and React and used them to build a simple mobile application that fetches and displays news data from a third-party API using the Axios client. We have also seen how to use hooks in React — namely, the useState() and useEffect() hooks — to create state and perform side effects inside React function components. With Ionic, we’ve seen how easy it is to generate a project based on React and how we can theme the application using the color attributes of components.