ux和ui_設計社交餐廳策展應用程序— UX / UI案例研究

ux和ui

Sabor, which translates from “taste” or “flavor” in Spanish, is a concept for an iOS app designed to provide users with honest, reliable and relatable restaurant recommendations from friends and family. It is a social restaurant curation application that connects similar people — allowing them to easily recommend a restaurant, get recommendations for any cuisine, and keep track of the places they love to eat.

Sabor(西班牙語)翻譯為“味道”或“風味”,是iOS應用程序的概念,旨在為用戶提供來自親朋好友的誠實,可靠和相關的餐廳推薦。 這是一個社交餐廳管理應用程序,可將相似的人聯系在一起-允許他們輕松推薦餐館,獲得任何美食的推薦,并跟蹤他們喜歡吃飯的地方。

The Problem: We communicated with over 130 people who made it clear that they put little faith in online recommendation and review platforms. Instead, they put far more weight on recommendations from friends or family. This can be attributed to people’s lack of trust in online reviews, frustration with online review platforms from outdated information or an overload of notifications, and the high barrier to sharing a review. People also indicated they have a problem of not knowing the best people to ask for recommendations amongst their social circles, but they desire shared experiences with their friends who have similar tastes and demographics. Lastly, people like to be able to easily see key information such as where a place is and how convenient it is to get there when they receive a recommendation from anyone.

問題:我們與130多人進行了交流,他們明確表示他們對在線推薦和評論平臺不信任。 相反,他們更加重視朋友或家人的推薦。 這可能歸因于人們對在線評論的不信任,過時的信息使在線評論平臺受挫或通知過多,以及共享評論的障礙很大。 人們還表示,他們有一個問題,就是不認識社交網絡中最優秀的人來尋求建議,但他們希望與具有相似品味和人口統計特征的朋友分享經驗。 最后,人們希望能夠輕松地看到關鍵信息,例如當收到任何人的推薦時,地點在哪里以及到達那里的方便程度。

Our Solution: Sabor is designed to address these problems in a personal and efficient manner. We created an experience that gives users a place to start new discussions with friends about different restaurants in any area, and also quickly share recommendations with low friction and maintain a location-based wishlist. Users have a personal stake in the application by allowing them to build their catalog of restaurants in an easy-to-navigate map view.

我們的解決方案: Sabor旨在以個人有效的方式解決這些問題。 我們創造了一種體驗,使用戶能夠與朋友就任何區域的不同餐廳展開新的討論,并能以低摩擦快速分享推薦并維持基于位置的心愿單。 通過允許用戶在易于導航的地圖視圖中建立餐廳目錄,用戶對應用程序具有個人利益。

The Team: Alex Schumacher and I worked as a team over the last three weeks of our Georgia Tech UX/UI Design bootcamp to present an MVP proposal. We both were UX/UI Designers and worked side by side through each step of the design process from research to high fidelity prototyping.

團隊: Alex Schumacher和我在佐治亞州技術UX / UI設計訓練營的最后三個星期中以團隊的形式提出了MVP提案。 我們都是UX / UI設計師,并從設計到高保真原型的設計過程的每個步驟并肩工作。

Timeline: 3 Weeks

時間表: 3周

Tools: Miro, Figma, R Studio, Mapsicle, Angle, Google Drive, Google Forms, Google Docs, Trello, Zoom, Wireframing, Prototyping, User Scenarios, User Flow, Usability Testing

工具: Miro,Figma,R Studio,Mapsicle,Angle,Google Drive,Google Forms,Google Docs,Trello,Zoom,線框圖,原型,用戶場景,用戶流程,可用性測試

我們設計了什么 (What We Designed)

Image for post

我們如何到達那里 (How We Got There)

Image for post

總覽 (Overview)

  1. Before even beginning the project, when Alex and I first decided to work together, we knew we wanted to place a heavy emphasis on the discovery phase. As the restaurant review industry is already fairly crowded, doing so would allow us to really dive into the existing industry problems and produce data-backed solutions. We started the three-week project with interview and survey planning by creating carefully crafted questions to be able to extract meaningful qualitative and quantitative insight. We constructed an affinity diagram to be able to organize people’s responses into actionable problems. We then used this insight to define the “people problems” (Thanks for showing us this term, Zack), and how we know that they are problems based on our research.

    甚至在開始項目之前,當我和亞歷克斯最初決定合作時,我們就知道我們想著重于發現階段 。 由于飯店評論行業已經相當擁擠,因此這將使我們能夠真正深入研究現有的行業問題并提供數據支持的解決方案。 我們通過創建精心設計的問題開始了為期三周的項目,進行了訪談和調查計劃,從而能夠提取有意義的定性和定量見解。 我們構建了一個親和圖 ,可以將人們的React組織成可行的問題。 然后,我們利用這種見解來定義“人員問題” (感謝您向我們展示這個術語, Zack ),以及根據我們的研究我們如何知道它們是問題

  2. From these “people problems,” we established our target audience as well as our business and product goals. Lastly in the definition phase, we determined success metrics that would be used if we decided to ship Sabor.

    通過這些“人員問題”,我們確定了目標受眾以及我們的業務和產品目標 。 最后,在定義階段,我們確定了決定發布Sabor時將使用的成功指標

  3. To brainstorm, we spent 30 minutes jotting down anything we could think of that our users might like about existing platforms or want in a new one. We also jotted down some bigger picture ideas that may be useful to help frame a solution. We then created a feature prioritization matrix to decide which of our ideas would have the highest impact on our users and therefore we should focus on for our Minimum Viable Product (MVP). Lastly, we created user scenarios for both of our target users to illustrate how and why they might use our app.

    為了集思廣益,我們花了30分鐘記錄下所有我們認為用戶可能喜歡的平臺或想要的新平臺。 我們還記下了一些更大的構想,這些構想可能有助于制定解決方案。 然后,我們創建了功能優先級排序矩陣,以確定我們的哪些想法會對用戶產生最大的影響,因此我們應該關注最小可行產品(MVP)。 最后,我們為兩個目標用戶創建了用戶方案,以說明他們如何以及為何使用我們的應用程序。

  4. We created an initial wireframe/low fidelity prototype by implementing the features we decided had a high impact on our users. High impact features were determined by taking into consideration our goals and the “people problems.”

    我們通過實施我們認為對用戶產生重大影響的功能,創建了初始線框/低保真度原型 。 通過考慮我們的目標和“人員問題”來確定高影響力功能。

  5. We conducted usability testing on five users to help us determine our success in the low fidelity prototype and where we can improve in the high fidelity prototype.

    我們對五個用戶進行了可用性測試 ,以幫助我們確定我們在低保真度原型中的成功以及在高保真度原型中可以改進的地方。

  6. Lastly, with the categorized user feedback, we created the high fidelity prototype using our UI Style Guide. Our goal was to implement as many changes as we could to accommodate the feedback without adding too many features to the MVP.

    最后,根據分類的用戶反饋,我們使用《 UI樣式指南》創建了高保真原型 。 我們的目標是在不增加MVP太多功能的情況下,進行盡可能多的更改以適應反饋。

發現 (Discovery)

競爭對手分析 (Competitor Analysis)

Our first step was seeing what‘s already out there. While this industry is very expansive, we decided to focus on four key players: Yelp, Google Maps, The Infatuation, and Foursquare. We researched online and sifted through dozens of app store reviews and summarized the pros and cons below:

我們的第一步是查看那里已經有什么。 盡管這個行業非常廣闊,但我們決定專注于四個主要參與者:Yelp,Google Maps,Infatuation和Foursquare。 我們在網上進行了調查,并篩選了數十個應用商店評論,并總結了以下利弊:

Image for post
Competitor Analysis
競爭對手分析

原型角色 (Proto Persona)

Next, we decided who we thought our users would be. We both discussed issues we’ve had in the past when it comes to finding restaurants, and so we combined our opinions into one, completely biased, proto persona: Daniel Crenshaw. Daniel Crenshaw is a 27 year old from Atlanta, GA who loves being social and hanging out with friends. He doesn’t consider himself a foodie, but he enjoys being the one who recommends trendy activities and places. Daniel sometimes has problems finding new places to try, especially when he’s not in areas he is familiar with. He sometimes looks up reviews online but they aren’t very reliable and don’t really reflect his demographic or tastes. He sees cool experiences on his friends’ Instagram or Snapchat stories, but doesn’t know where they are. If he does find these places, he doesn’t know what to get that he knows he’ll enjoy. His goals are to find new places to try that he will enjoy and be able to keep track of places he has been to for future reference.

