Great UX
Hello, Amigos! Vadim Kononenko and Stanislav Dmitriev, project managers at the Amiga product development agency, are on the line. They have collected in one article the trends and solutions that should be taken into account when developing pharmacy applications and e-com in general.
Preface
We are currently working on a project for a major pharmacy chain, one of the TOP-3 in Moscow. Unfortunately, we cannot disclose the names due to NDA. We downloaded and tested the apps of 8 of the largest pharmacy chains to approach the design based on market research and trends. This review will allow you to gain a deep understanding of current trends in the e-com market and highlight key aspects that will be important for the successful development of a mobile application.
Pharmacy App Market in Figures
Our systems analyst joined in to conduct the research, we identified 8 favorites for analysis: the Stolichki pharmacy chain, 36.6, Asna, Yuteka, Gorzdrav, Rigla, Zdravsiti and Eapteka.
We used the following sources: Google play, App market, Yandex, Google search results.
Currently, we are witnessing a gradual shift in priorities from websites to mobile applications. For most large e-commerce sellers, having their own mobile application is becoming a critical competitive advantage, as well as a convenient way to communicate and collect feedback from customers.
Currently, 65% of medicine sellers in Russia have a mobile application.
Comparison of the Mobile Development Solution Stack. Pros and Cons
There are currently 3 main approaches to writing mobile applications on the market:
Native
This means that development is carried out separately for Android and IOS devices, and a separate design is drawn for each platform.
Pros:
Flexibility and adaptability of UX. Native application development provides faster interaction with mobile device functions: photos, notifications, phone book, geolocation, microphone. Users can be sure that each control element will be in a standard form in the place where they are used to seeing them. All this makes the user experience convenient.
Store positions. Device integration, high performance, and good user experience are the reasons why native apps often rank higher in search results on the App Store and Google Play than cross-platform ones.
Security: Native applications provide a higher level of security because they have access to system resources and can use the operating system's built-in security features.
Cons:
Large development budget. Programmers spend more time to develop several versions of the code. And designers need to adapt the design to the platforms in accordance with the guidelines of each. Therefore, the price and implementation time increase.
Speed of delivering value to the end user. Companies always face a choice: to create a version for one of the platforms or to create several versions of the code so as not to miss users with other devices and potential revenue.
Synchronization of development teams. Work on two applications must be constantly synchronized, otherwise it will be more difficult to analyze data obtained from different versions of assemblies.
Cross-platform
This means that development is carried out for both platforms at once, and the design is common. Frankly, we like this approach the most. Flutter development is our specialty, see the cases at the link.
Pros:
Timeframe and cost. Cross-platform development is cheaper than native development because it requires creating one version of the design and code. This allows you to avoid involving developers for several platforms, save time, and bring the application to market faster.
Fast updates. All changes in product versions are made simultaneously, there is no need to make them for different versions of each platform. And with cross-platform development, it is cheaper to fix errors and add new functionality.
Accessibility: Cross-platform applications can be used by people with different devices, regardless of the OS. This allows you to expand the circle of potential customers and users.
Consistency in design. Cross-platform development with Flutter allows you to maintain a consistent interface design across all platforms. This helps reduce cognitive load because users can open the app on a new device and quickly understand it, and the team won’t get confused with different design options.
Cons:
Flexibility. Cross-platform applications solve business problems on all platforms, but sometimes do not allow you to use all the capabilities of these platforms to the maximum.
UI limitations. Sometimes designers have to spend more time to maintain the familiar look, layout of interface elements and create a user-friendly design that will fit all platforms.
Store release speed. The Apple App Store and Google Play Store have different rules for publishing applications. Cross-platform solution checks and tests may take longer.
Large weight. The specificity of the cross-platform approach implies an increase in the volume of code, which makes the program less convenient for downloading and storing on the device.
PWA, React Native and other pseudo mobile applications
PWA — are web applications with an extended user interface, which makes them similar to mobile ones. Unlike traditional mobile software, PWAs do not need to be installed, as they run in a browser. At the same time, users can put their shortcuts on the desktop, receive notifications, and also run applications offline, without a connection. Such applications have reduced functionality, they are slower than native code, and their interfaces are limited to browsers. At the moment, both of these methods are rarely used in business application development. At best, they are suitable for testing MVPs.
React Native — is an open source mobile app development platform created by Facebook [запрещен на территории России]. It is used to develop applications for Android, iOS and Windows.
It is important to understand that the choice between cross-platform and native development depends on the specific requirements of the project, its target audience, budget and time frame.
Of the apps we surveyed, 25% were built on Flutter.
Best & bad practices of pharmacy apps
Pharmacies Stolichki
Strengths:
Weaknesses:
Scattered grids and blocks make the catalog unreadable.
It is not clear which products the “Add to cart” buttons refer to due to their close proximity to different products.
Advertising banners prepared for the web version are unreadable and ineffective in the mobile application.
Various shades of green that disrupt the uniform corporate style.
Different styles of icons, their uneven alignment and jumping buttons.
Too many blocks of information on the product page, making it difficult to find the price and add to cart button.
36.6
Strengths:
Weaknesses:
The application design is outdated, the interface is overloaded with elements that distract from the user's primary task.
Ambiguity and confusion in the use of colours makes it difficult to focus attention.
Uneven blocks, unaligned icons and illegible text.
Price shading, product page design requires additional elaboration of nuances, indents, alignments.
ASNA
Strengths:
Weaknesses:
Heterogeneity of blocks and distances between them, dirty shadows and unreadable banners. Insufficient clarity of the hierarchy of blocks and information.
Difficult orientation and unclear functionality of some elements, for example, the block with the selected pharmacy address, pinned at the top (see image below).
Poor presentation of products on the product detail page with small images and unclear pricing, which hinders perception.
Yuteka
Strengths:
Weaknesses:
A pile of unreadable text and blocks on the main page, causing difficulties when choosing a product.
Poor color combination, making some categories almost invisible against the gray background.
Not the most pleasing visual experience, although key features like price and add to cart button are immediately visible.
City Health Department
Strengths:
Visually appealing application with unique style.
Great product page. Clearly highlighted product cards on the main screen.
Weaknesses:
Inconsistency in styles and color schemes.
Lack of hierarchy due to the uniform green color for different blocks, making it difficult to understand the importance of information.
Unreadable texts due to multiple texts on the same backgrounds.
Rigla
Strengths:
A minimalist app with bright accent colors.
Highlight product cards and buttons with accent colors.
Weaknesses:
Ineffective advertising and compositional problems that interfere with understanding of the content.
Some layout issues, such as sagging texts in buttons.
ZdravCity
Strengths:
Unique icons and application style, easily recognizable among other pharmacies.
The advertisement is made in Digital Format and does not create a clutter of objects on the screen.
Weaknesses:
Some issues with the color composition, such as the filter sorting and discounts being heavily highlighted, which is confusing.
Small size and poor cutting of some elements.
E-pharmacy
Strengths:
Attractive design using gradient background and product cards with nice curves.
Good balance of buttons and icons, easy to perceive information.
Weaknesses:
Not always the best use of accent color and some compositional issues.
Imperfections in the size of some elements.
Our case (NDA)
When developing an application for the customer, we tried to combine the strengths of competitors' and leaders' applications among e-com and avoid their shortcomings.
It was important for the client to review the color palette of the current application so that the main colors were white and red, since the offline pharmacies of the chain are designed in these colors.
Design concept
We combined our research and the customer's preferences to create a design concept that would be compatible with offline stores.
We chose a shade of red that wasn't too bright and aggressive, and created an optimal balance in the app's palette by adding additional pastel colors.
The logo was placed prominently on the first screen so that users would immediately understand that this application belongs to a certain company.
Much attention was paid to the space of the main page and the sequence of blocks on it. This helped to ensure better visibility of products and increased usability of the application for users.
In developing the product listing design, we maintained a balance between the number of product cards displayed on the screen and vertical indents. The client asked to achieve a layout that would fully fit at least four product cards on the screen. We proposed a compromise solution that would fit the optimal amount of content and retain vertical freedom.
Most products can be added to the cart directly from the listing or search. For more complex products, there are detailed pages. In order not to search the catalog for the required dosage of the drug or color (relevant for toothbrushes), this information is presented on the detailed page of the combined product card.
We also added labels for product dimensions, such as the number of tablets or milliliters in a package. The choice between characteristics occurs without reloading the page.
We took into account the limited space on the product card and found optimal solutions for displaying information.
Navigation
The user's main path is the search, which appears immediately on the main screen and is pinned to the top of pages related to the catalog.
The “Cart” appears above the toolbar as soon as the first product is added. It is always in the user's field of view, which allows monitoring the order price. Today, most applications have the “Cart” in the toolbar, we also considered this option, but based on the results of the study conducted together with the client, we chose to implement it above it.
We made a separate implementation so that the loyalty card of an authorized user would load without the Internet, and the buyer could use it under any circumstances.
The main target audience of the application is older, so our task is to make their interaction as easy as possible. For this purpose, we have allocated a “Support” section in the toolbar, where you can get an answer to any question in a convenient format in two clicks.
If a person is used to receiving goods at a specific pharmacy, he can select it in the application header, and it will be saved by default. The catalog will show availability and immediately display the goods that can be picked up today and the next day.
Tips on what to pay attention to when developing a mobile application for e-com
Currently, minimalist design, bright accents, ease of use and ease of perception of information are in trend.
Inspiration can be drawn from successful apps with well-thought-out design and UX, such as those of large tech companies, popular delivery services or mobile banks. It is important to adapt the best practices of such apps to your own product, taking into account the specifics of the industry and the needs of the audience.
When developing an application, it is necessary:
Pay attention to the organization of blocks and information to improve readability and usability.
Create a unified style and color scheme to achieve a unified visual perception.
Emphasize important elements and information so that users can navigate easily.
Think through the arrangement of elements and use space wisely to create a more attractive and functional interface.
Consider legal restrictions on the sale of certain medications.
Specify the shelf life of the drugs.
Inform about delivery times and when the order can be picked up.
Stop factors for users:
Unclear or confusing interface.
Low readability of text or inconvenient arrangement of elements. This is especially relevant for applications where the target audience is older people.
Lack of emphasis on important elements or information.
Many of the analyzed factors can be taken into account when working with other subject areas. Use it and write in the comments, was it useful?
