top of page
Onboarding.gif
Apple iPhone 11 Green.png

在包里

个人项目

 

搜索。滑动。保存。

 

把你的家务变成更多!一款功能强大的应用程序,可根据您商店的每周销售商品提供食谱建议。

使用的工具

Figma Logo.png
Whimsical logo
pngegg-52.png
invision-logo.png

概述

In the Bag 是我在 Kenzie Academy 的第一个个人项目。它以一个简单的提示开始,鼓励我们学习和实施设计思维过程。

  • 目标人群:年轻的城市专业人士

  • 目标:通过每周准备午餐来省钱

  • 挑战:有许多膳食计划应用程序可用。 In the Bag 与这些有何不同?

  • 角色:研究员和设计师

ITB Prompt.png

35

8

5

4

无数

调查回复

采访

可用性测试

迭代

得到教训

Down Arrows.png

调查

调查方法:多项选择,谷歌表格

我找到谁了?

  • 单身和已婚人士的网络。

  • 年龄在 27-44 岁之间。

  • 69% 的人认为自己是女性。

我发现了什么?

  • 用户经常超支或根本不跟踪午餐支出

  • 大多数人发现准备饭菜与外出就餐相比更重要

  • 一些用户愿意每周花 1-3 小时准备午餐

SurveyResults.png

初始假设

我最初的假设是这个应用程序是某种预算应用程序。

 

在发现了一些有趣的定量数据之后,我想更多地探索后两个统计数据。我发现有趣的是,准备饭菜对许多参与者很重要,但是,他们没有太多时间投入。让我们潜入并打开它!

Surveys & Interviews

采访

使用的工具:缩放,异想天开

进行采访非常有见地。

年龄、种族、性别和位置人口统计数据很好地描绘了我的用户可能是谁。 

Demographics.png

对他们对烹饪技巧的感受的好奇,以及想要了解每个人准备饭菜所花费时间的详细信息,推动了我的面试问题。

关键面试问题:

  • 您目前如何跟踪您的伙食费用?

  • 您目前使用哪些资源来节省购买食品的费用?

  • 为了省钱,你愿意花多少时间做饭?

  • 告诉我创建你的购物清单的过程。

  • 你为什么不跟踪支出? 

  • 为什么你在外面吃饭而不是准备? 

  • 让您感到沮丧的购物体验是什么? 

Linds.png

“我不想花很多(时间)。我的睡眠很宝贵!”

Nikia.png

“我最好的版本会在本周的周日准备饭菜。当前版本拖延并告诉自己她在滚动 tik-tok 时没有时间这样做。”

Culhane.png

“我每次都会选择睡觉而不是食物!”

角色和旅程地图

使用的工具:异想天开和 Figma

2.1 User Persona & Journey Map - Emily 's Journey Map_2x.png
Persona Emily.png

点击图片放大。

在从我的采访中捕捉到奇妙的见解后,我将我的发现综合成一个角色,并制作了一张快速的旅程地图。

我为什么这样做?

  • 旅程地图清楚地定义了当前流程中的痛点并帮助我产生了共鸣。

  • 在迭代过程中让艾米丽陪伴我是为了帮助我避免成为“范围蔓延”的受害者。

  • 在整个过程中多次引用她的报价很有用,因为它提醒我节省时间与省钱同等重要。

真正的问题

我的用户当然想省钱。那部分是不费吹灰之力的!我发现真正的问题是...

 

 

  • 缺乏动力。  搜索、购物和准备工作是乏味、耗时且平凡的。

 

  • 时间与金钱。 参与者想省钱,但不以牺牲时间为代价。 

我们如何开发一个应用程序来帮助用户节省时间和金钱,同时鼓励他们计划、购买和准备他们的饭菜?

Persona & User Journey
Real Problem

用户流

使用的工具:异想天开

之后播放了几段采访录音和一堆虚拟便签……

我做了什么?

我从笔记中提取了共同的主题,并开发了最重要的用户需求。然后我开始迭代潜在的用户流。

In the Bag Case Study_2x.png

最初的流程想法

In the Bag Case Study_2x-2.png

我为什么这样做?

我想专注于体验的一步一步的旅程。通过从高层次探索可能的解决方案,我能够专注于用户在应用程序中可能拥有的整体体验。这种方法节省了我可能浪费在创建最终不必要的屏幕上的时间。 

点击图片放大。

修改后的流程

icons8_idea.png

主要学习

我发现自己的设计太大了,试图整合所有可能的解决方案和边缘案例。  

 

辅导员的反馈鼓励我将流程分为-

1) 入职/帐户注册

2)快乐路径应用程序使用

Onboarding_First Shop.png
7.1 Usability Testing_2x (2).png

点击图片放大。

Wireframes & Testing

草图

我通过勾画可能的解决方案开始了构思过程。

 

是的,它是深色模式方格纸!!

Crazy 8's
Sketches 1
  • 利用疯狂 8 的素描方法,我有机会快速探索想法, 而无需立即将自己嫁给一个人。

  • 我开始这个过程时,创建必须和可能拥有的清单帮助我集中注意力

  • 草图通过在提交任何单一想法之前提供空间来可视化概念来推动项目向前发展