接下來,我們確定了我們認為用戶會是誰。 我們倆都討論了過去在尋找餐廳時遇到的問題,因此我們將我們的觀點組合成一個完全有偏見的原型角色:Daniel Crenshaw。 丹尼爾·克倫肖(Daniel Crenshaw)今年27歲,來自喬治亞州亞特蘭大,喜歡社交和與朋友聚會。 他不認為自己是美食家,但他很樂于推薦時尚活動和地點。 丹尼爾有時會在尋找新的嘗試方面遇到困難,尤其是在他不熟悉的領域時。 他有時會在網上查找評論,但評論不是很可靠,也無法真正反映出他的人口統計信息或口味。 他在朋友的Instagram或Snapchat故事中看到了很酷的經歷,但不知道他們在哪里。 如果他確實找到了這些地方,他不知道會得到什么,他知道自己會喜歡。 他的目標是找到可以嘗試的新地方,并能夠追蹤到他去過的地方以供將來參考。

Image for post

研究計劃 (Research Plan)

Using Daniel Crenshaw as an ideal target user, we constructed a research plan to gain more insight into what the problems are when it comes to food recommendation apps. We focused on the following topics:

我們使用Daniel Crenshaw作為理想的目標用戶,制定了一項研究計劃,以更深入地了解食品推薦應用程序中存在的問題。 我們專注于以下主題:

  1. How do people currently go about finding new restaurants?

    人們現在如何尋找新餐廳?
  2. How do they choose to what to eat on any particular night?

    他們如何選擇特定夜晚的食物?
  3. The last time a person tried a new restaurant, how did they discover it and decide on it?

    一個人最后一次嘗試新餐廳時,他們是如何發現并決定的?
  4. How do people recommend a restaurant to others? When do they give unsolicited recommendations and when are they asked for their opinions?

    人們如何向他人推薦餐廳? 他們什么時候提出主動建議,什么時候征求他們的意見?
  5. What issues exist with current food recommendation platforms?

    當前的食品推薦平臺存在哪些問題?
  6. What do people feel is missing from these platforms?

    人們覺得這些平臺缺少什么?
  7. What do other platforms do that draws people to them?

    還有哪些其他平臺可以吸引人們呢?

Questions 1–4 have a purpose of getting us to understand the underlying thought process that goes into deciding on a new restaurant and sharing great restaurants with others. Our goal is to be able to incorporate this thought process into the experience that we create.

問題1-4的目的是使我們了解決定新餐廳和與他人共享好餐廳所涉及的基本思維過程 。 我們的目標是能夠將這種思考過程納入我們創造的體驗中。

Questions 5–7 are more targeted towards the current industry. Here, we want to understand what problems exist in the current, more widely used platforms, and uncover the pros and cons of them to gauge where there is space in the industry to grow.

問題5–7更針對當前行業 。 在這里,我們想了解當前使用更廣泛的平臺中存在哪些問題,并找出它們的優缺點,以評估行業中有哪些地方可以增長。

面試 (Interview)

We conducted ten (10) interviews to get qualitative data. The interview was broken down into three parts: introduction questions, thought process questions, and current industry questions. Our purpose was to address the above research questions and gain insight into how people currently go about finding new restaurants and what issues they have, if any.

我們進行了十(10)次訪談,以獲取定性數據。 訪談分為三個部分: 簡介問題,思考過程問題和當前行業問題 。 我們的目的是解決上述研究問題,并深入了解人們當前如何尋找新餐廳以及他們有什么問題(如果有)。

  • The introduction questions were ice breaker questions to get an understanding of who our users were. We asked about hobbies, typical week/weekend, and how they socialize with friends.

    簡介問題是破冰船問題,以了解我們的用戶是誰。 我們詢問了愛好,典型的一周/周末以及他們如何與朋友社交。

  • The thought process questions are exactly as they sound — we had a goal of understanding the steps that people take to recommend a restaurant, receive a recommendation, and decide on a restaurant. We also hoped to understand how they use current applications/other means to find restaurants, and what was missing from their current way of doing these things.

    思考過程中的問題完全符合他們的想法 -我們的目標是理解人們推薦餐廳,接受推薦以及決定餐廳的步驟。 我們還希望了解他們如何使用當前的應用程序/其他方式查找餐館,以及他們目前做這些事情的方式所缺少的東西。

  • Lastly, the current industry questions dove further into what current apps/websites they use and why. Here, we looked for pain points that users have, why they have them, and potential ways to work around or mitigate these issues. We also gauged the interviewees’ opinions on the credibility of existing food review websites and apps and the desire for a more community-based platform.

    最后, 當前的行業問題進一步深入到他們目前使用哪些應用程序/網站以及原因。 在這里,我們尋找用戶遇到的痛點,他們為什么擁有這些痛點以及解決或緩解這些問題的潛在方法。 我們還評估了受訪者對現有食品評論網站和應用程序的信譽以及對基于社區的平臺的渴望的看法。

調查 (Survey)

The survey was created to gather quantitative data, and we recorded 122 responses. We used the survey to gather certain information like how often people will eat out/order in as opposed to cooking, gauge interest in trying new places to eat, and determine who people find to be their most credible source of food recommendations, amongst other things. We wanted to understand what motivated people to share reviews or recommend a restaurant.

該調查的創建是為了收集定量數據,我們記錄了122條回答。 我們使用該調查收集了某些信息,例如人們會多久外出吃飯/點菜而不是做飯,衡量對嘗試新飲食場所的興趣,并確定誰是他們最可靠的食物推薦來源,等等。 。 我們想了解促使人們分享評論或推薦餐廳的動機。

The last section of the survey was fourteen (14) Likert Scale questions. Here we asked users to rate their agreeability with statements such as “I value information from online food recommendations MORE than a friend’s recommendation” and “I think that online food recommendation sites and apps are credible and trustworthy.” We also wanted to know who posted reviews, and what they thought was important when recommending a restaurant. These questions also helped us understand people’s perception of online reviews.

調查的最后一部分是十四(14)個李克特量表問題。 在這里,我們要求用戶使用“我比在線食品推薦更重視信息,而不是朋友的推薦”“我認為在線食品推薦網站和應用程序可信且值得信賴”等表述來評價他們的同意程度 我們還想知道誰發表了評論,以及他們在推薦餐廳時認為重要的事情。 這些問題還幫助我們了解了人們對在線評論的看法。

Below is the age distribution of the 122 survey respondents. We recognize that these age groups may not be representative of a random population, because the biggest three categories are my age group, Alex’s age group, and both of our parents’ age groups (thank you for sharing our survey on Facebook, Mom!).

以下是122位受訪者的年齡分布。 我們認識到這些年齡段可能無法代表隨機人群,因為最大的三個類別是我的年齡段,亞歷克斯的年齡段以及父母雙方的年齡段(感謝您在Facebook上分享我們的調查,媽媽!) 。

Image for post
Survey Respondent Age Distribution
調查對象年齡分布

親和圖 (Affinity Diagram)

The next step was creating an affinity diagram in Miro by breaking down all of the interview response points and open-ended survey responses into their own post-it notes, and refactoring them to extract user insights. We only included eight (8) of the interviews in the affinity diagram because two of the interviews were conducted later on to collect more information. As you can see below, there are a lot of categories that we discovered from grouping the post-its and iterating. While we decided to move to the next step because of time constraints, we were able to extract six (6) overarching user insights that we framed as our “people problems.”

下一步是在Miro中創建親和圖,方法是將所有訪談答復點和開放式調查答復分解為自己的便箋,然后將其重構以提取用戶見解。 我們僅在親和圖中包含八(8)個訪談,因為稍后進行了兩個訪談以收集更多信息。 正如您在下面看到的,通過對便利貼進行分組和迭代,我們發現了很多類別。 由于時間限制,我們決定移至下一步,但我們能夠提取六(6)個總體用戶見解,這些見解被我們稱為“人員問題”。

Image for post
Affinity Diagram Before and After
前后親和圖

什么是“人員問題”? (What are the “people problems”?)

The six “people problems” that we decided to focus on for our app, Sabor, are:

