Step 05 / 11

Exploration

40+ Wireframes

We use wireframes to focus on user flows and core functionality, ensuring the design meets user needs. They help us collaborate effectively, catch 80% of usability issues before launch, and create a more seamless experience. All without getting lost in the visuals.

Wireframe phone in green: the Generate meal screen with the filter chips Price, Free Delivery and Favorite Restaurant, 28 Matches found, a hatched Meal details card and the pager 1/28

Scroll

After the wireframes

Once the structure was set, every designer kept exploring on a Figma page of their own, a pixel box. Concepts, rules, motion and notes sit side by side on each canvas. Three of them are open below.

Hadeel’s pixel box Archives · home · Ordering meal · Investor · Email Template · Registration · Lottie Walk in Donia’s pixel box LottieFile · Needs approval · Designing · Screens notes Walk in Samer’s pixel box IA-MVP V2- Ite.3 · 💡NOTE · SWOT Analysis · Userflow Walk in

Hadeel’s pixel box

Description

This is user’s plan screen
Users get to set their meals count and the app will automatically count the calories and nutritional values amount to every meal.

When users order a meal to a meal type the order will be saved and logged in the meal type card

Problem

UI problem 1: In the dinner card users haven’t yet ordered or logged in a meal.
There are too many clickable elements: the card, button and hyperlink.

How can we reduce it without changing the content?

UI problem 2: how can we design the goal tracker above in more of a statistical way?

Point at a problem to see where it sits on the screen.

My plan screen, version A: Hello Sara!, 78 kg / 77 Kg / 5 Days, Today’s meals 1700 kcal with Breakfast and Lunch cards and a Dinner card offering ‘Log in meal’ or ‘Generate meal’ — My plan · version A

My plan screen, version B: the same meals plus a ‘Today’s activates 400 kcal’ block with calories burned, steps count and a Pilates workout — My plan · version B

Simplified plan screen A: stat icons above Today’s meals; Breakfast card with Protein, Carbs and Fats; a Dinner card with a plus button instead of the link and button

Simplified plan screen B: the same layout with the stats on light tiles

If user wants to view what the breakfast contents were, they can click on view more. Either bottom sheet will appear to showcase details or new page opens.

option 2 … option 6

Five frames try the goal tracker (UI problem 2) and the Generate meal entry.

Goal tracker option: Meal icons with ‘1700 kcal · 500 kcal left’ and a Generate meal button — 1/5 Meal icons with ‘1700 kcal · 500 kcal left’ and a Generate meal button

Goal tracker option: A large ‘500 Kcal left’ gauge on top, 1200/1700 kcal — 2/5 A large ‘500 Kcal left’ gauge on top, 1200/1700 kcal

Goal tracker option: The gauge moves under the stats, into Meals Today — 3/5 The gauge moves under the stats, into Meals Today

Goal tracker option: Gauge card: ‘500/1800 Kcal left’ with the stats inside — 4/5 Gauge card: ‘500/1800 Kcal left’ with the stats inside

Goal tracker option: ‘500/1800’ as a progress bar, then Meal Tracker — 5/5 ‘500/1800’ as a progress bar, then Meal Tracker

Revamp

Before: ‘You are all set up!’ with 1700 calories, a green weekly bar chart from Today to Week 4, ‘Just in 4 weeks you will lose 2 kg’, a This week plan table and a Done button

You are all set up! You’re all set up

Before → revamp

Same plan, new summary.

Drag the handle. Both screens split the day the same way:

Breakfast400 kcal
Lunch600 kcal
Dinner400 kcal
Snack200 kcal
Meals1700 kcal

The bar chart and plain table became a goal-weight card and a breakdown with an icon per meal.

home

Four home frames side by side. They differ in how the daily goal sits at the top.

Home variant “home”: Same stats row; the Dinner tile highlighted — home Same stats row; the Dinner tile highlighted

Home variant “home”: ‘Today, 22 Aug’ switcher and a ‘420 kcal Calories Left’ card — home ‘Today, 22 Aug’ switcher and a ‘420 kcal Calories Left’ card

Home variant “home”: A ‘Goals’ card: 78 kg · Lose 0.5 kg · 7 Days — home A ‘Goals’ card: 78 kg · Lose 0.5 kg · 7 Days

Ordering meal

🚗 Order Flow🛒 Adding to cart📍 Track Order📦 Order Received🗒️ Log meal - Dinner🗒️ Log meal - Breakfast🗺️ Address / Edit address / add address☺️ Profile

Clicking on item will open bottom sheet about the item