最终,我最终使用了每张图纸中的混合元素。我倾向于对仪表板主屏幕的需求,并希望保留游戏化元素以保持 Emily 的兴趣。

Sketches 2

线框

使用的工具:异想天开

为了测试我的想法,我转向了中保真线框图。正是在这个阶段,我对关键屏幕进行了多次迭代。

 

  • 来自同伴和促进者的反馈鼓励了迭代过程。

  • 许多屏幕经过 3 到8 次修订,然后才踏上可靠的测试之路。

 

使用 Whimsical 是有益的,因为它提供了具有多个约束的标准元素这让我整个过程中专注于功能

 

主屏幕的迭代

3.1 & & 3.2 Wireframes - Home Page_2x.png
6.1 Hierarchy Audit - Home Page v.6_2x.png
7.1 Usability Testing - Home Page v.8_2x.png
In the Bag Case Study_2x-4.png
In the Bag Case Study_2x-5.png
In the Bag Case Study_2x-7.png
In the Bag Case Study_2x-6.png
In the Bag Case Study_2x-8.png
In the Bag Case Study_2x-11.png
In the Bag Case Study_2x-9.png

用户测试

使用的工具:异想天开和 InVision

在进入高保真原型设计之前,我进行了可用性测试。这是一次非常有见地而且相当谦卑的经历!

我对 5 名年龄在 28-43 岁之间的参与者进行了远程测试。五名参与者中的三名是初步调查和访谈过程的贡献者。

该测试包括四个专注于特定任务的“任务”。

  • #1- 入职并添加您的第一个食谱

  • #2- 应用程序的归档和排序功能

  • #3- 从浏览到成功购物的体验流程

  • #4- 导航功能和图像清晰度

这些测试证实了我的一些设计选择,但也告诉了我一些急需的迭代,特别是围绕应用程序如何节省资金的流程和清晰度。我在测试中发现的另一个主要痛点是简化保存和归档配方以供以后使用的过程。

ITB Usability.gif
Apple iPhone 11 Green.png

用户反馈和解决方案

Key.png
Feedback & Solutions
ScanReciptProblems.png
PointsFeatureRework.png

用例

01.

用户没有动力每周计划膳食。这项任务乏味而平凡。

  • 用户在入职期间选择要购买的餐食数量,从而允许自定义目标设定。

  • 基于手势的交互与实时进度和支出更新提供了高效的膳食计划流程,同时保持用户参与。

Home.png
Add to Bag Demo2.gif
Apple iPhone 11 Green.png
SearchingAdsAnimation.gif
Apple iPhone 11 Green.png
Shopping List.png

02.

用户总是想省钱,但不以牺牲时间为代价。

  • 算法搜索商店的每周销售广告并根据销售项目生成食谱,既省时又省钱!

  • 精心策划的购物清单提供了每件商品的过道位置,以加快用户的店内体验。

03.

用户需要预算并跟踪他们在杂货上的支出。

  • 用户在入职期间设定预算目标。

OB WeeklyBudget.png
  • 实时更新他们包里物品的价格,鼓励少花钱!

Focused Budget.png
  • 预算功能的游戏化和激励功能可监控支出并帮助实现目标。

Budget 1.2.png
Linds.png

“我目前使用了很多不同的应用程序来省钱,所以能够找到食谱并为我省钱……这太棒了!”

Culhane.png

“我喜欢从每周广告中提取的食谱……有一些对我有用的东西真是太棒了!”

Nikia.png

“该应用程序提供了小胜利!我在整个过程中让我振作起来。就像你得到了这个!”

高保真和原型

我接近了高保真 具有干净自然美感的原型。我发现我对自然元素的影响。
  • 背景纹理的灵感来自厨房中的石英台面。
  • 天然食品品牌(如 Whole Foods、纸袋和蔬菜本身)中汲取灵感,启发了清洁、自然和平易近人的调色板。 
  • 排版和图标选择旨在保持 UI 干净和专业,同时感觉平易近人
     
ITB Hi Fi.png

与原型交互

Hi-Fidelity

“我们喜欢 您在用户测试阶段所做的思考和返工它显示了增长的真正承诺,更重要的是,您的用户。”

 

Ryan Robinson,UX 项目总监 Kenzie Academy

钥匙 外卖

这个项目非常令人满意。它揭示了我批判性思考同情不同人群的能力。有时,这感觉就像是一场非常激烈的过山车之旅,充满不确定性的感觉和小胜利的时刻。​​

SuccessIcon.png

成功:  该应用程序的核心功能令用户感到兴奋。他们觉得这确实是一种节省时间和金钱独特而有益的方式。

LearnIcon.png

斗争: 我在范围蔓延方面挣扎了很多。想要解决每一个问题和每一个边缘情况有时变得霸道和麻烦。与辅导员的头脑风暴会议帮助我重新关注应用程序旨在解决的核心问题,并将我设计为应用程序“版本 2”的一些附加功能分组。 令人惊讶的是,这变成了一个巨大的胜利帮助我真正理解了 MVP,同时也思考了应用程序在用户保留和包容方面的未来。

Takeaways

查看其他项目

ITB Horizontal Card-2.png
ITB Horizontal Card-1.png
bottom of page