ux和ui_设计更好的结帐体验-UX / UI案例研究

ux和ui

Plated Cuisine is a food ordering and delivery app for Plated Cuisine Restaurant founded and managed by Rayo Odusanya.

Plated Cuisine是由Rayo Odusanya创建和管理的Plated Cuisine Restaurant的食品订购和交付应用程序。

A short background about Rayo Rayo Odusanya is a graduate of Sullivan University, Louisville USA. Being the only girl in the family, she took after her mother in making delicacies for both her nuclear and extended families during special occasions. After graduation, she decided to return home to Lagos to open her business. With a blend of African and Foreign cuisine, Rayo has fully mastered the art of culinary cuisine.

关于Rayo的简短背景Rayo Odusanya毕业于美国路易斯维尔的沙利文大学。 作为家庭中唯一的女孩,她在特殊场合追随母亲为亲戚和大家庭做美食。 毕业后,她决定回到拉各斯开张生意。 Rayo融合了非洲和外国美食,完全掌握了烹饪美食的艺术。

The app allows users to order food from a variety of delicious cuisine directly to their office, as well as provide a way to track their order(s) and suggest meal combinations. The business is specific about its audience, who are the working class citizens within Lagos State.

该应用程序允许用户直接从他们的办公室订购各种美味佳肴中的食物,并提供跟踪他们的订单和建议用餐组合的方法。 该企业特定于其受众,他们是拉各斯州的工人阶级公民。

With giant food apps like Jumia foods, Bukka hut, Kilimanjaro etc dominating the market space, most users complain about the experience of the apps which makes it difficult to use. Most users complain about (assuming these were the challenges faced) how hard it is to navigate through the app(not memorable), bad user interface (inconsistent design), a complex checkout system and most especially not being able to track their orders.

随着巨型食品应用程序(如Jumia foods,Bukka小屋,乞力马扎罗山等)在市场上占据主导地位,大多数用户抱怨这些应用程序的使用体验使其难以使用。 大多数用户抱怨(假设这是面临的挑战)浏览应用程序有多难(难忘),不良的用户界面(不一致的设计),复杂的结帐系统,尤其是无法跟踪其订单。

These are the UX/UI challenges that I have decided to improve on, along with an order tracking system, in this case study.

在本案例研究中,这些是我决定改进的UX / UI挑战,以及订单跟踪系统。

For the sake of this study, Plated Cuisine would be used to describe the app which the chef is using to offer her services. Plated Cuisine Restaurant would serve as the restaurant Rayo manages.

为了进行这项研究,将使用Plated Cuisine来描述厨师用来提供服务的应用程序。 Plated Cuisine Restaurant将作为Rayo管理的餐厅。

目标与目的 (Goals and Objectives)

  • To improve and design a better food tracking experience.

    改善和设计更好的食物跟踪体验。
  • Mobile design approach.

    移动设计方法。
  • Minimal UI (modern and fresh)

    最小的UI(现代和新鲜)
  • Easy navigation throughout the app, fewer user action approach.

    在整个应用程序中轻松导航,减少用户操作方法。
Image for post

了解问题 (Understanding the problem)

The solution is to design an app for an emerging chef who wants to offer her food services to a targeted audience (working-class people). My first step was to familiarise myself with Plated Cuisine and the business process. From having an in-person interview with her at the office, I learnt the following:

解决方案是为想要向目标受众(工人阶级)提供餐饮服务的新兴厨师设计应用程序。 我的第一步是使自己熟悉Plated Cuisine和业务流程。 通过在办公室与她进行面试,我了解到以下几点:

  • Her business perspective, goals & objectives

    她的业务远景,目标和目的
  • The core purpose of this app which is “Comfort at your office”

    这个应用程序的核心目的是“让您的办公室舒适”

After absorbing all the information, I was able to breakdown the project into modules — which would enable me to pay close attention to even the minute details. The essence of this is to equip me with the necessary information to use and provide a solution for the users.

吸收了所有信息之后,我便能够将项目分解为模块,这使我可以密切关注甚至是微小的细节。 这样做的本质是为我提供必要的信息,以供使用并为用户提供解决方案。

研究与分析 (Research and Analysis)

Now that I have a better understanding of the Plated Cuisine, I began my competitive analysis to see which companies/apps are currently dominating the market in the food delivery space, to understand their patterns and draw relevant findings such as:

现在,我对餐盘料理有了更好的了解我开始进行竞争分析,以了解哪些公司/应用程序目前正在食品配送领域主导市场,了解其模式并得出相关发现,例如:

  • Why are users currently using this app? Is it the brand image? Food quality?

    为什么用户当前正在使用此应用程序? 是品牌形象吗? 食物品质?
  • Current issues users are facing using these applications.

    用户使用这些应用程序时面临的当前问题。
  • Specific issues relating to the food tracking system.

    与食品跟踪系统有关的特定问题。

