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創(chuàng)建和管理的Plated Cuisine Restaurant的食品訂購和交付應(yīng)用程序。
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.
關(guān)于Rayo的簡短背景Rayo Odusanya畢業(yè)于美國路易斯維爾的沙利文大學(xué)。 作為家庭中唯一的女孩，她在特殊場合追隨母親為親戚和大家庭做美食。 畢業(yè)后，她決定回到拉各斯開張生意。 Rayo融合了非洲和外國美食，完全掌握了烹飪美食的藝術(shù)。
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.
該應(yīng)用程序允許用戶直接從他們的辦公室訂購各種美味佳肴中的食物，并提供跟蹤他們的訂單和建議用餐組合的方法。 該企業(yè)特定于其受眾，他們是拉各斯州的工人階級公民。
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.
隨著巨型食品應(yīng)用程序(如Jumia foods，Bukka小屋，乞力馬扎羅山等)在市場上占據(jù)主導(dǎo)地位，大多數(shù)用戶抱怨這些應(yīng)用程序的使用體驗使其難以使用。 大多數(shù)用戶抱怨(假設(shè)這是面臨的挑戰(zhàn))瀏覽應(yīng)用程序有多難(難忘)，不良的用戶界面(不一致的設(shè)計)，復(fù)雜的結(jié)帳系統(tǒng)，尤其是無法跟蹤其訂單。
These are the UX/UI challenges that I have decided to improve on, along with an order tracking system, in this case study.
在本案例研究中，這些是我決定改進(jìn)的UX / UI挑戰(zhàn)，以及訂單跟蹤系統(tǒng)。
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.
為了進(jìn)行這項研究，將使用Plated Cuisine來描述廚師用來提供服務(wù)的應(yīng)用程序。 Plated Cuisine Restaurant將作為Rayo管理的餐廳。
目標(biāo)與目的 (Goals and Objectives)
- To improve and design a better food tracking experience. 改善和設(shè)計更好的食物跟蹤體驗。
- Mobile design approach. 移動設(shè)計方法。
- Minimal UI (modern and fresh) 最小的UI(現(xiàn)代和新鮮)
- Easy navigation throughout the app, fewer user action approach. 在整個應(yīng)用程序中輕松導(dǎo)航，減少用戶操作方法。
了解問題 (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:
解決方案是為想要向目標(biāo)受眾(工人階級)提供餐飲服務(wù)的新興廚師設(shè)計應(yīng)用程序。 我的第一步是使自己熟悉Plated Cuisine和業(yè)務(wù)流程。 通過在辦公室與她進(jìn)行面試，我了解到以下幾點：
- Her business perspective, goals & objectives 她的業(yè)務(wù)遠(yuǎn)景，目標(biāo)和目的
- The core purpose of this app which is “Comfort at your office” 這個應(yīng)用程序的核心目的是“讓您的辦公室舒適”
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.
吸收了所有信息之后，我便能夠?qū)㈨椖糠纸鉃槟K，這使我可以密切關(guān)注甚至是微小的細(xì)節(jié)。 這樣做的本質(zhì)是為我提供必要的信息，以供使用并為用戶提供解決方案。
研究與分析 (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:
現(xiàn)在，我對餐盤料理有了更好的了解，我開始進(jìn)行競爭分析，以了解哪些公司/應(yīng)用程序目前正在食品配送領(lǐng)域主導(dǎo)市場，了解其模式并得出相關(guān)發(fā)現(xiàn)，例如：
- Why are users currently using this app? Is it the brand image? Food quality? 為什么用戶當(dāng)前正在使用此應(yīng)用程序？ 是品牌形象嗎？ 食物品質(zhì)？
- Current issues users are facing using these applications. 用戶使用這些應(yīng)用程序時面臨的當(dāng)前問題。
- Specific issues relating to the food tracking system. 與食品跟蹤系統(tǒng)有關(guān)的特定問題。
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:
在得出結(jié)論之后，我開始在全球范圍內(nèi)進(jìn)行研究，以了解新功能，并與設(shè)計風(fēng)格和趨勢保持聯(lián)系。 我的重點是改進(jìn)食品配送跟蹤系統(tǒng)，通過研究發(fā)現(xiàn)，用戶為什么會基于一些重復(fù)出現(xiàn)的問題而放棄或取消訂單：
- Price discrepancies, which makes the users unhappy 價格差異，使用戶不滿意
- Users confused about when and how long their food would get to them 用戶對他們的食物何時到達(dá)多久感到困惑
Dispatch riders not conversant with proper navigation systems like google, which leads to unoptimised routes = unhappy customer.
派遣不熟悉google等適當(dāng)導(dǎo)航系統(tǒng)的騎手，這會導(dǎo)致路線未優(yōu)化=客戶不滿意。
- Quality of food delivered (since most apps in question offer food services from different vendors) 交付食物的質(zhì)量(因為大多數(shù)有問題的應(yīng)用程序提供來自不同供應(yīng)商的食物服務(wù))
- Complicated menus 復(fù)雜的菜單
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歲)進(jìn)行了一次小型調(diào)查，我需要他們?nèi)粘；顒又械母鄶?shù)據(jù)，以及他們忙碌的日程中訂購食物如何影響他們的日常活動，這使我能夠得出相關(guān)結(jié)論，以下是我的發(fā)現(xiàn)：
Here are some of the relevant questions I asked and some feedbacks:
以下是我提出的一些相關(guān)問題和反饋：
Some of the responses:
一些回應(yīng)：
“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點工作。 在坐了幾個小時后，我現(xiàn)在沒有時間或精力去買食物哈哈，我現(xiàn)在要在拉各斯的陽光下走嗎？ 大聲笑不，謝謝。 嗯，我用的是朱米亞和乞力馬扎羅。 好吧，不知道什么時候能買到食物讓我感到沮喪，所以我通常很早點菜。
“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”
“我對所有這些食物應(yīng)用程序感到厭倦，因為點餐而感到壓力，不知道是否已經(jīng)派出我的食物或到達(dá)辦公室需要多長時間。 我總是在旅途中，所以當(dāng)我在辦公室外的會議上時，我喜歡它，我可以在辦公室點菜并通過應(yīng)用進(jìn)行跟進(jìn)，而不必致電”
“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”
“好吧，我對所點的食物非常挑剔，所以，如果您的食物質(zhì)量很好？ 當(dāng)然，我會再次點菜。 我的日程有時很忙，我可以從早上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在其競爭對手中脫穎而出，從而為用戶創(chuàng)造更好的體驗。 為了賦予我的學(xué)習(xí)個性，我創(chuàng)建了一個用戶角色。
用戶角色 (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.
使用調(diào)查和訪談中的報告，我創(chuàng)建了一個用戶角色，體現(xiàn)了目標(biāo)受眾的特征。 創(chuàng)建的用戶角色有助于我更好地理解我要解決的問題。
用戶流 (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.
此過程全都涉及定義板式菜肴的流程，從而為應(yīng)用程序的布局和結(jié)構(gòu)帶來更多見解。 這有助于為應(yīng)用程序定義導(dǎo)航流程，旨在使流程和步驟非常簡單，對用戶而言令人難忘，從而增加了交互性。 首次使用該應(yīng)用程序時，用戶(在本例中為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.
該應(yīng)用程序的結(jié)構(gòu)設(shè)計可以減少用戶完成訂單的操作，只需四次單擊即可訂購一餐，這非常簡單且最少。
用戶情節(jié)提要和草圖 (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.
為這個案例研究創(chuàng)建一個故事板和草圖，幫助我通過(Zik)向用戶強(qiáng)調(diào)了他的旅程，從而為我提供了更明確的上下文概念，并指出了可能發(fā)生的挑戰(zhàn)或用戶無需考慮的挑戰(zhàn)。
After several iterations in the sketching process, I was able to come up with a solution for a better food tracking experience.
在草繪過程中進(jìn)行了幾次迭代之后，我能夠提出一種解決方案，以獲得更好的食物跟蹤體驗。
線框 (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.
上面的草圖旨在為最初研究中發(fā)現(xiàn)的痛點提供解決方案。 這是低保真線框的一種形式，它使我對界面的外觀有了更清晰的了解，還涵蓋了基本的內(nèi)容結(jié)構(gòu)。
During this process, I crafted out how each of the screens connects together to give a seamless and smoother experience.
在此過程中，我精心設(shè)計了每個屏幕如何連接在一起以提供無縫流暢的體驗。
高保真度和原型設(shè)計 (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.
使用從以上草圖，用戶流程和線框獲得的所有信息，我能夠?qū)⑺鼈冝D(zhuǎn)換為應(yīng)用程序的高保真視覺表示。 通過使用冷色和中性色，我可以提出一種新穎和最小的設(shè)計。
點食物 (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.
首次用戶啟動應(yīng)用程序時，將顯示啟動屏幕，然后將用戶重定向到注冊頁面。 在注冊過程之后，用戶將被定向到主頁，可以在其中進(jìn)行來自各種美食的訂單。
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).
在主屏幕上，用戶可以選擇自己喜歡的菜，用戶也可以在一個屏幕上添加餐點或飲料以補(bǔ)充餐點。 用戶還可以根據(jù)自己的心情在深色和淺色🌚🌚模式之間進(jìn)行選擇。 同樣，在結(jié)帳時，用戶可以決定在他們的訂單中添加更多菜肴。
Depending on the time of the day the app suggests different meal options to the user to make the selection better.
根據(jù)一天中的時間，應(yīng)用程序會向用戶建議不同的用餐選擇，以使選擇更好。
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.
用戶可以設(shè)置自己想經(jīng)常點的特定餐點。 首次用戶啟動應(yīng)用程序時，他/她可以單擊“自定義”，這將顯示完整菜單，鼓勵他們選擇所需的組合。 這將使訂購過程更快，更簡單。
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.
如果用戶想獲得他/她想要訂購的食物的更多詳細(xì)信息，則可以通過在食物選擇頁面上向右滑動(從左數(shù)第三個屏幕)，用戶可以查看用來做飯的食材。
追蹤訂單 (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可以安心開會)。 下訂單后，將顯示一個確認(rèn)屏幕，為用戶提供跟蹤訂單的選項。 當(dāng)用戶單擊“跟蹤我的訂單”按鈕時，將顯示一個顯示訂單進(jìn)度的屏幕，向用戶提供有關(guān)何時完成訂單的想法。
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.
發(fā)出訂單時，將通知用戶并可以跟蹤騎手的運動，用戶也可以更新其當(dāng)前位置。 在跟蹤騎手的運動時，用戶可以選擇呼叫。
After an order has been completed a notification would be sent to the user encouraging the user to review the meal and riders performance.
在完成訂單后，將向用戶發(fā)送通知，鼓勵用戶查看餐食和騎手的表現(xiàn)。
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)
為了方便跟蹤和導(dǎo)航，一旦下訂單，單擊該圖標(biāo)時，屏幕上右上角會顯示一個導(dǎo)航圖標(biāo)，顯示正在處理的當(dāng)前訂單(可以在應(yīng)用程序的任何位置進(jìn)行訪問，只要有訂單即可正在處理)
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連接的情況下，可以選擇將文本消息定期發(fā)送給用戶以根據(jù)估計的到達(dá)時間跟蹤訂單。
原型制作 (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(需要盡快升級)進(jìn)行測試，但屏幕的設(shè)計與iPhone X的寬度和高度相同。
時尚指南 (Style Guide)
設(shè)計工具 (Design tool)
Figma. Both prototyping and design were done with Figma
Figma。 原型和設(shè)計均由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.
進(jìn)行此設(shè)計練習(xí)是一次了不起的經(jīng)歷。 我敢肯定，我剛剛接觸了交付生態(tài)系統(tǒng)的表面并解決了潛在的問題。 通過將Plated Cuisine從概念轉(zhuǎn)變?yōu)樵?#xff0c;我學(xué)到了很多東西。 感謝您的閱讀，希望您喜歡它。
翻譯自: https://uxdesign.cc/ui-ux-case-study-designing-a-better-checkout-experience-de91b46b97e8
ux和ui
總結(jié)
以上是生活随笔為你收集整理的ux和ui_设计更好的结帐体验-UX / UI案例研究的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [html] 编写一个布局，让文字环绕
- 下一篇： cad隐藏图层命令快捷键_CAD各种插件