Orago : Organic Products on the go!
Prototyping | Mobile and Watch Interface Design
Description
Orago is an E-commerce application where users can purchase organic goods on the go and access them through pick-up or delivery. It enables users to select their preferences regarding the food they order, and allergies, set up their weekly budget, and curate a suggestion according to that all while accessing many stores to find the best fit for their needs.
Platform
Mobile and Watch App
Timeline
Jan 2023 - Mar 2023
Tools
Axure and Figma
Team
3
Problem Statement
In a fast-paced world, accessing organic products that align with individual preferences, dietary restrictions, and budget constraints remains challenging. Existing solutions lack the seamless integration needed for efficient shopping on the go.
This creates frustration for users seeking healthy options while accommodating their busy lifestyles.
Design Process
IMG
Product Features
By addressing the challenges identified in the problem statement, these four key product features of "Orago" aim to revolutionize the organic grocery shopping experience for users providing a convenient, personalized, and budget-conscious solution.
Budget-Oriented Shopping:
Orago app sets weekly organic grocery budget & suggests the best products within price range based on user preferences, aiding informed choices within financial limits.
Favorites and Likes:
Users can easily mark products as favorites or like them for future reference.
This feature simplifies reordering and enables users to keep track of products they enjoy.
Personalized Product Recommendations:
Orago's smartwatch and app recommend personalized organic products based on user preferences and dietary needs. It analyzes past orders and user input for tailored suggestions, ensuring a curated shopping experience.
Location-based Pick-up and Delivery:
Orago enhances convenience by utilizing the user's current location to suggest pick-up points for their orders.
This helps users save time and money by integrating grocery shopping seamlessly into their daily routines.
User Personas
By crafting detailed user personas like Maya and Harold, the "Orago" development team gains deeper insights into their target audience's needs, preferences, and pain points. This, in turn, informs the creation of features that effectively address the challenges faced by individuals like Maya and Harold, enhancing the overall user experience of the platform.
MAYA:
College student (ages 18-30), new to the country, working part-time, single
Tech-oriented, familiar with smartwatches/phones/connected devices
Interested in organic products, healthy lifestyle, conscious of environmental footprint
Short on time/always on the go, no time in their school schedule to have a dedicated grocery trip during the week
Has a specific budget, needs products that match their lifestyle and price points
HAROLD:
Family-oriented, married, stay-at-home dad (ages 48-60)
Not familiar with technology.
Prefers to use the mobile application, not too familiar with technologies.
Focuses on a healthy diet, is buying multiple people in their family, and needs to accommodate many restrictions and allergies while shopping.
Needs to be able to pick up groceries in between his kids’ busy schedules.
Scenarios
Orago revolutionizes organic shopping. Users like Maya personalize their preferences, set budgets, and receive tailored organic suggestions. The app offers easy store comparison, allergy alerts, and flexible delivery. Real-time tracking, feedback loops, and continuous learning create a seamless, user-centric organic shopping experience.
Moodboard
Organic foods and products inspired our mood board. We pulled images that used natural colors and created a palette heavily featuring greens, yellows, and other earth tones. We also looked for inspiration in wearable technologies and designs incorporating healthy eating and similar technology.
Design #1: Lo-fi Prototype
Design Charettes
Design #1: Mid-fi Prototype
Usability Testing
1.1 Remote Testing Plan - 3 Tasks
After designing our mid-fi prototype, we conducted user tests with four participants over Zoom, testing our three tasks.
Have the user set their budget, location, and dietary preferences.
Have the user search for a specific product (Vanilla Almond Milk) and add it to their cart.
Have the user simulate picking up their order.
We took notes on our three tasks as our users interacted with the first design of our mid-fi prototype. The images below are from Participant 2.
Check our successes/failures in completing the tasks and more specific notes.
1.2 Remote Testing Notes - 3 Tasks
Task 1: Set Preferences
Task 2: Add to Cart
Task 3: Pay
Findings from Usability Testing
Task Completion Table
Above is our task completion table, accounting for each user's success in completing the task to our expectations. Task 1 had an 87.50% success rate, Task 2 had only a 35.50% success rate (and had the most design issues), and Task 3 had a 75% success rate.
Key Findings
Add a back button for users to be able to navigate forward and backward.
Create separate flows for phone and watch interactions Preferences.
Add clearer copy for pick-up vs delivery Shopping.
Fix the cart icon to relay if there are items in the cart.
To highlight prices more.
Take the user to the cart screen after adding an item to the cart or notify if an item is added.
Quantity purchasing (weight, etc).
Notify if items are out of stock.
Design #2
We were able to bridge the gap between our present and new designs thanks to the results of our usability tests. We decided to start by focusing on our design flows for our application while keeping both mobile and smartwatch synchronization in mind, at this point, we realized that not all designs and flows would be suggested for wristwatches, only the crucial screens, to keep it user-friendly. We then discussed our style guides to maintain the design's uniformity and cleanliness.
Style Guide
User Flow
Hi-Fi Prototype
Mobile Version
Smartphone Version
Key Takeaways
We would like to gather feedback from a larger audience to improve our design. We would like to conduct more usability testing to see what areas of our design flow and hi-fi prototype could confuse users.
During our mid-fi process, we developed 8-10 screens and were able to test with several users. After the usability testing, we used the feedback and findings to develop additional screens and improve our pre-existing screens to improve the overall experience.
Our Hifi prototype concluded with 5+ additional screens including search history, smartwatch pairing transition, and notification as we believed it was important to focus on mobile device to smartwatch transition, where some users were confused during the usability testing process.