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. 在整個應用程序中輕松導航，減少用戶操作方法。
了解問題 (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歲)進行了一次小型調查，我需要他們日常活動中的更多數據，以及他們忙碌的日程中訂購食物如何影響他們的日常活動，這使我能夠得出相關結論，以下是我的發現：
Here are some of the relevant questions I asked and some feedbacks:
以下是我提出的一些相關問題和反饋：
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.
使用調查和訪談中的報告，我創建了一個用戶角色，體現了目標受眾的特征。 創建的用戶角色有助于我更好地理解我要解決的問題。
用戶流 (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.
該應用程序的結構設計可以減少用戶完成訂單的操作，只需四次單擊即可訂購一餐，這非常簡單且最少。
用戶情節提要和草圖 (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.
在草繪過程中進行了幾次迭代之后，我能夠提出一種解決方案，以獲得更好的食物跟蹤體驗。
線框 (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.
在此過程中，我精心設計了每個屏幕如何連接在一起以提供無縫流暢的體驗。
高保真度和原型設計 (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.
如果用戶想獲得他/她想要訂購的食物的更多詳細信息，則可以通過在食物選擇頁面上向右滑動(從左數第三個屏幕)，用戶可以查看用來做飯的食材。
追蹤訂單 (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連接的情況下，可以選擇將文本消息定期發送給用戶以根據估計的到達時間跟蹤訂單。
原型制作 (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)
設計工具 (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
總結
以上是生活随笔為你收集整理的ux和ui_设计更好的结帐体验-UX / UI案例研究的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [html] 编写一个布局，让文字环绕
- 下一篇： cad隐藏图层命令快捷键_CAD各种插件