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.pswp.cn/news/275202.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/275202.shtml
英文地址,請注明出處:http://en.pswp.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…

深度學習 Caffe 初始化流程理解(數據流建立)

之前在簡書的文章,搬遷過來 ^-^ 本文是作者原創,如有理解錯誤,懇請大家指出,如需引用,請注明出處。 #Caffe FeatureMap數據流的建立 ##用語解釋 FeatureMap: 輸入的圖片信息或者經過多層處理后的圖片信息。weights: 只…

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行左右的源碼,共同進步。已進行三個月了,很多小伙伴表示收獲頗豐。一、 為什么需要模塊化以前沒有模塊化時…

重學前端學習筆記(八)--JavaScript中的原型和類

筆記說明 重學前端是程劭非(winter)【前手機淘寶前端負責人】在極客時間開的一個專欄,每天10分鐘,重構你的前端知識體系,筆者主要整理學習過程的一些要點筆記以及感悟,完整的可以加入winter的專欄學習【原文…

代碼實現照片素描_我的代碼素描之旅

代碼實現照片素描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…

GCC參數詳解

轉自:http://www.cnblogs.com/fence/archive/2009/12/18/1627138.html GCC參數詳解 gcc and g分別是gnu的c & c編譯器 gcc/g在執行編譯工作的時候,總共需要4步1.預處理,生成.i的文件[預處理器cpp]2.將預處理后的文件不轉換成匯編語言,生成文件.s[編…

真效率神器,UI稿智能轉換成前端代碼,準確率極高

大家好,我是若川。在這充滿網絡促銷活動的幾個月,倍感壓力的,除了你的口袋,是否還有程序員的發量呢?每年的雙十一、雙十二購物狂歡節,各大電商平臺都會上線讓消費者充滿購買欲望的活動頁面,而這…

PPT圖標的正確使用和插入與編輯形狀

PPT圖標的正確使用和插入與編輯形狀 通過圖標可以以符號的形式直觀地傳遞信息。 一,實戰:在銷售工作計劃中插入圖標 PowerPoint 2016中提供了多種類型的圖標,用戶可根據需要在幻燈片中插入所需的圖標。 二,實戰:更改銷…

幾個用于序列化的代碼片段

參考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個多月,堅持答疑解惑。幫助了不少人,還是挺開心的。另外,涌現了很多優秀的讀者…

upc 組隊賽18 STRENGTH【貪心模擬】

STRENGTH 題目鏈接 題目描述 Strength gives you the confidence within yourself to overcome any fears, challenges or doubts. Feel the fear and do it anyway! If you have been going through a rough time and feel burnt out or stressed, the Strength card encourag…

JSONNull

最近用JSONObject,感覺比xml好用一些,json的打包和解包都比較清晰和容易,最近遇到一個問題,將一個JSON對象解析,存到hashmap中去,然后再從hashmap取出數據,遇到jsonnull的問題,本以為…

“這張圖告訴你什么?”

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 已經上線半年…