1Allergy info

2Name of meal + description

3Price

4This Meal Might Cause allergy

5Nutritional Value

6Remove ingredients

7Add ons

8Request message for the restaurant

9Meal Number

10🛒 Add to cart

A schematic of the meal bottom sheet. Tap the ingredients and the add-on to try the two rules.

1
Allergy infoIf meal contains allergy / is allergy free (this info is placed at the top of screen)
2
Name of meal + description
3
Price
4
This Meal Might Cause allergyThis Meal Might Cause allergyIf allergies are found in meal, Restaurant is required to list them, using the food allergens list from Saudi Food & Drug AuthorityCereals containing glutenCrustaceansEggsFishPeanutsNutsMilk (lactose)MustardSesameMolluscaLupinusSoyaSulphur Dioxide (Sulfites) ≥10 ppmCelery
5
Nutritional Value
6
Remove ingredientsAny box selected (avocado) will be removed from mealRemove Ingredients — Default state · When user opens bottom / User selects what items to remove (🥑 Avocado, 🥬 Lettuce)
7
Add onsWith price range next each add on. Every time user adds something from list eg. Eggs this will cause 8 SAR to be added to entire price.
8
Request message for the restaurant
9
Meal Number
10
CTA Button to add meal

📍 Track Order

Five stages, from the order to the door.

🛒 Cart, checkout and payment

Cart items
Nutritional Value summary
Promo Code
Adding notes
Payment Summary
No promo code
Adding promo code
Clicking on checkout
Map Location
Payment Method
Cash on delivery
Pay with apple
Choosing payment method
Adding new card
Add address details 🏢

🗒️ Log meal

If meal has been already filled, Calorie count with how many calories the user has input will be showcased, and user can also add to it
Empty and no calorie count yet
Empty states
All filled, but user can still log meal

☺️ Profile

Personal Details
Dietary needs & preferences
Activity levels
Cards and payment methods

Investor

Two home screens for an investor version, each in English and in Arabic, mirrored right to left.

Drag a handle to wipe from one language to the other.

Services home in English: green header, 848 points, ‘Earn Points as You Stay Fit!’, search and 3D tiles for Gym Membership, Shops, Nutritionist, Coaches, Food Delivery and All Services — Services home

Services home in Arabic, mirrored right to left, with the same tiles — Services home

Food home in English: Hello Sara!, 78 kg, Lose 0.5 kg, 7 Days, Today’s meals ⚡1,700 kcal left and Order again — Food home

Food home in Arabic, mirrored right to left — Food home

Same words, both directions

Earn Points as You Stay Fit!اكسب النقاط و انت تحافظ على لياقتك!
Gym Membershipالاشتراك في النادي
Shopsالمتاجر
Nutritionistأخصائي التغذية
Coachesالمدربون
Food Deliveryتوصيل الطعام
All Servicesجميع الخدمات
Hello Sara!مرحبا سارة!
Today’s mealsوجبات اليوم
Order againاطلب مرة أخرى

Investor section: the four phone screens side by side

Email Template

The account-verification email in the So’rah voice: a long and a short version, plus a plain-text fallback.

Version 1

Welcome To So’rah

Hey [User’s Name],

So’rah is where healthy choices are just a click away! We're excited to help you discover delicious, nutritious meals that fit your lifestyle. Before you start exploring, please verify your email to unlock the full potential of So’rah.

Click the button below to verify your email

Verify Your Email

Or copy and paste link to your browser:

This email was sent to name@email.com. Don’t want any more emails from So’rah? Unsubscribe.

Questions or FAQ? Contact us at faq@so’rah.com

Street Name, Saudi Arabia
© 2024 So’rah

Version 2 · short

Welcome To So’rah

Where healthy choices are just a click away! We're excited to help you discover delicious, nutritious meals that fit your lifestyle. Before you start exploring, please verify your email to unlock the full experience and begin ordering your healthy favorites with ease.

Verify Your Email

Plain-text draft

Hey [User’s Name],

Click the link below to verify your account:
[Verify My Account]

If the link isn’t clickable, you can copy and paste this URL into your browser:
[Verification URL]


If you encounter any issues or have questions, our support team is here to help. Simply reply to this email or reach out to us at [Support Email or Phone Number].

Welcome aboard!

Sincerely,
So’rah

Registration · sticky notes

Sticky note 1