我們決定針對我們的應用程序Sabor重點關注的六個“人員問題”是:

  1. Lack of Trust. “I do not trust random online reviews. I assign a lot more weight to friends’ reviews.”

    缺乏信任。 “我不信任隨機的在線評論。 我對朋友的評價給予了更多的重視。”

  2. Recommendation Friction. “The barrier for recommending a place is high to the point where taking action seems pointless.”

    建議摩擦。 “推薦地點的障礙到采取行動似乎毫無意義的地步。”

  3. Who knows what? “I don’t know which friends have been where, but I still want their input.”

    誰知道 “我不知道哪個朋友去過哪里,但我仍然希望他們的投入。”

  4. Shared Experiences. “If my friend has eaten at restaurant X but not Y, all else equal, I would choose to eat at X to have that shared experience.”

    共享的經驗。 “如果我的朋友在X餐廳吃飯而不是Y餐廳,那么其他條件都一樣,我會選擇在X餐廳吃飯以分享共同的經驗。”

  5. Spatial Awareness. “I want to know where things are. At the end of the day, it really comes down to the location of a place and its convenience.”

    空間意識。 “我想知道事情在哪里。 歸根結底,這實際上取決于一個地方的位置及其便利。”

  6. Notification Overload. “I do not like receiving so many notifications. I rarely ever respond to them and they get annoying.”

    通知超載。 “我不喜歡收到這么多通知。 我很少回應他們,他們變得煩人。”

我們怎么知道 這些是問題嗎? (How do we know these are problems?)

缺乏信任 (Lack of Trust)

  1. Only 10% of survey respondents value online reviews and opinions more than friend or family recommendations.

    只有10%的調查受訪者對在線評論和意見的評價高于對朋友或家人的推薦。
  2. Only 41% of survey respondents said that online reviews are credible or trustworthy.

    只有41%的受訪者表示在線評論是可信或可信賴的。
  3. Interviewees mentioned they want to veer away from bigger platforms because they are often fake (businesses pay people to leave positive reviews) or extremely polar — often from one bad experience.

    受訪者表示,他們希望偏離更大的平臺,因為它們通常是假的(企業付錢給人們留下正面評價)或極度兩極分化的-常常來自一種糟糕的經歷。
  4. Interviewees do not believe just anyone should be able to share their opinions online because they aren’t food critics. They also do not like these reviews because they come from people who more likely than not have different tastes.

    受訪者不相信任何人都可以在網上分享他們的觀點,因為他們不是食品評論家。 他們也不太喜歡這些評論,因為它們來自很有可能具有不同品味的人。

推薦摩擦 (Recommendation Friction)

  1. 80% of survey respondents will not review a restaurant online unless the experience was really, really bad or really, really good.

    80%的調查受訪者不會在線點評餐廳,除非體驗確實非常差或非常好。

  2. Interviewees in general said they did not post reviews because it felt too out of their way and they are lazy. Also, they felt as if their reviews “just get lost in a sea of reviews” and don’t matter.

    受訪者普遍表示,他們沒有發表評論,因為感覺太過分了,而且很懶。 而且,他們覺得自己的評論“只是迷失在評論的海洋中”,并不重要。
  3. People often lack a good incentive to post a review for a restaurant unless they had a really bad or really good experience.

    人們通常沒有很好的動機去為餐廳發表評論,除非他們有非常糟糕或非常好的經歷。
Image for post

Here, you can see that for every sizable age group except for 45–64 (and 35–44, but we had far fewer data points here), more respondents have never posted a review. We will come back to this point when we create our two user personas.

在這里,您可以看到,除了45-64歲(和35-44歲,但這里的數據點少得多)之外的每個年齡段,更多的受訪者從未發表過評論。 當我們創建兩個用戶角色時,我們將回到這一點。

誰知道 (Who knows what?)

  1. 96% of survey respondents said they would recommend a restaurant to a friend.

    96%的調查受訪者表示,他們會將餐廳推薦給朋友。
  2. 98% of survey respondents said they will try a restaurant based friend or family recommendations. One guy said he wouldn’t.

    98%的調查受訪者表示,他們將嘗試根據餐館的朋友或家人推薦。 一個人說他不會。
  3. The issue that interviewees mentioned is that they don’t know which of their friends have been to what places. They also do not know who the right person/people to ask would be, so it’s not easy to figure out who to get the best recommendations from.

    受訪者提到的問題是,他們不知道哪個朋友去過哪里。 他們也不知道應該問誰是合適的人,因此要弄清楚從誰那里得到最好的建議并不容易。
  4. With that all being said, as you can see below, an overwhelming majority of survey respondents said their preferred way of finding new restaurants they enjoy is through word of mouth. *Keep in mind this data was pulled from a checkbox question, so that is why the total tally of responses exceeds 122.

    綜上所述,正如您在下面看到的那樣,絕大多數調查受訪者表示,他們更喜歡通過口口相傳找到自己喜歡的新餐廳。 *請記住,此數據是從復選框問題中提取的,因此這就是為什么響應總數總計超過122。
Image for post

共同的經驗 (Shared Experiences)

  1. People prefer recommendations from friends and family over a random person because they know their friends and family have similar tastes.

    人們更喜歡朋友和家人的推薦,而不是隨便的人,因為他們知道朋友和家人的口味相似。
  2. People like to go to places that they know other people with similar demographics and tastes will also go to.

    人們喜歡去他們知道其他人口統計學和品味相似的人也會去的地方。
  3. People like to be able to get recommendations from others in their social circle. This allows them to relate more to the experience someone is sharing with them and trust that it might be something they will enjoy.

    人們喜歡能夠從社交圈中的其他人那里獲得推薦。 這使他們可以更多地與某人與他們分享的經驗聯系起來,并相信這可能是他們會喜歡的東西。
  4. Below, you can see that when people were asked which source of food recommendations they found to be the most credible, almost 100 out of 122 people said friends or family. We believe this has to do with shared experiences, in that there is a better understanding of tastes and preferences with the people you are close to and therefore people will receive better and more tailored recommendations from friends or family even if it’s not intentional.

    在下面,您可以看到有人被問到最可靠的食物推薦來源時,在122個人中有近100個人說是朋友或家人。 我們認為,這與共享的經驗有關,因為與親近的人可以更好地了解自己的口味和喜好,因此,即使不是故意的,人們也會從朋友或家人那里收到更好,更個性化的建議。
Image for post

空間意識 (Spatial Awareness)

  1. Interviewees mentioned that location is an essential factor in deciding where to go.

    受訪者提到地點是決定去哪里的重要因素。
  2. They also want to be able to keep track of the places they go to.

    他們還希望能夠跟蹤他們去的地方。
  3. Survey respondents and interviewees mentioned they like to have access to a map, general price, and friends’ opinions on any particular restaurant.

    受訪者和受訪者表示,他們希望可以在任何特定餐廳使用地圖,一般價格以及朋友的意見。
  4. People want to be able to compare recommended places to ones they’ve been to.

    人們希望能夠將推薦的地點與他們去過的地方進行比較。

通知超載 (Notification Overload)

  1. Interviewees mentioned they do not like receiving the “did you just eat here?” or “remember to leave a review” notifications.

    受訪者說,他們不喜歡收到“您剛剛在這里吃飯嗎?”“記住留下評論”通知。

  2. They want to be able to have a functioning app without relying on notifications. They need another incentive to engage with the app.

    他們希望能夠有一個功能正常的應用程序,而不必依賴通知。 他們需要另一種動機來參與該應用程序。

附加見解 (Additional Insight)

A few more points worth mentioning that we found through interviews and the survey:

我們通過訪談和調查發現的其他幾點值得一提:

  1. The first decision people often make is deciding on a cuisine. For example, “I’m craving Chinese food, where should I get it?”

    人們經常做出的第一個決定是決定要吃什么。 例如, “我想吃中國菜,我應該去哪里買?”

  2. People mentioned they would like a peer-to-peer system where they can easily and effortlessly recommend and keep track of restaurants.

    人們提到他們希望有一個點對點系統,可以輕松,輕松地推薦并跟蹤餐廳。
  3. People want to be able to organize and find restaurants by cuisine.

    人們希望能夠通過美食來組織和查找餐館。
  4. Many places are often indistinguishable from one another. People want a way to get information on the unique aspects of each to make a decision. They can do this through more personal recommendations.

    許多地方往往彼此無法區分。 人們想要一種獲取有關每個方面的信息的方法來做出決定。 他們可以通過更多個人建議來做到這一點。