After making my findings, I began to research on a global scale to see what’s new, keep in touch with the design styles and trends. With my focus being the improvement of the food delivery tracking system it has been seen through research why users abandon or cancel their orders based on some reoccurring issues like:

在得出结论之后,我开始在全球范围内进行研究,以了解新功能,并与设计风格和趋势保持联系。 我的重点是改进食品配送跟踪系统,通过研究发现,用户为什么会基于一些重复出现的问题而放弃或取消订单:

  • Price discrepancies, which makes the users unhappy

    价格差异,使用户不满意
  • Users confused about when and how long their food would get to them

    用户对他们的食物何时到达多久感到困惑
  • Dispatch riders not conversant with proper navigation systems like google, which leads to unoptimised routes = unhappy customer.

    派遣不熟悉google等适当导航系统的骑手,这会导致路线未优化=客户不满意。

  • Quality of food delivered (since most apps in question offer food services from different vendors)

    交付食物的质量(因为大多数有问题的应用程序提供来自不同供应商的食物服务)
  • Complicated menus

    复杂的菜单

To get more insight I carried out a mini-survey which targeted the working class people (ages 23–30), I needed more data on their day to day activities and how ordering food during their busy schedule affects their routines, this enabled me to arrive at relevant conclusions, below are my findings:

为了获得更多见解,我针对工人阶级(23至30岁)进行了一次小型调查,我需要他们日常活动中的更多数据,以及他们忙碌的日程中订购食物如何影响他们的日常活动,这使我能够得出相关结论,以下是我的发现:

Image for post

Here are some of the relevant questions I asked and some feedbacks:

以下是我提出的一些相关问题和反馈:

  1. What does your typical day look like?

    您平日的日子如何?
  2. Why do you use food delivery services? How many of them do you use?

    您为什么使用送餐服务? 您使用其中几个?
  3. What issues are you having with the current apps?

    您目前的应用程式有什么问题?
  4. What could be a reason you would use our solution?

    您使用我们的解决方案的原因可能是什么?
  5. What’s your take on food quality?

    您对食品质量有何看法?
  6. How efficiently does the current food delivery services you use help you track your order?

    您当前使用的送餐服务如何有效地帮助您跟踪订单?

Some of the responses:

一些回应:

“My day can be very hectic, I work 9 am — 10 pm. I don’t really have the time nor energy to go out and buy food lol, after seating down for hours I’ll now walk under this Lagos sun? LOL no, thank you. Hmmm, I use Jumia and Kilimanjaro. Well, It’s frustrating not knowing when my food would get to me so I usually order very early ”

一天可能非常忙碌,我上午9点至晚上10点工作。 在坐了几个小时后,我现在没有时间或精力去买食物哈哈,我现在要在拉各斯的阳光下走吗? 大声笑不,谢谢。 嗯,我用的是朱米亚和乞力马扎罗。 好吧,不知道什么时候能买到食物让我感到沮丧,所以我通常很早点菜。

“I’m tired of all these food apps tbh, the stress of ordering and not having a clue if my food has been dispatched or how long it would take to reach my office. I’m always on the go so I like it when I’m in a meeting outside the office I can order food to my office and follow up via the app not having to call”

“我对所有这些食物应用程序感到厌倦,因为点餐而感到压力,不知道是否已经派出我的食物或到达办公室需要多长时间。 我总是在旅途中,所以当我在办公室外的会议上时,我喜欢它,我可以在办公室点菜并通过应用进行跟进,而不必致电”

“Well I’m very selective about what I order, so if your food quality is great? Sure thing I would order again. My schedule is very busy at times, I can be out from 6 am and come back at 11 pm, so ordering food at times helps to reduce the stress. If the solution your providing can make the process easier then I would come on board”

“好吧,我对所点的食物非常挑剔,所以,如果您的食物质量很好? 当然,我会再次点菜。 我的日程有时很忙,我可以从早上6点出去,然后在晚上11点回来,所以有时点菜有助于减轻压力。 如果您提供的解决方案可以简化流程,那么我就会加入”

The importance of this research is to find how to make Plated Cuisine stand out from its competitors to create a better experience for its users. To give personality to my study I created a user persona.

这项研究的重要性在于寻找如何使Plated Cuisine在其竞争对手中脱颖而出,从而为用户创造更好的体验。 为了赋予我的学习个性,我创建了一个用户角色。

