Saving the world one app at a time…
Technology has the ability to can push us towards a safer, cleaner, more liveable planet. All it requires is human will and ethical handling.
Our client needed a centralised system where all the distributors can move to a digital environment and save paper. An eco-friendly initiative, fully supported by emediscene, we set out to develop an application that can help stockists and distributors to view and access their products and request for order of specific product(s). All items were to be arranged categorically, industry-wise, and cross-referenced. Their product portfolio included more than 30,000 products. However, the important fact for us to be focusing on was that the app was to be designed for product distributors, stockists, wholesalers, and semi-wholesalers — a group of least tech-savvy individuals.
User Experience design for Pharmaceutical industry has its challenges. For one, the products are designed especially for those who are considered the least tech-savvy individuals in the industry — the quintessential sales representative. Yet when it comes to matters of money, I believe every individual has the capacity to learn what needs to be learned. The aesthetics of design may not register in the face of such parties. However, the best designs are invisible, unnoticeable to the user.
We have encountered many such projects. We, at emediscene, design visual aids for sales reps to use during doctor visits, develop apps that help gain feedback on projects and services provided, develop content for ease of access to the healthcare professionals to gain knowledge and update themselves, and many others. However, this one request by a client was both unique and educational.
The company wanted to digitise their inventory, providing complete product information to the users through play store and app store moving beyond print support. They already had a design in place, perhaps an internal attempt; however, it was hardly up to the mark. There were several issues with accessibility and aesthetics. From our end, it was a complete overhaul of the app.
First, we analysed the mindset of a normal user — a stockist or a wholesale products’ distributor — in India is a semi-literate individual adept in supply chain management and logistic support engaging a vast network of retailers within their city. Their awareness is primarily focused on net margins and availability of stock. With limited understanding of sciences and medical field, they engage in this highly crucial business of making products available to the retailer.
A brief user persona was created to understand user motivations and learning curve. What was discovered was the following:
Average age of decision makers: 45–55 years;
Family: Coming from a long-line of business-people, possibly in the medical field;
Education level: Bachelor’s degree / College dropouts;
Key motivators: Profitability;
Technology usage: Smartphone owners;
Any more information seemed irrelevant to our product. Most decision makers own a smartphone; however, their level of usage vary greatly when compared to that of the largest user base in India (under 25 age group). While our youngsters have found innumerable ways to connect and engage with a smart phone, our average user is a utilitarian. The apps frequently used are WhatsApp or other messenger services. Everything else is handled via phone calls. Most business is conducted via messaging, phone calls, or email. Other than that, some users engage with social media and entertainment networks.
Based on the user persona, it was imperative that we prepare an application that was simple in appearance and clear in language. Our average user came under 6% of smartphone users in the country. It was safe to assume that our average user had a very shallow learning curve.
Design & Development
After research, the next phase was to prepare information architecture for client feedback and further comments. The next few days were spent wisely on information architecture and control flow. How the products were to be categorically placed and referenced was the primary challenge. Our close association with stakeholders helped overcome this task within a few days. We received extensive documentation regarding the products, their respective industries and applications. All products were categorically placed and cross-referenced (wherever required). With the information architecture and navigation flows in place, we could begin wireframing.
Work for the wireframing phase didn’t take much time from our end; however, it took the longest for getting approvals. Our initial approach via rough wireframes was conveyed to the stakeholders. Various departments within the client organization needed to approve and further the design. Since medical and pharmaceutical industry is of critical nature, the content and design needed to be approved through various levels of management — marketing, legal, medical, operations, et al.
The first screen included the two main categories — broadly bifurcated by their Applications and Industry. In most cases, within each category was a sub-category, and in some cases the sub-categories had further sub categories. Once users select product(s), they can send a request by email, short messages, or WhatsApp.
Search functionality was also made available for users unwilling to explore the app. It would save time and money, which was a key motivator for our average user. The navigation flow was monitored and indicated using breadcrumbs installed on top of the screen (just below the search bar), so the user can keep track of their progress and not get confused. It took some time, but the designs were approved with minor edits.
The initial design phase quickly moved on to the high-fidelity prototyping phase. Keeping the design simple and yet usable was the goal. Login screen was neat, and instructions were easily readable. Inside, the text was kept white on black to gain the most clarity, and white background kept the design neat. Light grey outlines and copy would keep the users in a relaxed state when faced with complex designs. The menu screen was also kept grey to indicate the product catalogue without overwhelming the user.
Each category or sub category was designed as a large button with an icon and text. For users with shallow learning curves it is always best to accompany text with icon or employ only test for navigation. All icons were custom created for this app with extensive assistance from the stakeholders. Unmistakably recognizable icons were used for home and menu, however, something that every smart phone or web user is aware of these days. Clean chevrons icons indicated key buttons for forwards, backwards, upwards, and downwards accessibility.
Rasayan app assists users to access information of products that are manufactured and marketed under their two brand names. Ergo, the colour scheme used are primarily their brand colours.
The high-fidelity prototype was designed and prepared in Adobe XD and shared with the client. Adobe XD is a tool specifically designed for producing web and mobile app designs and prototypes. For those who have never worked on Adobe XD, think of it as Sketch + Flinto/InVision App.
The interface is easy to understand for those coming from Photoshop or Illustrator. All screens are designed as artboards and all items are layered in their respective artboards. You can design for mobile, tablet/iPad, or website. Several UI kits are also available for beginners.
Unlike Photoshop or Illustrator, the toolkit available is limited, but enough for designing for the web. You can preview the artboards or share them with the team for collaboration or feedback. All other properties and features such as alignment, placement, and appearance are the same as in Photoshop or Illustrator.
One unique and quite useful feature in Adobe XD is the repeat grid. For creating different categories, we employed this feature. For example, we create one button for a category with an icon and corresponding name. Select the button and click on Repeat Grid button on the right properties bar. Immediately, the button is surrounded by a green dotted box with two indicators to the right and bottom. Dragging any of these indicators to the right or bottom will create copies of the same button as many as we need, neatly ordered and placed with proper margins. Once our copies are created in a proper grid, we can edit each button according to our need by clicking Ungroup Grid button on the right (in place of Repeat Grid).
Another useful feature is creating a symbol. This is particularly useful when you have repeating elements in the design. Let’s suppose you have a button that is employed is all screens with an icon and corresponding name. After designing the thirtieth app screen, the client wants a different icon or a different name to the button. Changing the name or icon on all the buttons in each of the 30 screens is quite tedious. Instead, convert the button into a symbol during the beginning of the design. And copy them into other screens. Now you have 30 symbols as buttons instead of elements. Changing just one button (as symbol) will change all of them in the 30 screens.
Learn more about Adobe XD here.
Build the app on the PhoneGap desktop as you would in a browser environment. Once the app is ready, PhoneGap uploads it on to a server and gives us the address. Enter the server address on the PhoneGap mobile app and your app can be tested on mobile. Check out Adobe PhoneGap here.
After basic testing, the app was launched on both Google Play Store and Apple App Store. User feedback has been positive. Almost all of the stockists and distributors have been transitioned on this app. Without much training, it can be used for checking products and placing orders. For those who have yet to access technology to its full potential, they were happy to find an app that can ease their workload.
Rasayan app provides complete product information to our average user, compelling them to move beyond print support and thereby supporting an eco-friendly initiative.