We will be using the Harris-Benedict equation to calculate the Basal Metabolic Rate (BMR) of our users. This will serve as the foundation for determining their daily caloric needs. The BMR will be adjusted according to the user's activity level to estimate their Total Daily Energy Expenditure (TDEE).
Equation to Use:
For Men: BMR = 88.362 + (13.397 × weight in kg) + (4.799 × height in cm) − (5.677 × age in years)
For Women: BMR = 447.593 + (9.247 × weight in kg) + (3.098 × height in cm) − (4.330 × age in years)

Activity Level Selection:
After calculating the BMR, the user will select their activity level from the following options:
Sedentary: BMR × 1.2
Lightly active: BMR × 1.375
Moderately active: BMR × 1.55
Very active: BMR × 1.725
Super active: BMR × 1.9

Sticky note 2

To lose 0.2 kg per week: Subtract 200-300 calories from user’s TDEE.
To lose 0.5 kg per week: Subtract 500 calories from user’s TDEE.
To lose 0.8 kg per week: Subtract 700-800 calories from user’s TDEE.
To lose 1 kg per week: Subtract 1000 calories from user’s TDEE.
To gain 0.2 kg per week: Add 200-300 calories to user’s TDEE.
To gain 0.5 kg per week: Add 500 calories to user’s TDEE.

The notes, running

How the daily target is worked out

Every number below comes from the two sticky notes. The example inputs are the values on Hadeel’s set-up screens.

Equation

Age in years Height in cm Weight in kg

Activity level · TDEE

Weekly goal · adjustment to TDEE

BMR–

TDEE–

Daily target–

Allergy pop-up

Do you have any food allergies?
Dairy (Lactose) · Eggs · Gluten (Wheat) · Other (please specify)
Ok / Clear

Note

When user selects dietary preferences the app will first recommend matching restaurant or meals then all options.
Buttons are sticky.

Play This To view animation

Live Activity · rebuilt

Arriving in 5 mins

Your order is arriving soon

Hadeel’s comps: two live-activity cards, the rider at the start and at the end of the track, burger and drink sprites, and the three states Arriving in 5 mins, Arriving in 1 mins, Your Order has arrived — Comps: the track, the sprites and the three text states

Loading screen

“Lottie file is lagging which causes animation to be very slow, I’ve tried to download it in multiple ways, even used another computer”

“This is the component and how the animation is supposed to be”

Donia’s pixel box

LottieFile

9-Day Streak Achieved! 🚀

💪 Let’s aim for the 10th day and set a new personal record!

Frame by frame

Donia drew the flame in 25 frames, from a spark to the full 🔥.

Scroll, drag the slider or pick a frame. The frames are the ones on her canvas, numbered 21 to 45.

Home screen with a bottom sheet holding the streak animation component — “here is the component”

Bottom sheet ‘9-Day Streak Achieved!’ with a small flame and a Claim Reward button — “here is the GIF”

Add these solutions:

Filters
Steps tool tip
Provide lo-fi prototype

Needs approval

Home empty state waiting for approval: Hello Ahmad!, Deliver to Khalda street, 78 kg, Lose 0.5 kg, 7 Days, Today’s meals ⚡1,700 kcal left, a 3D food-category row (Pizza, Burgers, Pasta, Desserts, Salads) and Order again

One frame, “home empty state”, parked for sign-off. New here: a row of 3D food categories under the search.

Designing

Drafts for the restaurant side: a web dashboard worked out row by row.

The finished dashboard is in The product

Dashboard
Menu
Orders
Payments
Deals & Ads

Screens · notes

Time Format:

If the time range uses the same AM/PM marker, write it only once: 10:30–11:30 AM but if it’s different 12:00 AM–1:00 PM

Try the rule

From To

10:30–11:30 AM

Same AM/PM marker, so it is written once.

Notes in Arabic, with translations

هدول هديل عدلتهم
“Hadeel edited these”
next to Orders
هل في اكتر من بنك؟ وهل بقدر يغير بينهم؟
“Is there more than one bank? And can he switch between them?”
next to Payments
يوزر انترفيو
“user interview”
next to Sales and Reporting

Note on the canvas

top selling items
total sales chart
total orders chart
orders request: all/done/pending/cancel

Samer’s pixel box

IA-MVP V2- Ite.3

Two copies of the same information architecture. In the second, Samer drew what would be nice to have in pink.

19 pink items on the board. Switch to the MVP to see what stays.

navigation bar

Notificationsnice to have
Home
- Name
- Strength Score | Strength Balancenice to have
- Calendarnice to have
- steps today
- target body goal
- Age
- edit
- Location
- Category
  - Offers
  - best selling
  - meal type(breakfast...)
  - diet type