用户角色 (User Persona)

Using the report from the survey and interview, I created a user persona that embodies the traits of the target audience. The user persona created helps me get a better understanding of the problem I’m trying to solve.

使用调查和访谈中的报告,我创建了一个用户角色,体现了目标受众的特征。 创建的用户角色有助于我更好地理解我要解决的问题。

Image for post

用户流 (User Flows)

This process is all about defining the flow for plated cuisine, bringing more insight to the layouts and structure of the app. This helps to define the navigation flow for the app, aimed at making the flow and steps very easy, memorable for a user which would increase interactiveness. A user (in this case Zik) just has to register or log in once when using the app for the first time.

此过程全都涉及定义板式菜肴的流程,从而为应用程序的布局和结构带来更多见解。 这有助于为应用程序定义导航流程,旨在使流程和步骤非常简单,对用户而言令人难忘,从而增加了交互性。 首次使用该应用程序时,用户(在本例中为Zik)仅需注册或登录一次。

The app has been structured in a way to reduce the user actions to complete an order, 4 clicks are all it takes to order a meal, which is very simple and minimal.

该应用程序的结构设计可以减少用户完成订单的操作,只需四次单击即可订购一餐,这非常简单且最少。

Image for post

用户情节提要和草图 (User Storyboard and Sketches)

Creating a storyboard and sketches for this case study helped me emphasise with the user through (Zik) his journey giving me a more defined contextual idea and spot out challenges that may occur or user needs not put into consideration.

为这个案例研究创建一个故事板和草图,帮助我通过(Zik)向用户强调了他的旅程,从而为我提供了更明确的上下文概念,并指出了可能发生的挑战或用户无需考虑的挑战。

After several iterations in the sketching process, I was able to come up with a solution for a better food tracking experience.

在草绘过程中进行了几次迭代之后,我能够提出一种解决方案,以获得更好的食物跟踪体验。

Image for post
Image for post
Image for post

线框 (Wire-framing)

With the sketches above the goal was to provide a solution for the pain points uncovered in the initial research. This is a form of low-fidelity wire-framing which gave me a clearer picture of how the interface would look like, also covering the basic content structure.

上面的草图旨在为最初研究中发现的痛点提供解决方案。 这是低保真线框的一种形式,它使我对界面的外观有了更清晰的了解,还涵盖了基本的内容结构。

During this process, I crafted out how each of the screens connects together to give a seamless and smoother experience.

在此过程中,我精心设计了每个屏幕如何连接在一起以提供无缝流畅的体验。

Image for post

高保真度和原型设计 (High fidelity & Prototyping)

Using all the information gotten from the above sketches, user flow and wireframes I was able to convert them into a high-fidelity visual representation of the app. By using cool and neutral colours I was able to come up with a fresh & minimal design.

使用从以上草图,用户流程和线框获得的所有信息,我能够将它们转换为应用程序的高保真视觉表示。 通过使用冷色和中性色,我可以提出一种新颖和最小的设计。

点食物 (Ordering food)

When a first-time user launches the app, a splash screen would be displayed which then redirects the user to the signup page. After the registration process, the user is directed to the home page where orders from a variety of delicacies can be made.

首次用户启动应用程序时,将显示启动屏幕,然后将用户重定向到注册页面。 在注册过程之后,用户将被定向到主页,可以在其中进行来自各种美食的订单。

From the home screen, users can choose a dish of their choice, also a user can add sides or drinks to complement their meal from a single screen. Users can also choose between dark and light 🌝 🌚 mode depending on their mood. Also, at the point of checkout users can decide to add more dishes to their order(s).

在主屏幕上,用户可以选择自己喜欢的菜,用户也可以在一个屏幕上添加餐点或饮料以补充餐点。 用户还可以根据自己的心情在深色和浅色🌚🌚模式之间进行选择。 同样,在结帐时,用户可以决定在他们的订单中添加更多菜肴。

Depending on the time of the day the app suggests different meal options to the user to make the selection better.

根据一天中的时间,应用程序会向用户建议不同的用餐选择,以使选择更好。

Users can set up specific meals they want to be ordering frequently. When a first-time user launches the app he/she can click on “custom” which would display a full menu encouraging them to select the combos they want. This would make the ordering process faster and simpler.

用户可以设置自己想经常点的特定餐点。 首次用户启动应用程序时,他/她可以单击“自定义”,这将显示完整菜单,鼓励他们选择所需的组合。 这将使订购过程更快,更简单。

If a user wants to have more details on the food he/she wants to order, by sliding right on the food selection page (3rd screen from the left) a user can view the ingredients used to make the meal.

