OrderEasy – Mobile App
Overview
The application aims to help small store owners gain more customers by enabling them to place orders and sell their products via mobile medium. It enables their customers to buy products in their brick-and-mortar store from anywhere and at any time.
Problem Statement
Small shop owners rely on walk-in customers. During times like pandemic situation many people shift to online mode of shopping. Small store owners who entirely rely on direct customers needed a mode of quickly setting up their store online so their regular customers can continue to buy without any hassle.
Goal: To improve look and feel of the app, increase affordances on interface components, alignment fixes and minor usability improvements.
Users and audience
Customers of small shop owners who have experience buying products online or using mobile devices.
Roles and responsibilities
My role was to enhance the look and feel of the interface screens. Do a quick expert usability review and fix issues such as alignments, improve readability, color theming, affordances, etc.
Scope and constraints
Since this mobile application was more of a bonus or add on business booster to a larger POS package, budget to improve this was very low. Expectations were only at improving the aesthetic design or look and feel aspects of the interface screens. Timeline for deliverables was 3 days.
Process
Research & Strategy
The current screen designs were captured using a mobile device. Content in each screen were observed and a quick mental model of what users tried to do in each screen was understood.
A mood board was developed to help get inspiration and a point of reference to meet the look and feel transformation.
Design
I started re defining the design at the pixel level at an early stage since time was short and a quick change was expected. Following are set of screen transformations and description on what aspects were enhanced.
Before - Main Screen
After - Main Screen
Improvements
- Typography – labels were using different colors and different font sizes. They were prioritized based on information type. Larger for product name and smaller for its meta data.
- White space optimization.
- Stock available information which was given in green was changed to show only when a product gets added to the cart. It has been associated right below the quantity manipulator buttons as these two are relevant.
- Maximum Retail Price (MRP) and offer price were shown in two different colors. They were reduced to use a single red color. The offer price was shown using a tag or badge like component and a strikethrough style was applied on the MRP thats shown right above without a tag. Again these two were grouped as they were relevant to each other.
- Discount tag which was displayed in the top left corner in each card was given a new attracting style.
- When a product gets added to the cart, users start to see a different gradient background appearance for the card to acknowledge the same and to distinguish from normal cards.
- Affordance for the cards have been increased by adding a darker background behind them and a drop shadow instead of a single outline stroke.
Before - Cart Screen
After - Cart Screen
Improvements
- Typography – Consistent style as used in the main screen was followed.
- Product image sizes were optimized and increased to the maximum view port area.
- Savings and available stock information were both in green. Available stock information was moved to associate with the quantity manipulators and savings data is shown in green below the red price tag.
- Price tag and quantity being the significant data here, they are highlighted behind a solid fill.
- Law of proximity was used to associate labels and the data in Payment Details section. Labels were right aligned and its data was positioned immediately next to it so users need not find it difficult to match between rows.
- Final amount to be paid is shown in a very large size as it is a crucial decision maker before proceeding to checkout.
- Checkout button and its label has been enlarged to increase accessibility.
Before - About Screen
After - About Screen
Improvements
- Typography – Font size for the store description was standardized. This increased readability.
- Section headings were given more weightage.
- Contact number was mentioned as part of the description. While this was useful information, quick action buttons such as Call, WhatsApp and Locate were added below that would open the respective apps automatically on tapping. Users need not remember the number and retype them in the phone app. Reducing memory load for the users here.
User Testing
No major testing were done for this project as time was short, but at the end there was enough time to do some ad hoc usability testing in the wild.
Outcomes
The transformed hi fidelity screens were share with selected real customers and overall feedback was positive and encouraging. Users said they liked the new design when compared with the existing one and commented that there is definitely a better appeal to the look and feel of the app.