Free UI UX case study on Food mobile app

I am sharing a case study that will definitely help if you are a UI/UX designer. The project revolves around creating a comprehensive UX case study for a food-related product. The aim is to understand the needs and goals of users, analyze their behavior and feedback, and develop design solutions that are intuitive, efficient, and enjoyable to use.

The Product

The product is a mobile application that aims to enhance the food ordering and delivery experience for users. It provides a platform where users can explore various restaurants, view menus, place orders, and track deliveries in real-time. The app also offers features such as personalized recommendations, user reviews, and the ability to customize orders.

Project Duration

The estimated duration for completing this project is two months.

The Problem

Users often face challenges when ordering food online, such as difficulties in finding specific cuisines, limited customization options, and lack of transparency in the delivery process. These issues can lead to a frustrating user experience, resulting in low customer satisfaction and decreased usage of the platform.

The Goal

The goal of this case study is to identify and address the pain points experienced by users during the food ordering process. By understanding their needs and preferences, we aim to design and implement user-centric solutions that improve the overall experience and increase user engagement.

My Role

As a UX Designer, my role in this project is to conduct user research, analyze user behavior and feedback, and propose design solutions that align with the users’ needs and goals. I will collaborate with cross-functional teams, including product managers and developers, to ensure the successful implementation of the proposed solutions.

Responsibility

My responsibilities include:

  1. Conducting user research to gather insights on user preferences, pain points, and behavior.
  2. Analyzing user feedback and data to identify patterns and trends.
  3. Creating user personas to represent different user segments and their goals.
  4. Designing intuitive and user-friendly interfaces that address the identified problems.
  5. Developing wireframes, prototypes, and user flows to visualize and test the proposed solutions.
  6. Collaborating with stakeholders to gather feedback and iterate on the designs.
  7. Communicating design decisions and recommendations to the development team.
  8. Ensuring the final product meets the users’ needs and provides an enjoyable experience.

User Research

To understand the users better, I will employ the following UX research methods:

  1. Surveys: Conducting online surveys to gather demographic information, preferences, and pain points related to food ordering.
  2. Interviews: Conducting in-depth interviews with a diverse group of users to gain insights into their motivations, frustrations, and needs.
  3. User Testing: Observing users as they interact with existing food ordering platforms to identify pain points and areas for improvement.
  4. Analytics: Analyzing user data from the current platform to understand user behavior, usage patterns, and drop-off points.

Summary

Based on the initial research, users have expressed a desire for a more streamlined and personalized food ordering experience. They face challenges in finding specific cuisines, customizing their orders according to dietary restrictions, and tracking the progress of their deliveries.

Pain Point

The main pain point users face is the lack of options for personalized customization of their food orders. They also find it difficult to discover new restaurants that cater to their specific preferences. Additionally, users express frustration with the lack of transparency in the delivery process, leading to uncertainty and delays.

Personas

Persona 1: Emma

  • Age: 25
  • Occupation: Working professional
  • Goals: Wants to explore new restaurants and cuisines, seeks quick and convenient food delivery, prefers healthy food options, values transparency in the delivery process.

Persona 2: Mike

  • Age: 35
  • Occupation: Fitness enthusiast
  • Goals: Seeks customized meal options based on dietary restrictions, prefers to track nutritional information, values efficient and timely delivery.

Problem Statements and User Journey Map

Problem Statement 1: Users find it challenging to customize their food orders based on dietary restrictions and preferences.

User Journey Map:

  1. User opens the app and searches for a specific cuisine or restaurant.
  2. User selects a menu item but faces limitations in customizing it according to dietary restrictions.
  3. User gets frustrated as they are unable to personalize their order as desired.
  4. User places the order reluctantly, compromising on their dietary preferences.

Problem Statement 2: Users struggle to discover new restaurants that cater to their specific preferences.

User Journey Map:

  1. User opens the app with the intention of exploring new dining options.
  2. User tries to filter restaurants based on cuisine and dietary preferences but finds limited options.
  3. User becomes disappointed and decides to stick with familiar restaurants.
  4. User misses out on discovering new and exciting dining experiences.