如果用户想获得他/她想要订购的食物的更多详细信息,则可以通过在食物选择页面上向右滑动(从左数第三个屏幕),用户可以查看用来做饭的食材。

Image for post

追踪订单 (Tracking an order)

After research and feedback gotten from users, I was able to come up with a much simpler and user-friendly tracking solution (So Zik can have his meetings in peace). After placing an order a confirmation screen shows giving the option for a user to track an order. When a user clicks “Track my order” button a screen that shows the order progress displays, giving the user an idea as of when the order would be completed.

从用户那里获得研究和反馈后,我得以提出一个更简单且用户友好的跟踪解决方案(因此Zik可以安心开会)。 下订单后,将显示一个确认屏幕,为用户提供跟踪订单的选项。 当用户单击“跟踪我的订单”按钮时,将显示一个显示订单进度的屏幕,向用户提供有关何时完成订单的想法。

When an order is dispatched, the user would be notified and has the option to track the rider’s movements, also a user can update their current location. When tracking the rider’s movements the user has an option to call.

发出订单时,将通知用户并可以跟踪骑手的运动,用户也可以更新其当前位置。 在跟踪骑手的运动时,用户可以选择呼叫。

After an order has been completed a notification would be sent to the user encouraging the user to review the meal and riders performance.

在完成订单后,将向用户发送通知,鼓励用户查看餐食和骑手的表现。

For easy tracking and navigation once an order has been placed a navigation icon would be displayed at the top right corner on the screen when clicked it shows the current order that’s in progress (this can be accessed anywhere on the app, as long as an order is in progress)

为了方便跟踪和导航,一旦下订单,单击该图标时,屏幕上右上角会显示一个导航图标,显示正在处理的当前订单(可以在应用程序的任何位置进行访问,只要有订单即可正在处理)

In a scenario where there is no internet connection available, there would be an option to have text messages sent to the user at intervals to track the order based on the estimated time of arrival.

在没有可用的Internet连接的情况下,可以选择将文本消息定期发送给用户以根据估计的到达时间跟踪订单。

Image for post

原型制作 (Prototyping)

To give a more realistic feeling, I used my iPhone 7(need to upgrade soon tho 😂) to test, but the screens were designed with the width and height of an iPhone X.

为了给人更真实的感觉,我使用我的iPhone 7(需要尽快升级)进行测试,但屏幕的设计与iPhone X的宽度和高度相同。

时尚指南 (Style Guide)

Image for post

设计工具 (Design tool)

Figma. Both prototyping and design were done with Figma

Figma。 原型和设计均由Figma完成

Working on this design exercise was an amazing experience. I am certain that I have just touched the surface of the delivery ecosystem and solved the underlying problem. I have learnt a lot from transforming Plated Cuisine from concept to prototype. Thanks for reading and hope you enjoyed it.

进行此设计练习是一次了不起的经历。 我敢肯定,我刚刚接触了交付生态系统的表面并解决了潜在的问题。 通过将Plated Cuisine从概念转变为原型,我学到了很多东西。 感谢您的阅读,希望您喜欢它。

翻译自: https://uxdesign.cc/ui-ux-case-study-designing-a-better-checkout-experience-de91b46b97e8

ux和ui

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/275202.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Django中ajax发送post请求,报403错误CSRF验证失败解决办法

今天学习Django框架,用ajax向后台发送post请求,直接报了403错误,说CSRF验证失败;先前用模板的话都是在里面加一个 {% csrf_token %} 就直接搞定了CSRF的问题了;很显然,用ajax发送post请求这样就白搭了&…

如何在EXCEL中添加下拉框

筛选主要是将已有列的信息以下拉框的形式显示出来 选中数据栏中的筛选按钮即可生成 如果是想添加未有信息则如下图步骤 首先,选择你要出现下拉的区域,在数据栏中的选择数据有效性 然后,下面对话框中,有效性条件中按如下设置即可&a…

每次新增页面复制粘贴?100多行源码的 element-ui 的新增组件功能教你解愁

1. 前言大家好,我是若川。最近组织了源码共读活动,感兴趣的可以点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。已进行三个月了,很多小伙伴表示收获颇丰。想学源码,极力推荐之前我…

原子设计_您需要了解的有关原子设计的4件事

原子设计重点 (Top highlight)Industries such as Architecture or Industrial Design have developed smart modular systems for manufacturing extremely complex objects like airplanes, ships, and skyscrapers. Inspired by this, Atomic Design was proposed as a syst…

C#中的Clipboard与ContextMenuStrip应用举例