定義 (Definition)

Now that we’ve established what problems need to be addressed, we can determine our target users, our goals for meeting the needs of our target users, and our key performance indicators (success metrics). Based on the insight we extracted from the research phase, we have two users for whom we will be designing Sabor:

現在,我們已經確定了需要解決的問題,我們可以確定目標用戶,滿足目標用戶需求的目標以及關鍵績效指標(成功指標)。 根據我們從研究階段中獲得的見識,我們將為兩個用戶設計Sabor:

目標受眾1:時尚千禧一代 (Target Audience 1: The Trendy Millennial)

The first target user is Percy Robbins, a 25 year old millennial who loves to stay up to date on the latest trends and technology. Get to know Percy:

第一位目標用戶是25歲的千禧一代Percy Robbins ,他喜歡隨時了解最新趨勢和技術。 了解珀西:

  • He likes finding new places to eat with friends using minimal effort.

    他喜歡用最小的努力找到與朋友吃飯的新地方。

  • He wants to make quick decisions based on key information presented clearly to him.

    他希望根據清楚呈現給他的關鍵信息做出快速決策

  • He wants to go to places that he knows similar people enjoy. “Similar” means similar tastes and age and maybe even socioeconomic status.

    他想去他知道類似的人喜歡的地方 。 “相似”是指相似的口味和年齡,甚至可能具有社會經濟地位。

  • A problem he has is that he doesn’t think anyone online cares about his opinions.

    他的問題在于, 他認為沒有人在線上關心他的觀點。

  • Another problem he has is a hard time finding trendy places instead of just touristy spots.

    他遇到的另一個問題是很難找到時髦的地方,而不僅僅是旅游景點。

Here is a deeper dive into Percy’s persona:

以下是對Percy角色的更深入了解:

Image for post
UnsplashUnsplash

目標受眾2:社交潮一代 (Target Audience 2: The Social Boomer)

The second target user is Sarah Gardener, a 49 year old social boomer who enjoys patronizing local businesses and sharing great experiences with friends and family. Get to know Sarah:

第二個目標用戶是49歲的社交潮一代人Sarah Gardener ,他喜歡光顧本地企業,并與朋友和家人分享美好的經驗。 了解莎拉:

  • She wants to be able to make informed decisions.

    她希望能夠做出明智的決定。

  • She likes to know where places are for reference.

    她喜歡知道哪里可以參考。

  • She is not as tech-savvy as Percy, so she needs an easy-to-use interface.

    她不像Percy那樣精通技術,因此她需要一個易于使用的界面。

  • She loves sharing with her friends.

    喜歡與朋友分享。

  • She gets frustrated with fake online reviews and outdated information.

    對虛假的在線評論和過時的信息感到沮喪。

  • She never wants to waste time or money on a bad decision.

    她從來不想浪費時間或金錢去做一個錯誤的決定。

Here is a deeper dive into Sarah’s persona:

以下是對莎拉角色的更深入了解:

Image for post
UnsplashUnsplash

目標 (Goals)

With these two target users in mind, we came up with three (3) business goals and five (5) product goals to guide us through creating an experience.

考慮到這兩個目標用戶,我們提出了三(3)個業務目標和五(5)個產品目標,以指導我們創建體驗。

業務目標 (Business Goals)

  1. To foster a 100% peer-to-peer food recommendation app where there is no room for fake reviews or sponsored content.

    在沒有假評論或贊助內容的空間的情況下,培育100%對等食品推薦應用程序。
  2. To provide users with trustworthy and effortless reviews by connecting people with similar tastes and demographics.

    通過將具有相似品味和人口統計特征的人們聯系起來,為用戶提供值得信賴且毫不費力的評論。
  3. To create an experience that is not another messaging app

    創建不是另一個消息傳遞應用程序的體驗

產品目標 (Product Goals)

  1. To quickly ask friends for restaurant recommendations.

    快速向朋友詢問餐廳推薦。

  2. To provide a low friction way for users to recommend a restaurant.

    為用戶提供推薦餐廳的低摩擦方式

  3. To present key information such as location, general price, favorite dishes, and ambience in an easily interpretable manner.

    以易于理解的方式顯示關鍵信息,例如位置,一般價格,喜歡的菜肴和氛圍。

  4. To catalog recommendations by cuisine and add restaurants and recommendations to a map.

    要按美食分類推薦 ,并將餐廳和推薦添加到地圖。

  5. To incentivize users to use the app with minimal push notifications.

    激勵用戶使用帶有最少推送通知的應用程序。

我們如何知道我們是否成功? (How Will We Know if We Are Successful?)

If we are successful in achieving these goals for our MVP proposal, each of the defined “people problems” will have been addressed. Further, if we were to ship Sabor, a few ways we would be able to measure our success are:

如果我們能夠成功實現MVP提案中的這些目標,那么每個定義的“人員問題”都將得到解決。 此外,如果我們要運送Sabor,我們可以通過以下幾種方法來衡量我們的成功:

  • A monthly upward trend in the number of users

    用戶數量呈逐月上升趨勢
  • A consistent upward trend in new interactions on a week-to-week basis

    每周新互動中的持續上升趨勢
  • A consistent upward trend of new restaurants cataloged by users on a week-to-week basis

    用戶按周分類的新餐廳的持續上升趨勢

These trends would be an indicator that the problems we’ve addressed have been satisfied.

這些趨勢將表明我們已解決的問題已得到滿足。

構想 (Ideation)

The next phase is the Ideation phase, and is where we did most of our brainstorming for the initial prototype. Our goal here was to decide which features will be in our proposed MVP and how our target users will use the app.

下一階段是構思階段,這是我們為初始原型進行大部分頭腦風暴的地方。 我們的目標是確定建議的MVP中將包含哪些功能,以及我們的目標用戶將如何使用該應用。

“我喜歡,我想要,如果呢?” (“I like, I want, What if?”)

To achieve this goal, we first did a brainstorming activity where we jotted down any idea we could think of that our target users may like about existing apps, may want in a new app, as well as broader ideas we could implement. Below is the result of our 30 minute brainstorming session which will be used to construct our feature prioritization matrix.

為了實現此目標,我們首先進行了頭腦風暴活動,其中記錄了我們可以想到的,目標用戶可能喜歡現有應用程序,可能想要使用新應用程序的任何想法,以及我們可以實施的更廣泛的想法。 以下是我們30分鐘的頭腦風暴會議的結果,該結果將用于構建我們的功能優先級排序矩陣。

Image for post
“I like, I want, What if?” Activity Results
“我喜歡,我想要,如果呢?” 活動結果

功能優先級 (Feature Prioritization)

Taking these ideas from our brainstorming session, we organized them into a feature prioritization matrix. The x-axis represents the impact on the users as it relates to our target users’ needs, and the y-axis is the priority of a particular feature for our MVP as it relates to our goals. Here is the result:

從我們的頭腦風暴會議中汲取這些想法,我們將它們組織到了功能優先級排序矩陣中。 x軸代表與目標用戶需求相關的對用戶的影響,y軸代表與目標相關的MVP特定功能的優先級。 結果如下:

Image for post
Feature Prioritization Matrix
功能優先級矩陣
Image for post
Examples of our high impact, high priority features
高影響力,高優先級功能的示例

Some of the other features we decided to include are:

我們決定包括的其他一些功能包括:

  • Having key information presented clearly when looking for a restaurant

    尋找餐廳時清楚地顯示關鍵信息
  • Being able to visualize where restaurants are in relation to me

    能夠想象餐館與我之間的關系
  • Being able to easily ask for recommendations and get them instantly

    能夠輕松地提出建議并立即獲得建議
  • Tagging restaurants by cuisine type

    按美食類型標記餐廳
  • Seeing which friends have favorited and/or reviewed which restaurants

    查看哪些朋友最喜歡和/或查看哪些餐廳
  • Being able to easily navigate through restaurants and cuisines

    能夠輕松瀏覽餐廳和美食
  • Having a short-hand way of recommending and receiving recommendations for restaurants

    快速推薦和接收餐廳推薦的方法

用戶方案 (User Scenarios)