Problem Statement 3: Users lack transparency and real-time updates during the delivery process.

User Journey Map:

  1. User eagerly awaits their food delivery.
  2. User experiences anxiety and uncertainty as there is no real-time tracking or estimated delivery time provided.
  3. User starts to lose trust in the service and wonders about the status of their order.
  4. User receives the delivery much later than expected, causing frustration and dissatisfaction.

UX Structure

To address the identified problem statements, the proposed UX structure includes the following elements:

  1. Enhanced Customization: Introduce an intuitive and user-friendly interface that allows users to customize their food orders based on dietary restrictions, allergies, and preferences. Provide clear options for modifications such as ingredient swaps, portion sizes, and add-ons.
  2. Advanced Filters and Recommendations: Implement a robust filtering system that allows users to discover restaurants based on specific cuisines, dietary preferences, and location. Utilize machine learning algorithms to provide personalized recommendations based on user preferences and past orders.
  3. Real-time Tracking: Integrate a live tracking feature that provides users with real-time updates on the status and location of their delivery. Incorporate estimated delivery times and notifications to keep users informed throughout the process.
  4. Nutritional Information: Include detailed nutritional information for each menu item, catering to users like Mike who prioritize health and fitness. This feature allows users to make informed choices based on their dietary goals.

The Impact and Lessons Learned

Through this comprehensive UX case study, we aimed to address the pain points users encounter during the food ordering process. By enhancing customization options, improving restaurant discovery, and providing real-time tracking and nutritional information, we expect to achieve the following:

  1. Increased User Satisfaction: By addressing the identified pain points, users will have a more personalized and transparent food ordering experience, resulting in higher satisfaction and increased engagement with the platform.
  2. Improved User Retention: By offering a wide range of customization options and personalized recommendations, users are more likely to continue using the app, leading to improved user retention rates.
  3. Enhanced Brand Loyalty: Providing a seamless and enjoyable experience will contribute to building trust and loyalty among users, fostering a positive brand image.

During this project, we learned the importance of understanding user needs and goals through comprehensive research. By placing users at the center of the design process and iterating based on their feedback, we can create impactful solutions that enhance the user experience and drive business success.

Awesome BEAUTIFUL Glyphicons Icons for your next project

What are Glyphicons?

Glyphs are nonverbal symbols and have been used in human communication since the beginning of mankind. Each picture/sign represents a word and form a universal language which is comprehensible to all people in the world.

Glyphicons are icon fonts which are used in web development. Glyphicons Halflings are not free and require licensing; however their creator has made them available for Bootstrap projects free of cost.

Icons are very important, though, and having to manually integrate external packs can be confusing and daunting task for beginners. That is why we have written this article to make it easier to integrate and use Glyphicons and its alternatives.

How to use Glyphicons

Unlike its alternatives, Glyphicons is integrated with Bootstrap version 3 upwards. Therefore, you do not have to download the pack separately.

Where to find Glyphicons?

Glyphicons can be found within the fonts folder inside the bootstrap folder. It contains the following files:

  • Glyphicons-halflings-regular.eot
  • Glyphicons-halflings-regular.svg
  • Glyphicons-halflings-regular.ttf
  • Glyphicons-halflings-regular.woff

C:\Users\admin\Documents\Johnmadakin.com\wordpress blog images\compiledfilestructure.jpg

Associated CSS rules are present within bootstrap.css and bootstrap-min.css files within CSS folder of destination folder.

All icons in the pack require a base class and individual icon class. To use, place the following code just about anywhere. Ensure you leave a space between the icon and text for proper padding.

Do’s and Don’ts

Only for use on empty elements: Icon classes should only be used on elements that contain no text content and have no child elements.

Don’t mix with other components: Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>.

Changing the icon font location

Bootstrap assumes icon font files will be located in the .../fonts/ directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:

  • Change the @icon-font-path and/or @icon-font-name variables in the source Less files.
  • Utilize the relative URLs option provided by the Less compiler.
  • Change the url() paths in the compiled CSS.