今天,突然想起了怎样在一个文本中实现复制、剪切与粘贴的功能,并给这些功能添加右键的快捷方式。于是,就用自己的VS2008写了一个简单的小应用,以熟悉C#中剪贴板与快捷菜单的使用。 首先,我们不难发现,剪贴板…

控制台ui_设计下一代控制台UI

控制台ui游戏UX (GAMES UX) Yesterday’s Sony presentation showed us the final look of the PlayStation 5, as well as an impressive of next-gen games that will be released with it. What we didn’t get to see, however, is the new operating system and it’s use…

写给前端新手看的一些模块化知识

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以点此加我微信ruochuan12 进群参与,每周大家一起学习200行左右的源码,共同进步。已进行三个月了,很多小伙伴表示收获颇丰。一、 为什么需要模块化以前没有模块化时…

代码实现照片素描_我的代码素描之旅

代码实现照片素描In 2018 I started the process of consistently creating and posting my code sketches online. These are small animations I make with code and post on instagram. Through these sketches I tried to visually express my ideas using color, animatio…

真效率神器,UI稿智能转换成前端代码,准确率极高

大家好,我是若川。在这充满网络促销活动的几个月,倍感压力的,除了你的口袋,是否还有程序员的发量呢?每年的双十一、双十二购物狂欢节,各大电商平台都会上线让消费者充满购买欲望的活动页面,而这…

几个用于序列化的代码片段

参考JavaScriptSerializer,一般用来做JSON格式化http://msdn.microsoft.com/zh-cn/library/system.web.script.serialization.javascriptserializer.aspx http://msdn.microsoft.com/zh-cn/library/system.web.script.serialization.javascriptconverter.aspxDataContractSeria…

桌面图标摆放图案_用图标制作醒目的图案

桌面图标摆放图案Level up your video calls with a custom backdrop created using Noun Project icons.使用使用Noun Project图标创建的自定义背景来升级视频通话。 The only thing more visually pleasing than a well-designed icon is a neat, eye-catching pattern made…

3个多月,近3000人参与的源码共读,诚邀加入~

大家好,我是若川。众所周知,从8月份开始,我组织了源码共读活动,每周学习200行左右的源码,到现在持续了3个多月,坚持答疑解惑。帮助了不少人,还是挺开心的。另外,涌现了很多优秀的读者…

“这张图告诉你什么?”

For data to be impactful, it must be understood.为了使数据具有影响力,必须理解它。 I’ve happily spent hundreds and hundreds of hours of my life watching users misunderstand data visualizations. I’m strangely hooked on it.我快乐地度过了数百个小…

我们从 UmiJS 迁移到了 Vite

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以点此加我微信ruochuan12 进群参与,每周大家一起学习200行左右的源码,共同进步。已进行三个月了,很多小伙伴表示收获颇丰。我们从 UmiJS迁移到 Vite 已经上线半年…

将DataTable的内容以EXCEl的形式导出到本地

1.在搞项目的时候一般会遇到,将GridView或者Repeater的内容以Excel的形式保存到本地,即导出功能。我总结了两个方法。 方法一: 1 DataTable dt query.GetItems().GetDataTable();2 if (dt ! null)3 {4 …

智能家居数据库设计_设计更智能的数据表

智能家居数据库设计重点 (Top highlight)Data tables are hard. There are many different ways to think about them. So, naturally, the first step would be to figure out what your users need.数据表很难。 有许多不同的方式来考虑它们。 因此,自然地&#x…

可能是全网首个前端源码共读活动,诚邀你加入一起学习

大家好,我是若川。众所周知,从8月份开始,我组织了源码共读活动,每周学习200行左右的源码,到现在持续了3个多月,坚持答疑解惑。帮助了不少人,还是挺开心的。另外,涌现了很多优秀的读者…

线段树专辑——pku 3667 Hotel

http://poj.org/problem?id3667 哈哈&#xff0c;经典中的经典题啊。利用线段树求最大连续空闲区间&#xff0c;并返回空闲区间的起点坐标。 View Code 1 #include<iostream> 2 #include<string> 3 #include<algorithm> 4 using namespace std; 5 6 …

houseparty不流畅_重新设计Houseparty –用户体验案例研究

houseparty不流畅Houseparty has become very popular during the COVID-19 period because it helps you connect with others in a fun way. The concept is simple, you open the app and jump on a video call with your friends. You can even play online games with the…

你不知道的 Node.js 工具函数

从类型判断说起在 JavaScript 中&#xff0c;进行变量的类型校验是一个非常令人头疼的事&#xff0c;如果只是简单的使用 typeof 会到各种各样的问题。举几个简单的&#x1f330;&#xff1a;console.log(typeof null) // object console.log(typeof new Array) // object cons…