Lastly in the ideation phase, we came up with a user scenario for both Percy Robbins and Sarah Gardener. These scenarios reflect one way they could use Sabor based on their needs. (Please enjoy my new cartooning skills, courtesy of Udemy).

最后,在構思階段,我們為Percy Robbins和Sarah Gardener提出了一個用戶場景。 這些場景反映了他們可以根據自己的需求使用Sabor的一種方式。 (感謝Udemy的幫助,請享受我的新漫畫風格)。

Image for post
Percy utilizes the existing inquiry responses to find a new Chinese restaurant to try
珀西(Percy)利用現有的查詢答復找到一家新的中餐廳以嘗試
Image for post
Sarah starts a new discussion where friends can reply with their Italian recommendations
莎拉開始進行新的討論,朋友們可以在其中回復意大利的建議

低保真原型 (Low Fidelity Prototype)

Our initial user flow for deciding on a restaurant is shown in the image below. The app was organized to have three tabs from left to right: a map to catalog restaurants a user has been to as well as restaurants on their wishlist, an inquiry tab to ask questions and get quick recommendations, and a profile tab to manage settings, friends, and to logout.

下圖顯示了我們用于決定餐廳的初始用戶流程。 該應用的組織結構從左到右包含三個標簽:一個地圖,用于對用戶曾經去過的餐廳以及其愿望清單上的餐廳進行分類;一個查詢標簽,用于詢問問題并獲得快速建議;一個配置文件標簽,用于管理設置,朋友,并注銷。

Image for post
Initial User Flow
初始用戶流
  • Map Tab: Our reasoning for making the user flow as such is that when a user opens the app, they can see new recommendations from friends right there on the map. They can see which ones they like and add them to their wishlist. A user would open the app to decide where to eat, so they can look through places they already know. Another reason for having the map is that it gives users a personal stake in the app. It will incentivize the users to return without sending too many push notifications to remind them to open the app. Allowing users to build their map will have them invested in the app and therefore want to continue to find new restaurants to add to it (similar to Untappd’s model). The data for the map can be drawn from the Google Maps API as we just need name and location; the rest is user input. A future improvement here is to gamify the map and have achievements and goals such as “reviewing a restaurant in ten (10) different states” or becoming a global eater by “trying fifteen (15) different cuisines,” etc.

    地圖標簽:我們之所以要吸引用戶,是因為當用戶打開應用程序時,他們可以在地圖上看到好友的新推薦。 他們可以查看自己喜歡的商品并將其添加到愿望清單。 用戶可以打開該應用程序來決定吃飯的地方,以便他們可以瀏覽他們已經知道的地方。 擁有地圖的另一個原因是,它為用戶提供了應用程序中的個人權益 。 它將激勵用戶返回而不發送太多推送通知來提醒他們打開應用程序。 允許用戶建立自己的地圖將使他們投資該應用程序,因此希望繼續尋找要添加到其中的新餐廳(類似于Untappd的模型)。 可以從Google Maps API提取地圖數據,因為我們只需要名稱和位置即可; 其余的是用戶輸入。 這里的未來改進是將地圖游戲化,并取得一些成就和目標,例如“在十(10)個不同州審查餐廳”或通過“嘗試十五(15)種不同美食而成為全球美食者”等。

  • Inquiry Tab: If they want to find something new, they can go to the second tab to ask their friends or browse other inquiries that have been posted. Then, if they like anything they see there, they can favorite it and try it out. This user flow does not include responding to an inquiry, but that would just appear as a response button when a user taps on a specific inquiry.

    查詢標簽:如果他們想找到新的東西,他們可以轉到第二個標簽詢問朋友或瀏覽其他已發布的查詢。 然后,如果他們喜歡在那里看到的任何東西,則可以將其收藏并嘗試一下。 該用戶流不包括對查詢的響應,但是當用戶點擊特定的查詢時,它將僅顯示為響應按鈕。

  • Profile Tab: The last tab we have is the profile tab, but we don’t focus our usability testing tasks on the profile for the sake of the project’s scope — for now. The profile is where you can add/view friends as well as update settings and logout. For our MVP proposal, we do not have a major focus on friend’s profiles.

    配置文件選項卡:最后一個選項卡是配置文件選項卡,但是出于項目范圍的考慮,我們暫時不將可用性測試任務集中在配置文件上。 在個人資料中,您可以添加/查看朋友以及更新設置和注銷。 對于我們的MVP提案,我們并不主要關注朋友的個人資料。

Image for post
Image for post
Image for post
Image for post

低保真原型的可用性測試 (Usability Testing on Low Fidelity Prototype)

After we finished our low fidelity prototype, it was time to test it out and see where we can make improvements. We came up with seven (7) scenarios for the usability testing that covered the main functionalities of the app. We asked five (5) people who fit in one of the target audiences to complete the following tasks to the best of their ability. The tasks were related to each primary function of the app, including: asking friends for a recommendation for any cuisine, finding general information about a recommended restaurant, responding to a friend’s inquiry, adding a restaurant to your map, filtering the map by cuisine, adding a map to your wishlist, and finding what friends say about a restaurant on your wishlist.

在完成低保真度原型之后,是時候對其進行測試,看看可以在哪里進行改進了。 我們提出了七(7)個方案進行可用性測試 涵蓋了應用程序的主要功能。 我們邀請五(5)位適合目標受眾群體之一的人盡其所能完成以下任務。 這些任務與應用程序的每個主要功能相關,包括:向朋友詢問任何美食的建議,查找有關推薦餐廳的一般信息,回復朋友的詢問,在地圖上添加餐廳,按美食過濾地圖,在您的愿望清單中添加地圖,并在您的愿望清單中找到朋友對餐廳的評價。

測試反饋 (Testing Feedback)

Alex and I compiled the feedback from the usability testing and categorized it all by page as well as more general comments relating to the overall app.

Alex和我匯總了可用性測試的反饋,并按頁面將其歸類,以及與整個應用程序有關的更一般的評論。

總體 (Overall)

  • We should switch the map and the discussion page. The discussion page is really the primary function of the app as seen earlier in the user scenarios. Having the map as the primary page was our way of incorporating new recommendations easily, but we will have to find a new way to do that.

    我們應該切換地圖和討論頁面。 討論頁面實際上是該應用程序的主要功能,如先前在用戶場景中所示。 以地圖為主要頁面是我們輕松整合新建議的方法,但是我們將必須找到一種新的方法來做到這一點。
  • Also, we are now calling it the “Discussion” page instead of the “Inquiry” page, per a user’s suggestion.

    此外,根據用戶的建議,我們現在將其稱為“討論”頁面,而不是“查詢”頁面。
  • Some buttons were at the top of the screen, so we will be moving important buttons to be within thumb’s reach.

    一些按鈕位于屏幕頂部,因此我們將重要的按鈕移到拇指可及的范圍內。
  • We will be getting rid of the hashtag in front of cuisine tags. It did not add much value.

    我們將擺脫美食標簽前面的主題標簽。 它并沒有增加太多價值。

地圖標簽 (Map Tab)

  • The map should include the name of the restaurants under their pin.

    地圖上應在餐廳別針下方標明餐廳名稱。
  • We will add an “X” button to the cards when they are expanded to have a more clear way to close out of them.

    當卡片擴展時,我們將在卡片上添加一個“ X”按鈕,以更清晰地關閉它們。
  • Also, we will make the expanded restaurant info pages take up the full screen and not half of the screen.

    此外,我們將使展開的餐廳信息頁面占據整個屏幕,而不是整個屏幕的一半。
  • We should add the number of favorites a particular restaurant has.

    我們應該添加特定餐廳擁有的最愛數量。
  • Leaving a review should not be optional because they are short anyway and will improve the experience of the app.

    進行審核不應是可選的,因為它們總之會縮短,并會改善應用程序的體驗。
  • We should make the cuisine filter easier to reach.

    我們應該使美食過濾器更容易達到。
  • The wishlist button is currently a heart, but that was confusing to some. Maybe change it to a bookmark or star.

    心愿單按鈕目前是一顆心臟,但是這使某些人感到困惑。 也許將其更改為書簽或星號。