- Filter
  - Offers *discount *free delivery *buy one get one free
  - Restaurants
  - dishes
  - diet type
  - cuisines
  - price range
  - Ratingnice to have
  - Macros: Calories, Protein, Carbs, Fatnice to have
  - Ingredientsnice to have
- Sort by
  - recommended
  - top rated
  - delivery time
  - cost low to high-high to low
  - most popular
- Favorite restaurants
- popular restaurants
- restaurants nearby
- Today’s Meals
- Lessonsnice to have
- +nice to have
  - Strength Workout
  - Freestyle Workout
  - Cardio
  - Body Fat
  - Progress photo
Search
- Search
- Filter
  - Offers *discount *free delivery *buy one get one free
  - Restaurants
  - dishes
  - diet type
  - cuisines
  - price range
- category
  - cuisines
- Recent searches
- Popular searches
Progressnice to have
- Chart
- Journey
- Rewards
My orders
- Order details
  - restaurant name
  - meal name and photo
  - micros
  - delivery time
  - bill
- these two options will display if the order is active
  - Order tracking
  - Cancel order
- Fitness Goal: Lose Weight Gain Muscle | Maintain Weightnice to have
- Dietary Plan: Balanced | Vegetarian | Low Carb | High Proteinnice to have
profile
- Activitynice to have
- personal information
  - picture
  - Name
  - Bio
  - mobile
  - birth date
  - health data
  - Location
- Setting
  - Privacy policy
  - About us
  - Terms and conditions
  - Dark mode
  - FAQ
  - Arabic language
  - Social media accounts
  - Calendarnice to have
  - Progress chartsnice to have
  - 1-on-1 Coachingnice to have
  - Refer friendsnice to have
    - Gift your friends 7 days free trial!
  - Progress Photo Gallerynice to have
  - Subscription Infonice to have
Plansnice to have
- Workouts
  - Workout Library
  - Default Plan
    - Workout 1: Legs & Abs
    - Workout 2:
    - Workout 3:
    - Workout 4:
    - Workout 5:
  - All Plans
    - Create New
    - Browse Library
- Nutrition
  - AI or Nutrition Wizard
    - Answer a few questions and get custom calorie and macro targets.
  - Manual Targets
    - Enter your own calorie, protein, fat, and carbohydrate targets.
  - Premium
    - Get Pro Coaching
    - Learn more
- Recommended plan for you

“I've highlighted "Nice to have" items in pink for easy identification. Unfortunately, I'm unable to make direct edits to the document above, but please feel free to incorporate any additional important elements you identify. Thank you for your cooperation!”

“Creating a similar application to the market won't guarantee success. We must consider adding unique features not found in other apps to stand out.”

💡NOTE

The MVP scope, written next to the IA.

1
User AuthenticationAllow users to sign up and log in securely. Implement basic authentication functionalities like password reset, email verification, etc.
2
DashboardDesign a simple, intuitive dashboard where users can view their personal information and tracked data. Include options to customize the dashboard layout based on user preferences.
3
Calorie TrackingDevelop a feature to track daily calorie intake. Users should be able to add, edit, and delete meals with calorie information. Provide basic analytics such as daily, weekly, and monthly calorie consumption summaries.
4
Exercise TrackingAllow users to log their daily physical activities and exercises. Include common exercises with pre-set calorie expenditure values or allow users to input custom exercises. Display exercise history and statistics to track progress over time.
5
Weight TrackingEnable users to track their weight over time. Provide graphs or charts to visualize weight fluctuations and progress.
6
Profile SettingsAllow users to manage their profile settings, including personal information, goals, and preferences. Provide options to set weight loss/gain goals, activity levels, and dietary preferences.
7
Mobile ResponsivenessEnsure the application is responsive and accessible across various devices, including desktops, tablets, and mobile phones.
8
Feedback MechanismImplement a feedback mechanism to gather user input and suggestions for future improvements. Include a contact form or feedback button within the app for users to submit their comments and queries.
9
Basic ReportingGenerate basic reports summarizing users' calorie intake, exercise, and weight data. Offer export options for users to download their data for further analysis.
+
Performance OptimizationOptimize the application for performance and scalability to ensure smooth user experience, especially during peak usage times.

SWOT Analysis

Samer’s SWOT, then a problem, a solution and a goal.

Strengths

