ackeepitcool.github.io/paycrave.html at master · avigoldstein/ackeepitcool.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>PayCrave Case Study</title>

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">

<!-- CSS -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style_paycrave.css">

<!-- JQuery -->
<script src="js/jquery-3.2.1.min.js"></script>


</head>


<body>
<!-- Header -->
  <header>
    <nav class="container">
      <a name="top"></a>
      <div class="header">
        <ul id="headers" class="menu no-bullet" >
          <li><a data-page="home" href="index.html"><h5>Back to Home</h5> </a></li>
        </ul>
      </div>
      <hr id="headerline"/>
    </nav>
  </header>

<main role="main">
  <section class="case-study">
    <div class="intro">
      <div class="intro-left">
      <li id="title-img">
        <img src="Assets/PayCrave/Loading.png" alt="Portfolio" />
      </li>
      </div>
      <div class="intro-right">
      <li id="title">
          <h1>PayCrave</h1>
      </li>
      <li id="blurb">
          <p>PayCrave is an app I developed during my time at Bloc. It’s aimed to give users an easy way to find, pay and eat at food trucks. An easy to navigate map browsing system paired with a comprehensive food truck card with an order-ahead system makes finding and ordering food much easier, reducing the time needed to wait for food.</p>
      </li>
      </div>
    </div>
      <li id="process-right">
          <h2>The Problem</h2>
          <p>Users were not satisfied with the current available ways to find food trucks, a unilateral payment system, and a large pain point for users was the wait time to get their food once they did find trucks.</p>
          <br/>
          <h2>The Solution</h2>
          <p>The solution was to create an app where users could very simply find food trucks, pay for their order ahead of time, and eat. Through an aggregated Discover list, a Browse map view to see trucks close to current location, and reviews to help the user decide which truck to go to, we simplified the hunt for food trucks. Additionally, an order ahead system, a way to leave reviews, a bookmark function for favorite trucks, and an in-depth comprehensive food truck detail card helped users visualize and determine what they wanted to order without waiting in a long line</p>
      </li>
    <div class="process">
      <div id="process-left">
          <li><h2>Process</h2></li>
          <li><h3>Finding what the User wanted</h3></li>
          <li><p>Our process included user research via polling for problems with the existing marketplace, and investigating what users were looking for in terms of food truck experience.
          <br/>
          <br/>From the results, we concluded that users want an easy way to locate food trucks, see the existing menu and reduce the time they needed to wait for their food due to long lines. We concluded that users could easily find food trucks in two ways: through a map view, to view food trucks in relation to their current location in real time, or through Discover, which is an aggregated list of food trucks currently signed up for PayCrave services. The order ahead system also queued users up in a separate ticket for easy pickup, so once the wait time was over users could pick up their food without waiting in long lines.
          <h4>Results <a href="https://goo.gl/BNXRD8">here</a>.</h4></p></li>
      </div>
      <li id="process-right_img">
        <img src="Assets/PayCrave/Browse.png" alt="Portfolio" />
      </li>
    </div>
      <li id="competitive-analysis" class="center-text">
          <h2>Competitive Analysis</h2>
          <p>We conducted our competitive analysis on Square Mobile, Paypal Mobile and the Eat St. app. While both Square and Paypal mobile had a comprehensive POS system, they were lacking in what we wanted our specific app to do: build a social network of food trucks and give our users an easy way to find these trucks. Eat St. did a better job at creating this location system, but lacked the ordering ahead ability and users would still have to wait in long lines, which was a major pain point brought up.
          <br/>
          <br/>Once we were done with our competitive analysis, we went on to map out our user flow, to determine what steps a customer went through when they’re hungry and want to find a food truck.
          <h4>Full user flow <a href="https://goo.gl/35dYTE">here</a>.</h4></p>
      </li>
      <li class="center-text">
          <h2>Low-Fi and Hi-Fi Mockups give starting point</h2>
          <p>From there we went to wireframing and prototyping, with some low-fi and hi-fi mockups.</p>
      </li>
    <div class="center-img">
      <li class="center-text">
        <img src="Assets/PayCrave/Lo-Fi.png" alt="Portfolio" />
      </li>
    </div>
      <li class="center-text">
          <p>Above is a low-fi mockup of our food truck card, with a full menu and options to see the menu item in more detail, as well as reviews for the food truck. We added the reviews section to help users see which food trucks rated well within their community, to help them decide on whether or not they wanted to try it out.
      </li>
    <div class="mockups">
      <div>
      <li id="mockup-left">
          <h4>Full low-fi mockup <a href="https://drive.google.com/open?id=0B4aHEpPZdTEwa0xWeEhBSmRnZFE">here</a>.</h4></p>
          <p>After our low-fi mockups were completed, we went on to design our prototype. We went through several iterations of the food truck card in app. Our first version was very similar to the low-fi mockup, with a list menu (seen on the right).
          <br/>
          <br/>Our first version of PayCrave was modeled directly after the low-fi mockup, with a simple food truck card, menu item, sign in/sign up, discover, POS system/shopping cart and checkout, and order history pages.
          <h4>Style Guide <a href="https://goo.gl/KPhukH">here</a>.</h4>
          <h4>First Version <a href="https://goo.gl/mnesNd">here</a>.</h4></p>
      </li>
      </div>
      <li id="mockup-right_img">
        <img src="Assets/PayCrave/FoodTruckCard_V1.png" alt="Portfolio" />
      </li>
    </div>
      <li class="center-text">
        <img src="Assets/PayCrave/NavigationScreens.png" alt="Portfolio" />
      </li>
      <li class="center-text">
          <h3>Simplistic navigation with high visual content</h3>
          <p>After determining that a list menu item was the most usable of ways to show the menu, due to the amount of information you can pull from it, we decided to flesh out the menu more. We also received feedback that the visual element of our menu was the best part, so we expanded those elements to better highlight the food and to avoid the “box within a box” trope for UI. We also decided to add a pinwheel style “Featured Items” portion, in order to capitalize on the visual element as well as add a “fun” factor, while still keeping the usability of the list menu.
          <br/>
          <br/>We kept the Food Menu Item card due to the popularity we received on the expanded images, with an upper swipe on a Featured Item pulling up that specific menu item card, or a simple tap on the image on the list menu doing the same.</p>
      </li>
    <div class="discover">
      <div>
      <li id="discover-left">
          <h3>Building out Discover and our secondary pages</h3>
          <p>We also decided built out our Discover page, Order History to see past food trucks visited, and a Bookmarks page to let the user keep a running list of their favorite food trucks and see how far away from their current location that food truck was. While Browse and Discover were similar, we decided to build out the Discover page to be a sortable list, with the option to sort by distance (similar to browse), rating, food type from A to Z, and name from A to Z. This way users could see all the food trucks currently available within the PayCrave app, and not just the ones close to their current location.</p>
      </li>
      <li id="view-recent">
          <h3>As a user, I want to create an account and view recent transactions</h3>
      </li>
      </div>
      <li id="discover-right">
        <img src="Assets/PayCrave/Discover.png" alt="Portfolio" />
      </li>
    </div>
    <div class="account">
      <li id="mockup-left_img">
        <img src="Assets/PayCrave/AccountSettings.png" alt="Portfolio" />
      </li>
      <div>
      <li id="account-right">
          <p>Another user story we wanted to touch upon was the ability to create an account and view recent transactions. Through the PayCrave menu, you could access both Account Settings and Order History. Within Account settings, we gave the option for the user a Food Preferences option to choose from a list of food types so we could cater the app to their dietary restrictions or choices in Discover. This way, the user felt personally connected to the app. We also gave them the option to add or update their payment method here.
          <br/>
          <br/>Through our Order History, users could easily view past transactions, what they ordered at which food truck and the review that they left. Should they have forgotten to write a review, the Order History would indicate that so the users could complete their review from there. This also fulfilled our user story of “As a customer, I want to rate and review a food truck”.<p>
      </li>
      </div>
    </div>
      <li class="center-text">
          <h3>As a user, I want to choose items to purchase and pay for them using my phone</h3>
          <p>The last user story we included was the POS system in our app. On the food truck card, we included checkboxes for every menu and the ability to add it to the cart. Once finished, users could go to the shopping cart to complete their order. Customers were given an order summary as well as their default payment option (if they did not complete this in Account Settings, they would be able to add a card here). After their order was confirmed, users were taken to an Order Summary screen, where they could see where the food truck was located on a map, what their approximate wait time was until their order was complete, a call to action to open their Maps app to get directions to the food truck, and a call to action to leave a review.</p>
      </li>
      <li id="order-summary" class="center-text">
        <img src="Assets/PayCrave/OrderSummary.png" alt="Portfolio" />
      </li>
      <li id="final-step" class="center-text">
          <p>The final step we included in our process was to send out our full prototype for user testing, which we received great feedback on and made subsequent small changes to the app to reflect that feedback.
          <br/>
          <h4>User Testing Feedback <a href="https://goo.gl/n2gGCW">here</a>.</h4></p>
          <h3>Full prototype <a href="https://invis.io/XCBZJ35HP">here</a>.</h3>
      </li>
    <div class="conclusion">
      <li class="center-text">
          <h2>Conclusion</h2>
          <p>In conclusion, PayCrave is an app that was well received by our users. They enjoyed the visual aspect of the food, which they said helped them immensely in wanting to use the app. They also enjoyed the design and overall simplistic functionality of the app. My doubts going into this project was that we wouldn’t be able to find a good balance between finding food trucks and the rest of the functionality of the app, with users not wanting to use the rest of the app after they had found the food trucks. What surprised me the most was how comprehensive our food truck card turned out to be, as our first version was a very simple list menu and review. I think we struck a good balance between usability and fun with our final design, which would help engage the user. If I had more time or resources, I would have made sure that user testing reached a greater audience. I learned to refine my design process and fully develop a useable, fun app. This knowledge will definitely help me further on in future projects.
          </p>
      </li>
    </div>
  </section>
</main>

<!-- Footer -->
<footer>
    <div class="footer-nav-block">
        <div class="footer-left"><a href="index.html"><img class="logo" src="Assets/ACLogoWhite-SM.png" alt="Portfolio" /></a></div>
        <div class="footer-mid">
        <div class="back"><a href='#top' class="back">back to top</a></div>
        </div>
        <div class="footer-right"><ul class="social_icons">
          <li class="social"><a href="http://instagram.com/ackeepitcool"><img class="social" src="Assets/Social/IG.png" alt="Portfolio" /></a></li>
          <li class="social"><a href="http://twitter.com/ackeepitcool"><img class="social" src="Assets/Social/twitter.png" alt="Portfolio" /></a></li>
          <li class="social"><a href="http://linkedin.com/agchen"><img class="social" src="Assets/Social/linkedin.png" alt="Portfolio" /></a></li>
          <li class="social"><a href="http://dribbble.com/ackeepitcool"><img class="social" src="Assets/Social/dribbble.png" alt="Portfolio" /></a></li>
        </ul>
        </div>
    </div>
</footer>
</body>
</html>