討論標簽 (Discussion Tab)

  • When responding to an inquiry, users wanted to be able to access their catalog to just tap something they’ve already written a review for. This will make recommending a place to friends even faster.

    在答復查詢時,用戶希望能夠訪問他們的目錄以僅點擊他們已經為其撰寫評論的內容。 這樣可以更快地向朋友推薦一個地方。
  • Like the map page, the add to wishlist/favorites button should include how many users have favorited a place.

    就像地圖頁面一樣,“添加到愿望清單/收藏夾”按鈕應包括有多少用戶收藏了一個地方。
  • We will change button text from “Share Inquiry” to “Ask Question” for clarity.

    為了清楚起見,我們將按鈕文本從“共享查詢”更改為“詢問問題”。
  • We will change “Friends Inquiries” and “My Inquiries” to “All Discussions” and “My Posts.”

    我們將“朋友查詢”和“我的查詢”更改為“所有討論”和“我的帖子”。
  • A user wants to be able to filter by cuisine on this page.

    用戶希望能夠在此頁面上按美食過濾。

用戶界面樣式指南 (UI Style Guide)

Before moving to the high fidelity prototype, we came up with our style guide. We recognize that many current food recommendation platforms incorporate some sort of red, and at the same time many social platforms incorporate the color blue. As we wanted this app to have a social ambience, we decided to make our color palette consist primarily of blues and grays while using red for selected states for the wishlist. We wanted to have a clean and modern interface that would be easy to navigate, so the majority of the app is white.

在轉向高保真原型之前,我們提出了樣式指南。 我們認識到,目前許多食品推薦平臺都包含某種紅色,與此同時,許多社交平臺都包含了藍色。 當我們希望該應用具有社交氛圍時,我們決定使調色板主要由藍色和灰色組成,同時將紅色用于愿望清單的選定狀態。 我們希望擁有一個易于瀏覽的簡潔現代界面,因此該應用程序的大部分為白色。

For the typeface, we decided to go with the default for iOS, SF Pro Display, and tried to follow the iOS guidelines for font sizes, though we adjusted the sizes when necessary. We thought using the default iOS typeface would help us achieve the clean and modern look that we are going for. The buttons all have a slight monochromatic gradient to also provide a modern aesthetic.

對于字體,我們決定使用iOS的默認字體SF Pro Display,并嘗試遵循iOS的字體大小準則,不過我們會在必要時進行調整。 我們認為使用默認的iOS字體將幫助我們獲得我們想要的干凈現代的外觀。 所有按鈕均具有輕微的單色漸變,以提供現代美感。

Image for post
UI Style Guide
用戶界面樣式指南

高保真原型 (High Fidelity Prototype)

Taking into consideration the feedback from usability testing, we created our high fidelity prototype. We also updated the user flow to represent these changes. While it may seem like a less intuitive flow, this is actually what the users who we spoke to preferred. They were thrown off-guard when the map was presented as the first screen, so this will allow them to see the discussions page right away and take immediate action. Also, the introduction of the new “Welcome Back” page is our way of allowing the user to see new recommendations and select ones they like before even entering the main screens of the app. The reason for including this page is because we originally had the new recommendations on the map which was the home page, but we want users to be able to see what they’ve missed right away.

考慮到可用性測試的反饋,我們創建了高保真原型。 我們還更新了用戶流程以表示這些更改。 盡管看起來好像不太直觀,但實際上這是我們與之交談的用戶的首選。 當地圖作為第一個屏幕出現時,他們措手不及,因此這將使他們可以立即查看討論頁面并立即采取行動。 另外,引入新的“ Welcome Back”頁面是我們允許用戶甚至在進入應用程序主屏幕之前就可以查看新推薦并選擇喜歡的推薦的方式。 之所以要包含此頁面,是因為我們最初在主頁上的地圖上有了新的建議,但是我們希望用戶能夠立即看到他們錯過的內容。

Image for post
Updated user flow to reflect implemented feedback from usability testing
更新了用戶流程以反映可用性測試中已實施的反饋

登錄流程 (Login Process)

For the login process, we made a few changes:

對于登錄過程,我們進行了一些更改:

  • We changed the layout to be less cluttered.

    我們更改了布局以減少混亂。
  • We separated the login process into separate email and password pages.

    我們將登錄過程分為單獨的電子郵件和密碼頁面。
  • We added the “Welcome Back” page to show new recommendations since a user last visited the app.

    我們添加了“歡迎回來”頁面,以顯示自用戶上次訪問該應用以來的新建議。
Image for post

入職流程 (Onboarding Process)

For the sake of avoiding redundancy, I do not show the sign up process here. It is similar to the login process, but we also ask for the user’s first and last name. Within the onboarding screens, we request access to users location, access to contacts to improve the experience of adding friends, and we request the ability to send push notifications. For the onboarding process, we made the following changes:

為了避免冗余,在此不顯示注冊過程。 它類似于登錄過程,但是我們也要求用戶的名字和姓氏。 在入門屏幕中,我們請求訪問用戶位置,訪問聯系人以改善添加朋友的體驗,并且我們請求發送推送通知的功能。 對于入職過程,我們進行了以下更改:

  • We rearranged onboarding screens to reflect the new user flow

    我們重新安排了入職屏幕,以反映新的用戶流
  • We added high fidelity mockups to onboarding screens

    我們在入門級屏幕上添加了高保真模型
  • We also added a blank state for the discussion page if you do not have any friends yet

    如果您還沒有任何朋友,我們還為討論頁面添加了空白狀態
Image for post
FreepikFreepik

開始新的討論 (Starting a New Discussion)

To start a new discussion, we made the following changes:

為了開始新的討論,我們進行了以下更改:

  • We moved the “+” button to be within thumb’s reach

    我們將“ +”按鈕移到了拇指可以觸及的范圍內
  • We changed “Share Inquiry” to “Ask Question” for more clarity.

    為了更清楚,我們將“共享查詢”更改為“詢問問題”。
  • You can now select your current location instead of having to search for a city. This saves some time for the user.

    現在,您可以選擇當前位置,而不必搜索城市。 這為用戶節省了一些時間。
  • When searching for a cuisine, users will begin to type in a desired cuisine and it will present options that the user may select. A future improvement here could be to add multiple cuisine filters to request a broader range of restaurants, such as “American” and “seafood” or “Spanish” and “tapas”.

    在搜索美食時,用戶將開始輸入所需的美食,并且它將顯示用戶可以選擇的選項。 未來的改進可能是添加多個美食過濾器,以請求更多種類的餐廳,例如“美式”和“海鮮”或“西班牙式”和“西班牙小吃”。
Image for post

推薦/加入收藏 (Favoriting a Recommendation/Adding to Wishlist)

To favorite a recommended restaurant and add it to your wishlist, we made the following changes:

為了收藏推薦的餐廳并將其添加到您的愿望清單,我們進行了以下更改:

  • We changed the heart icon to be a bookmark for more clarity. As mentioned before, users did not completely understand what the heart did.

    為了更清晰起見,我們將心臟圖標更改為書簽。 如前所述,用戶并沒有完全了解心臟的作用。
  • We now display the number of users who have favorited a recommendation and therefore have added it to their wishlist.

    現在,我們顯示已收藏推薦并將其添加到心愿單的用戶數。
Image for post

回應討論 (Responding to a Discussion)

For responding to a discussion, we made the following changes:

為了回應討論,我們進行了以下更改:

  • Changed “Recommend a Restaurant” button text to “Respond” for more clarity. One user said that he thought “Recommend a Restaurant” was completely separate from the discussion itself.

    為了更清晰,將“推薦餐廳”按鈕的文字更改為“回復”。 一位用戶說,他認為“推薦餐廳”與討論本身完全分開。
  • We made it so you can now recommend a restaurant you’ve been to with three taps. One to tap “Respond,” one to tap “Choose a restaurant from your catalog,” and one to tap the restaurant you’d like to recommend. This is great because you can provide a restaurant with your personal review with three taps.

    我們做到了,因此您現在只要三按一下,就可以推薦您去過的餐廳。 一個點擊“ Respond”,一個點擊“從目錄中選擇一家餐館”,另一個點擊您想要推薦的餐館。 這很棒,因為您可以通過三下水龍頭為餐廳提供個人評論。
Image for post

按美食過濾和切換心愿單 (Filtering by Cuisine and Toggling Wishlist)

Now onto the map tab. First, these are the changes we made to filtering by cuisine or displaying wishlist restaurants:

現在進入地圖標簽。 首先,這些是我們對按美食過濾或顯示愿望清單餐廳所做的更改:

  • We moved the “+” and wishlist button to the bottom right of the screen to be within thumbs reach, making the action easier to perform.

    我們將“ +”和“愿望清單”按鈕移到了屏幕的右下角,以使其觸手可及,從而使操作更容易執行。
  • We also moved the cuisine filters down to the bottom of the screen just above the tab bar so you can easily scroll through it with your thumb and select the cuisines you’d like.

    我們還將美食過濾器向下移動到了標簽欄上方的屏幕底部,因此您可以用拇指輕松滾動瀏覽并選擇所需的美食。
  • We added the names of restaurants under the pins for a smoother map experience

    我們在圖釘下添加了餐廳名稱,以提供更流暢的地圖體驗
Image for post

在地圖上添加餐廳 (Add a Restaurant to Your Map)

For adding a new restaurant to your map, these are the changes we made:

為了在地圖上添加新餐廳,這些是我們所做的更改:

  • Again, we moved the “+” button to the bottom right of the screen to be within thumb’s reach.

    再次,我們將“ +”按鈕移到屏幕的右下角,以使拇指觸手可及。
  • You can now select a restaurant within a user-specified radius to reduce the time of adding a place to map. It autofills the restaurant and cuisine entries when you select a restaurant.

    現在,您可以在用戶指定的半徑內選擇一家餐館,以減少添加地圖地點的時間。 選擇餐廳時,它將自動填充餐廳和美食條目。
  • Reviews are now required, but no longer than 100 characters. The gains from doing so outweigh the cost of time, per the users we tested. It will make a more seamless flow throughout the entire app and provide more information. Users suggested they would be fine doing it because it will be useful for them when they are building their map catalog as well.

    現在需要評論,但不能超過100個字符。 The gains from doing so outweigh the cost of time, per the users we tested. It will make a more seamless flow throughout the entire app and provide more information. Users suggested they would be fine doing it because it will be useful for them when they are building their map catalog as well.
Image for post

See Friends' Reviews for a Restaurant (See Friends’ Reviews for a Restaurant)

Lastly, this is how we improved the information presentation for a particular restaurant:

Lastly, this is how we improved the information presentation for a particular restaurant:

  • You can now see how many others have added a restaurant to their map or wishlist.

    You can now see how many others have added a restaurant to their map or wishlist.
  • We changed “What your friends say” to “What my friends say” for a more personal feel and clarity.

    We changed “What your friends say” to “What my friends say” for a more personal feel and clarity.
  • We made the restaurant information screen full-page instead of half of a page as it was in the low fidelity prototype. This made things feel less cluttered.

    We made the restaurant information screen full-page instead of half of a page as it was in the low fidelity prototype. This made things feel less cluttered.
  • We added a “X” button to more clearly close the full-screen page since dragging up/down was not intuitive to some users.

    We added a “X” button to more clearly close the full-screen page since dragging up/down was not intuitive to some users.
Image for post
We are not affiliated with any restaurants. I am unsure of Noodle Midtown’s true dining experience quality.
We are not affiliated with any restaurants. I am unsure of Noodle Midtown's true dining experience quality.

結論思想 (Concluding Thoughts)

To wrap up, Alex and I are extremely satisfied with how the high fidelity prototype turned out. Given more time, we may keep this project going and eventually ship it on the App Store. With some improvements, we truly believe it can be a useful way to find and share restaurants. For now, I want to reflect on this three-week journey so I can move forward as a better designer.

To wrap up, Alex and I are extremely satisfied with how the high fidelity prototype turned out. Given more time, we may keep this project going and eventually ship it on the App Store. With some improvements, we truly believe it can be a useful way to find and share restaurants. For now, I want to reflect on this three-week journey so I can move forward as a better designer.

What We Did Well (What We Did Well)

Like I said at the beginning of this case study, we really wanted to place a heavy emphasis on the research phase. We feel that we succeeded in doing so. We obtained very useful quantitative and qualitative data through our carefully crafted interview and survey questions.

Like I said at the beginning of this case study, we really wanted to place a heavy emphasis on the research phase. We feel that we succeeded in doing so. We obtained very useful quantitative and qualitative data through our carefully crafted interview and survey questions.

Second, we believe we did a solid job identifying the “people problems.” This was an extremely important step because it defined how we would be proceeding with the project. Being able to nail down the problems we were trying to solve helped shape our goals and our experience in its entirety.

Second, we believe we did a solid job identifying the “people problems.” This was an extremely important step because it defined how we would be proceeding with the project. Being able to nail down the problems we were trying to solve helped shape our goals and our experience in its entirety.

Third, we were able to create stories for two different target users and explain their goals and needs as it related to the “people problems”. We did our best to make sure there were no gaps in our user personas and that each aspect made complete sense in relation to their overall character.

Third, we were able to create stories for two different target users and explain their goals and needs as it related to the “people problems”. We did our best to make sure there were no gaps in our user personas and that each aspect made complete sense in relation to their overall character.

Fourth, we responded well to the usability testing feedback. We took the time to go through each test and extract the primary pain points, categorize them, and prioritize them in order to implement the changes in our high fidelity prototype.

Fourth, we responded well to the usability testing feedback. We took the time to go through each test and extract the primary pain points, categorize them, and prioritize them in order to implement the changes in our high fidelity prototype.

Lastly, we did well to implement a map feature despite the limiting prototyping abilities. We used Mapsicle which gave us the benefit of zooming in on where we wanted the map to show, but there is no way to navigate around a map in Figma which limited the experience in our prototype.

Lastly, we did well to implement a map feature despite the limiting prototyping abilities. We used Mapsicle which gave us the benefit of zooming in on where we wanted the map to show, but there is no way to navigate around a map in Figma which limited the experience in our prototype.

Where We Could Improve (Where We Could Improve)

Because time was of the essence, we had to leave out some steps of the process in order to complete the project. One mistake was leaving out sketching during brainstorming. This would have saved us a good amount of time, as we had to fiddle around with the low fidelity prototype which took up enough time to have covered the sketching portion. Moving forward, I will take more time to produce rough sketches so I can get early feedback and not waste time prototyping things that will never make it to the MVP.

Because time was of the essence, we had to leave out some steps of the process in order to complete the project. One mistake was leaving out sketching during brainstorming. This would have saved us a good amount of time, as we had to fiddle around with the low fidelity prototype which took up enough time to have covered the sketching portion. Moving forward, I will take more time to produce rough sketches so I can get early feedback and not waste time prototyping things that will never make it to the MVP.

Another area where more time could have been spent is on the feature prioritization matrix. We found ourselves frequently revisiting it to add or adjust or remove features that should go into our proposed MVP. If more time was spent discussing each feature that went onto the matrix, we could have saved time later on. It is also important to discuss these features because considering how each one will impact the user in relation to their needs is important for providing an adequate solution.

Another area where more time could have been spent is on the feature prioritization matrix. We found ourselves frequently revisiting it to add or adjust or remove features that should go into our proposed MVP. If more time was spent discussing each feature that went onto the matrix, we could have saved time later on. It is also important to discuss these features because considering how each one will impact the user in relation to their needs is important for providing an adequate solution.

Third, we did not have enough time to do a second round of usability testing to improve our high fidelity prototype. We could have had enough time for this round if we had better planning. Fortunately, we responded well to our first round of usability testing, but it is definitely something we would have liked to have done to be able to nail down the user input fields/processes.

Third, we did not have enough time to do a second round of usability testing to improve our high fidelity prototype. We could have had enough time for this round if we had better planning. Fortunately, we responded well to our first round of usability testing, but it is definitely something we would have liked to have done to be able to nail down the user input fields/processes.

Lastly, in terms of our user interface, we could have done a more consistent job with spacing in general and sizing. We followed iOS guidelines for button and text sizing; however, the card elements may sometimes have had inconsistent padding or margin which should always be a focus especially when handing-off a prototype to developers. We understand this importance and if we are to move forward with the project, more time and care will be spent making a polished design system to reference.

Lastly, in terms of our user interface, we could have done a more consistent job with spacing in general and sizing. We followed iOS guidelines for button and text sizing; however, the card elements may sometimes have had inconsistent padding or margin which should always be a focus especially when handing-off a prototype to developers. We understand this importance and if we are to move forward with the project, more time and care will be spent making a polished design system to reference.