Use whatever option best suits your specific development setup.

Accessible icons

Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the aria-hidden=”true” attribute.

If you’re using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the .sr-only class.

If you’re creating controls with no other text (such as a <button> that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an aria-label attribute on the control itself.

<span class=”glyphicon glyphicon-search” aria-hidden=”true”></span>

Examples:

<p>

<button type = “button” class = “btn btn-default”>

<span class = “glyphicon glyphicon-sort-by-attributes”></span>

</button>

 

<button type = “button” class = “btn btn-default”>

<span class = “glyphicon glyphicon-sort-by-attributes-alt”></span>

</button>

 

<button type = “button” class = “btn btn-default”>

<span class = “glyphicon glyphicon-sort-by-order”></span>

</button>

 

<button type = “button” class = “btn btn-default”>

<span class = “glyphicon glyphicon-sort-by-order-alt”></span>

</button>

</p>

<button type = “button” class = “btn btn-default btn-lg”>

<span class = “glyphicon glyphicon-user”></span>

 

User

</button>

<button type = “button” class = “btn btn-default btn-sm”>

<span class = “glyphicon glyphicon-user”></span>

 

User

</button>

<button type =”button” class = “btn btn-default btn-xs”>

<span class = “glyphicon glyphicon-user”></span>

 

User

</button>

Note: Leave a space between the icon and text for proper padding.

Awesome BEAUTIFUL Glyphicons Icons for your next project

Alternatives to Glyphicons and how to integrate them

Font Awesome has been the most used icons in the developer community for a while now. The pack features more than 600 beautiful vector icons, giving you full CSS control over how you use them.

This completely free icon library is constantly being updated with new icons and is very easy to integrate; all you have to do is add their CSS to your website.

Step 1: Insert the CDN directly on the <head> of your HTML file using the line:

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css”>

Or download (https://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.5.0.zip) Font Awesome manually on your own server.

Step2: After integrating the Font Awesome library, you can add any of the package’s icons anywhere you want on your page by using the <span> tag and the fa CSS Prefix.

You can download the font awesome List here (specific CSS classes included) – (https://fortawesome.github.io/Font-Awesome/cheatsheet/)

For example:

<span class=”fa fa-ambulance red-icon”></span> fa-ambulance would add the ambulance icon.

After which you can edit your new ambulance icon in any way you want.

To change the sizes, you can use the fa-2x, fa-3x, fa-4x or fa-5x classes.

<span class=”fa fa-ambulance-o fa-2x red-icon”></span> fa-ambulance would create a double-sized ambulance icon.

Changing your new icon’s color is very easy. In the CSS file, include something like:

.red-icon {

color: red;

}

Another alternative to Glyphicons is Typicons.

The Typicons icon pack contains 336 fully customizable vectors free to use in all your web applications.

Installing Typicons is just as easy as installing Font Awesome:

Step 1: Download the Typicons icons here – (https://github.com/stephenhutchings/typicons.font).

Step 2: Integrate the CSS file “typicons.min.css” as reference in the <head> of your HTML file.

<link rel=’stylesheet’ href=’folderlocation/src/font/typicons.min.css’ />

Step 3: Include the icons in your website using the simple <span> tag followed by “typcn typcn-classname”.

You can find all the icons and their class names here – (http://www.typicons.com/).

Example: <span> class=”typcn typcn-coffee green-icon”</span> would add the coffee icon.

Free Full-Width WordPress Themes

In our previous WordPress themes list, we used a set of criteria and a star grading system to determine which theme will make it into our top list starting with the theme with the least features to one with the most expandable options, features and customization, flexibility.

However, we have prepared a random list of the best fullwidth WordPress theme using insights from our in-house content specialist, technical SEO specialist and WordPress theme shops.

Here is our list for the 13 best free full-width WordPress themes.

Customizr WordPress Theme

C:\Users\admin\Documents\blogger\customizr.png

Our first theme on the list is Customizr. Customizr is a simple, fast and full-width WordPress theme designed to help you attract and engage more visitors. Provides a perfect user experience on smartphones.

The Customizr WordPress theme makes it easy to create any type of website: business sites, blogs, portfolios, landing pages, forums, shops, etc.

Customizr does not require any technical skills to design and add content to your website. This theme is responsive: it adapts nicely on any type of device (desktop, tablets, smartphones) and is compatible with all modern browsers.

Features include: BuddyPress, Custom Colours, Custom Menu, Editor Style, Featured Images, Left Sidebar, One Column, Post Formats, Right Sidebar, RTL Language Support, Sticky Post, Theme Options, Threaded Comments, Three Columns, Two Columns and Translation Ready.

Price: Free

Last Update: December 22, 2017

Verdict: 4.5 Stars

Download

Tours and Travels WordPress Theme

C:\Users\admin\Documents\blogger\tours and travel.png

Our second theme on the list is a child theme of VW TOUR LITE. Tours and travels is a modern, feature-rich, and 100% responsive WordPress theme that covers travel businesses such as travel agencies, travel blogs, tour operators, journey magazines, travel consultants, travel agents, tourist destinations, and other types of businesses. This theme can also be used for personal websites, fashion, beauty, lodge, lifestyle, technology, photography, and holiday websites.

This theme offers you the capabilities to build a user-friendly website with lots of customization options. The theme offers ample advanced functionalities and personalization options to help you build the best website. The variety of sections, amazing pictures, banners, slider with the Call to action button (CTA) makes it a must-have theme for every tourism WordPress site.

This theme is built on Bootstrap which gives it smooth browsing experience on all screen sizes.

Finally, this theme integrates social sharing features directly into it so you can boost social shares and gather more followers with your social profile clearly displayed.

Price: Free

Last Update: January 8, 2018

Verdict: 4.0 Stars

Download

Digital Products

C:\Users\admin\Documents\blogger\digital products.jpg

Digital Products is a WordPress theme that helps you sell your Digital Products. This theme is optimized for selling various digital products, be it software, PDFs, graphics files or any type of digital products, this theme is for you. It’s is 100% responsive and automatically adjusts screen size depending on the device used. Therefore, no matter where your audience are or what device they are viewing your new website on, it is going to display it to pixel perfection and scale seamlessly to suit the end device.

This theme is clean and lightweight which makes it loads faster therefore improving your seo score and keeping your audience engaged.

Features include: Blogging, Custom Colours, Custom Logo, Custom Menu, Featured Image Header, Featured Images, Footer Widgets, Full Width Template, Grid Layout, Left Sidebar, One Column, Theme Options, Threaded Comments and Translation Ready.

Price: Free

Last Update: December 28, 2017

Verdict: 3.5 Stars

Download

Fotopress WordPress Theme

C:\Users\admin\Documents\blogger\fotopress.png

Fotopress is a flexible, fully responsive, SEO-friendly WordPress business theme made for creative use, promoting corporate identity and engaging your target audience.

It clean and minimalist design makes your content look flawless. This theme is very flexible, easy to customize and optimize.

Features include: Blogging, Custom Colours, Custom Header, Custom Logo, Custom Menu, Featured Images, Full Width Template, Two Columns, Portfolio, Right Sidebar, Theme Options, Threaded Comments and Translation Ready.

Price: Free

Last Update: December 28, 2017

Verdict: 3.5 Stars

Download

VW E-commerce Shop theme

C:\Users\admin\Documents\blogger\vw e-commerce theme.png

VW E-commerce Shop theme checks all the boxes necessary to create an online store. It’s a responsive multipurpose E-commerce WordPress theme.

It is built on bootstrap 4 and adheres to standard complaints coding. It is cross-browser & woo commerce compatible, has Call to action button, its SEO & user-friendly and works at its optimal best across all platforms.

You may be a business owner, informative firm, travel agency, designing firm, artist, restaurant owner, construction agency, healthcare firm, digital marketing agency, blogger, corporate business, freelancers, online bookstore, mobile & tablet store, apparel store, fashion store, sport store, handbags store, cosmetics shop, jewellery store and etc.

You can setup different types of store using this theme. This theme helps make your customers shop seamlessly. It’s optimized for both shoppers and crawlers.

Features include: Blogging, Custom Background, Custom Colours, Custom Header, Custom Logo, Custom Menu, E-Commerce, Editor Style, Featured Images, Footer Widgets, Four Columns, Front Page Posting, Full Width Template, Grid Layout, Left Sidebar, One Column, Portfolio, Right Sidebar, RTL Language Support, Sticky Post, Theme Options, Threaded Comments, Two Columns, Three Columns and Translation Ready.

Price: Free

Last Update: January 13, 2018

Verdict: 4.1 Stars

Download

Yoga Fitness

C:\Users\admin\Documents\blogger\yoga.png

Yoga Fitness is a child theme of The WP Fitness multipurpose WordPress theme, it is created for fitness trainers, personal trainers, yoga trainers and weight loss enthusiasts to build websites for gyms, fitness studios, workout, boxing, aerobics, lifestyle, wellness, other multipurpose local businesses.

This theme has features and theme options that enable you extend the functionalities to create a stunning website.

It theme options also enable you add 2 sections; testimonial and Appointment form

It’s built on Bootstrap which makes it 100% responsive and automatically adjusts screen size depending on the device used. Therefore, no matter where your audience are or what device they are viewing your new website on, it is going to display it to pixel perfection and scale seamlessly to suit the end device.

It has different captivating Call to Action buttons present at specific sections that are attractive enough to catch the attention of the visitors. The secure and clean codes make the theme extremely lightweight. Furthermore, it is SEO friendly, user-friendly, has a professional design and social media integration.

Features include: Blogging, Custom Background, Custom Colours, Custom Logo, Custom Menu, E-Commerce, Editor Style, Featured Images, Footer Widgets, Front Page Posting, Full Width Template, Three Columns, Two Columns, Grid Layout, Left Sidebar, One Column, Right Sidebar, Sticky Post, Theme Options and Threaded Comments.

Price: Free

Last Update: January 13, 2018

Verdict: 4.0 Stars

Download

Magnus WordPress Theme

C:\Users\admin\Documents\blogger\magnus.png

A beautiful photoblogging theme, which comes with a full-screen layout and with a photo-friendly design. The theme provides large featured images and a catchy appearance. The homepage is made of grid-like posts – the latest post is full-screen and acts like a header. You can use this theme for photoblogging, as it will let you create beautiful posts. Magnus theme is based on visuals, which makes it even more attractive for the users.

As for the features, the theme comes with a responsive design, a featured-image header, a slide-out menu, a minimalist design, full-sized images, photo-friendly full-screen layout, custom header, custom menu, and its translation ready.

Price: Free

Last Update: January 13, 2018

Verdict: 4.0 Stars

Download

Shop Isle WordPress Theme

C:\Users\admin\Documents\blogger\desktop_shop-isle_v2-700x400.png

Shop Isle is an awesome and modern theme for online shops, which comes with a beautiful and elegant design. ShopIsle has a full-screen slider on the homepage and provides a smooth and soothing scrolling, which makes your navigation experience more pleasant and enjoyable. Your online store will have a clean and beautiful look, showing your products in a classy way. The theme offers nice and subtle animations that intensify its beauty.

ShopIsle has a responsive design, social profile links, and its translation ready. It also provides an easy contact form that helps you to stay in touch with your audience and an “About Us” section where you can tell your visitors who you are and what your best projects are.

Features include: Blogging, Custom Background, Custom Colours, Custom Header, Custom Logo, Custom Menu, E-Commerce, Editor Style, Featured Images, Footer Widgets, Four Columns, Front Page Posting, Full Width Template, Grid Layout, Left Sidebar, One Column, Portfolio, Right Sidebar, RTL Language Support, Sticky Post, Theme Options, Threaded Comments, Two Columns, Three Columns and Translation Ready.

Price: Free

Last Update: January 13, 2018

Verdict: 4.0 Stars

Download

Advance Lite WordPress Theme

C:\Users\admin\Documents\blogger\advance lite.png

Advance is a clean responsive full-page WordPress theme. It is specially designed for Business, and general corporate website. It comes with the essential features for your website such as a business, personal, blog, portfolio etc.

Its responsive feature enables your website to automatically adjust screen size depending on the device used. Therefore, no matter where your audience are or what device they are viewing your new website on, it is going to display it to pixel perfection and scale seamlessly to suit the end device.

It is clean, lightweight and optimized for SEO. A lightweight template which loads faster both on mobile and desktop view.

Price: Free

Last Update: November 16, 2017

Verdict: 3.7 Stars

Download

Glow WordPress Theme

C:\Users\admin\Documents\blogger\glow.png

Glow WordPress theme is suitable for beauty parlors, spa, salon Website, built with Bootstrap and is fully responsive for all the screen sizes. It can be used for Beauty, Salon, barber, Spa, Fitness, Wellness, Health, Blogging, Business, Agency, Corporate, Hospital, Massage parlor, Medicals, Doctors, Clinic or any other types of site.

Glow theme comes with built-in widgets and widgets positions, options customizer, drop-down menus, sliders, testimonials.

Features include: Custom Background, Custom Colours, Custom Menu, Featured Images, Full Width Template, Right Sidebar, Sticky Post, Theme Options, two columns, Threaded Comments and Translation Ready.

Price: Free

Last Update: October 10, 2017

Verdict: 3.7 Stars

Download

Zerif Lite WordPress Theme

C:\Users\admin\Documents\blogger\zerif.png

Zerif is a friendly one-page WordPress multipurpose theme, with a full-width image in the background and a simple white menu bar at the top. It comes with an elegant and modern design, which could fit very well any kind of business. Zerif Lite has an interactive and colourful interface, with classy parallax effect and lively animations. You can use it for your online shop as well.

Zerif Lite provides a responsive design, a clean and validated code, smooth parallax scrolling, WooCommerce integration, a blog layout, theme options panel, custom ribbons, lazy loading effect, complete translation, an easy contact form, custom content blocks, and many other customization options.

Price: Free

Last Update: November 16, 2017

Verdict: 3.9 Stars

Download

Hueman WordPress Theme

C:\Users\admin\Documents\Johnmadakin.com\wordpress blog images\Hueman.png

This theme also featured in our best free blog theme. It is one of the best themes out there and has a crisp and versatile design. That’s why it is used on different types of websites such as blogs, magazines, small businesses, schools, church or personal websites.

Features includes Extensive styling options, ultra responsive, Integrated social sharing and share count, easy customization using themes option, custom built widget, custom page template,  coding is neat and adheres to the WordPress coding guidelines.

It is retina ready.

The theme has built in child themes with pluggable functions and files.

Above all, the mark-up is search engine optimized to allow the best possible ranking on search engines.

Features include: Custom Colours, Custom Menu, Featured Images, Flexible Header, Full Width Template, Left Sidebar, One Column, Post Formats, Right Sidebar, Sticky Post, Theme Options, Threaded Comments, Two Columns, Three Columns and Translation Ready.

Price: Free

Last Update: November 21, 2017

Verdict: 4.2 Stars

Download

Evolve WordPress Theme

C:\Users\admin\Documents\blogger\evolve.png

Evolve is one of the best free full-width WordPress themes. It’s built on a solid framework with attention to details and user experience. It can be used to create blogs, online store, magazine or any business page.

It’s is responsive and automatically adjusts the screen size depending on the device used. No matter where your audience are or what device they are viewing your new website on, it is going to display it perfectly.

It also has great pre-built demo contents that makes designing your choice of website easy.

Features include: Blogging, BuddyPress integration, Custom Background, Custom Colours, Custom Header, Custom Menu, E-Commerce, Featured Images, Flexible Header, Footer Widgets, , Grid Layout, Left Sidebar, Microformats, News, Photography, Post Formats, Right Sidebar, Sticky Post, Theme Options, Threaded Comments and Translation Ready

Price: Free

Last Update: December 19, 2017

Verdict: 4.2 Stars

Download

Check Most Recent Posts