Established Market Presence: The company is already operating within the meal delivery industry, indicating existing brand recognition and customer base.
Customizable Solutions: The solution involves implementing tailored strategies to enhance website/APP engagement, demonstrating flexibility and adaptability.
Analytical Insights: Access to data on user traffic, visit duration, and page views provides valuable insights for informed decision-making.
Diverse Marketing Channels: The opportunity to diversify marketing efforts allows for reaching a wider audience and targeting specific regions and demographics effectively.

Weaknesses

Inconsistent Website/APP Engagement: The meal delivery industry faces challenges with varying levels of website/APP engagement, including high bounce rates and low page views per visit.
Disparities in Regional Traffic: There are disparities in device and regional traffic distribution among competitors, indicating potential weaknesses in market penetration strategies.
Need for Optimization: The necessity to optimize website/APP content, design, and functionality suggests existing weaknesses in user experience and website/APP performance.
Limited Geographic Reach: The company may have limitations in reaching diverse geographical regions, affecting overall traffic distribution and market reach.

Opportunities

Enhanced User Experience: Implementing strategies to improve website/APP engagement presents an opportunity to enhance user experience, leading to increased customer satisfaction and loyalty.
Geographic Expansion: Diversifying marketing efforts to target specific regions and demographics opens opportunities for expanding market reach and capturing new customer segments.
Technology Integration: Leveraging emerging technologies such as AI-driven personalization or mobile optimization can further enhance website/APP engagement and user experience.
Collaborative Partnerships: Forming partnerships with complementary businesses or platforms can extend reach and access new customer pools, contributing to increased traffic and engagement.

Threats

Competitive Pressure: Intense competition within the meal delivery industry poses a threat to market share and customer acquisition, especially if competitors excel in website/APP engagement strategies.
Technological Challenges: Rapid advancements in technology require continuous adaptation and investment to stay competitive, posing a threat to companies with limited resources or outdated systems.
Economic Uncertainty: Economic downturns or shifts in consumer spending habits could impact disposable income for meal delivery services, affecting overall demand and website/APP engagement metrics.
Regulatory Changes: Changes in regulations related to online commerce, data privacy, or food safety could necessitate costly adjustments and affect operations and website/APP performance.

Problem

The meal delivery industry faces challenges in terms of website/APP engagement, with varying levels of user traffic, visit duration, and page views.

Solution

Implement strategies to enhance website engagement, improve user experience, and increase traffic from diverse geographical regions. This involves optimizing website/APP content, design, and functionality to encourage longer visit durations, higher page views per visit, and reduced bounce rates. Additionally, diversifying marketing efforts to target specific regions and demographics will help balance traffic distribution.

Goal

Boost website/APP engagement metrics such as visit duration, pages per visit, and page views while simultaneously reducing bounce rates. This will contribute to an overall improvement in user experience and increase brand visibility. Specific goals include achieving higher monthly visits, longer visit durations, and increased page views per visit across all platforms.

Userflow

Samer’s userflow: eight stages, from the homepage to settings.

It reaches wider than the food-ordering flows of the Structure step: workouts, nutritionists, community.

01
HOMEPAGE
- Welcome
- Login/Register options
02
REGISTRATION/LOGIN
- Main: Users can register with email or social media accounts.
- Returning users can log in with their credentials.
03
USER PROFILE
- Basic user information such as name, age, weight, height, and goals.
- Option to set preferences for diet (e.g., vegan, keto) and workout intensity.
- Progress tracking dashboard showing achievements, goals, and history.
04
DIET SECTION
- Meal Planner: Users can plan their meals for the day/week.
- Recipe Database: Access to a library of healthy recipes based on dietary preferences.
- Calorie Tracker: Allows users to input daily food intake and track calorie consumption.
- Nutritional Information: Provides information about nutritional content of various foods.
05
WORKOUT SECTION
- Exercise Library: Access to a variety of workouts categorized by muscle group or fitness goal.
- Workout Scheduler: Users can schedule their workouts and receive reminders.
- Progress Tracker: Allows users to track their fitness progress, such as weight lifted, distance run, etc.
06
CONNECT WITH NUTRITIONISTS
- Search for Nutritionists: Users can search for certified nutritionists based on specialization, availability, and user reviews.
- Schedule Consultation: Users can book appointments with nutritionists for personalized guidance.
- In-App Messaging: Communication channel between users and nutritionists for follow-ups and queries.
07
COMMUNITY AND SUPPORT
- Support: Access to FAQs, tutorials, and customer support for any technical or app-related issues.
08
SETTINGS
- Account Settings: Update personal information, change password, etc.
- Notification Settings: Manage preferences for app notifications.
- Privacy Settings: Control data sharing and privacy options.
- Logout