Moving Forward/Future Improvements (Moving Forward/Future Improvements)

Moving forward, we would like to work on the things discussed above, and focus on future improvements and implementations of useful features. We are especially excited about this project because of its potential. Some of the features we will consider implementing in the future are:

Moving forward, we would like to work on the things discussed above, and focus on future improvements and implementations of useful features. We are especially excited about this project because of its potential. Some of the features we will consider implementing in the future are:

  • Filtering the discussion section by cuisine

    Filtering the discussion section by cuisine
  • Direct messaging people who post a review to request more information. We will be careful with this one because remember, one of our goals is to avoid making a messaging app.

    Direct messaging people who post a review to request more information. We will be careful with this one because remember, one of our goals is to avoid making a messaging app.
  • Incorporating the ability to create new cuisine categories or add multiple cuisines to a restaurant

    Incorporating the ability to create new cuisine categories or add multiple cuisines to a restaurant
  • Incorporating tags that are for ambience/event instead of just cuisine

    Incorporating tags that are for ambience/event instead of just cuisine
  • Adding a reservation and menu feature

    Adding a reservation and menu feature
  • Finding where the locals eat by searching within a specified radius and having more professional suggestions without interrupting the primary experience

    Finding where the locals eat by searching within a specified radius and having more professional suggestions without interrupting the primary experience
  • Using analytics to suggest new people who we know have similar tastes to a user

    Using analytics to suggest new people who we know have similar tastes to a user
  • Implementing a list view of the map

    Implementing a list view of the map
  • Enabling users to swipe left and right through restaurants on their map.

    Enabling users to swipe left and right through restaurants on their map.
  • And much, much more!

    還有更多!

Thank you for taking the time to read this case study. As a newcomer in this industry, it is important for me to be able to document each step of the process in detail and justify all of my decisions. I would love to hear your feedback, both positive and negative. Have a nice day!

Thank you for taking the time to read this case study. As a newcomer in this industry, it is important for me to be able to document each step of the process in detail and justify all of my decisions. I would love to hear your feedback, both positive and negative. 祝你今天愉快!

翻譯自: https://uxdesign.cc/designing-a-social-restaurant-curation-app-a-ux-ui-case-study-6c24c5505dee

ux和ui

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/274506.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/274506.shtml
英文地址,請注明出處:http://en.pswp.cn/news/274506.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

你不知道的 script 標簽的 defer 與 async 屬性

我持續組織了近一年的源碼共讀活動,感興趣的可以 點此掃碼加我微信 ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外:目前建…

我是怎么調試 Element UI 源碼的

我持續組織了近一年的源碼共讀活動,感興趣的可以 點此掃碼加我微信 ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外:目前建…

java對象的理解

1、看生成幾個對象,就看new了幾次, Stu s1new Stu(“張三”); Stu s2s1;-這里也是生成了一個對象,只不過s1和s2指向了同一個對象 2、Stu s1new Stu(“張三”); Stu s2 new Stu(“李四”); s1s2;這里生成了兩個對象,但是…

模板緩沖_模板緩沖以及如何使用它可視化體積相交

模板緩沖介紹 (Introduction) The trendy thing in real-time rendering these days is ray-tracing. However, traditional rasterization hasn’t disappeared, and it won’t in the near future. I recommend this blog post on the subject: A hybrid rendering pipeline …

重磅!哈啰 Quark Design 正式開源,下一代跨技術棧前端組件庫

大家好,我是若川。我持續組織了近一年的源碼共讀活動,感興趣的可以 點此掃碼加我微信 ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試…

對lua協程的一點理解

讀《Programming In Lua》協程那一章,比較困惑的還是procuer-consumer那個例子: function consumer(prod)while true dolocal x receive(prod)print(x)end endfunction receive(prod)local status, value coroutine.resume(prod)return value endfunct…

b端 ux 設計思維_借助系統思維從視覺設計過渡到UX

b端 ux 設計思維“How can I switch to UX?” This is a common question from visual designers because there’s a lot of overlap on the surface. But it can also be a difficult transition since UX encompasses much more below the surface.“如何切換到UX&#xff…

三面面試官:運行 npm run xxx 的時候發生了什么?

大家好,我是若川。近期發現好些小伙伴工作有2-3年了,基本不會寫腳手架,或者說沒學過腳手架。對腳手架大致是如何執行的基本不太知道。其實這類學習資料真的挺多的。而且我們基本天天 npm run dev,應該學習內部實現。不知道的小伙伴…

figma下載_Figma的自動版式實用

figma下載Figma’s Auto Layout has been around for a while, but not everyone’s aware of the benefits it brings. It doesn’t replace constraints, they’re still very much needed. The trick is to use the right feature where necessary. I want to show you how …

Qt通過ODBC讀取excel文件

之前替學校考試科用C Builder做過一個小的數據庫工具,處理excel表格用的,現在想轉換到Qt平臺下來,在網上搜了搜有一些利用OBDC讀取xls文件的教程: http://hi.baidu.com/kxw102/item/770c496d5736470ca0cf0f1d http://blog.sina.co…

真 · 三面面試官:運行 npm run xxx 的時候發生了什么?

昨晚沒權限我只放了鏈接,今天聯系開了白名單。昨天推文主要是為了投票,表明 Node.js 的重要性,有人評論是水文。今天重新轉載下。歡迎繼續點此去投票。投票顯示有高達近80% 表示不太會開發腳手架,看來大多數人確實沒有應用場景。可…

ovo svm_反思我在OVO擔任遠程產品設計實習生的時間

ovo svmIn a quiet bedroom accompanied only by the low humming of my laptop fan, I sat before a Google Hangouts meeting, and got to know my colleagues for the first time, unaware of the joy of a ride that was waiting for me at OVO Design.在一個安靜的臥室里&…

native的Socket向Android的LocalSocketServer發送漢字亂碼的問題

native的Socket發送字節流默認是GB2312的,所以在Java方面需要指定GB2312 byte[] buffer new byte[50]; StringBuffer strBuf new StringBuffer(); InputStream input receiver.getInputStream(); while((len input.read(buffer)) ! -1) {String newStr new Str…

最受讀者喜愛的前端書 Top 15【留言送書】

最受讀者喜愛的前端書Top 15JavaScript高級程序設計(第4版)| 中文版累計銷量32萬冊,JavaScript“紅寶書”全新升級 | 涵蓋ECMAScript 2019,全面深入,入門和進階俱佳 | 結合視頻講解配套編程環境,助你輕松掌…

圖文結合簡單易學的 npm 包的發布流程

大家好,我是若川。我持續組織了近一年的源碼共讀活動,感興趣的可以 點此掃碼加我微信 ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試…

擬態防御_擬態從未消失。 這就是為什么。

擬態防御Looking back on design languages, what Apple’s WWDC 2020 Keynote means for the future of design languages, and how we move on from here.回顧設計語言,Apple的WWDC 2020主題演講對設計語言的未來意味著什么,以及我們如何從這里繼續前進…

C++二維數組做形參

二位數組作為形參,目前僅知道兩種形式,一種直接采用二維數組,一種是用二維指針。以下是做的一個簡單的實例。 大家幫我看看,在實際應用中兩者有和優缺點。當然,有更好的方式更好了。 以下均應用在字符串數組中 void ar…

經常開發后臺管理系統,如何提升自己?推薦~【留言送書】

大家好,我是若川。之前送過N次書,可以點此查看回饋粉絲,現在又和博文視點合作再次爭取了幾本書,具體送書規則看文末。Vue.js是一套用于構建用戶界面的漸進式框架。與其他大型框架不同的是,它可以自底向上逐層應用。Vue…

lottie 動畫_使用After Effects和Lottie制作網絡動畫而不會損失質量

lottie 動畫A quick getting started guide快速入門指南 I recently took on a project where the team wanted to add some animated icons and a logo. Besides UX & UI design I am also a motion graphic designer so I took on the challenge of doing it with after…

如何編輯ttf字體文件

libfreetype的目標是以最小的內存最快的速度,讀取和渲染字體。因此libfreetype并不適宜用來編輯ttf字體文件。編輯字體文件,可以用FontCreator、微軟fonttools、fontforge(蘋果有個osxfonttools,這里不討論)FontCreato…