Shahpper is a grocery pick-up app, service and most importantly, experience that is centered around the in-store shopper. Following the Coivd-19 outbreak, usage of grocery pick-up services have skyrocketed which led to me working as an in-store shopper for Amazon/Whole Foods up until my recent resignation in March.
I was able to use the knowledge and experience from my time as a shopper to research for my design. While at Whole Foods, I also met former shoppers of other grocery stores who told me about their experiences at the other stores. The goal of Shahpper is to make work easier for the in-store shopper thus letting them focus more on their performance. This will in turn create a chain reaction of positive results such as faster turn-around times for customers to pick-up their order from the store and it will also result in higher customer satisfaction as the customers will be able to effectively work with the shopper to ensure that the customer’s experience lives up to their expectations.
The visual audit follows the experience’s armature of fresh, fun, and easy. Due to this, the visual language is very simplistic. Only two colors (with variations) are used and only one (san serif) font is used. The mood board is heavily inspired by the produce section of grocery stores thus making green the primarily used color and purple as the secondary.
The displayed layout is only an example of how physical spaces can turn into the UI component. The Shahpper experience has no set singular space. In fact, it is responsive so that different stores can utilize it regardless of their space constraints.
One physical guideline for Shahpper is that there needs to be a centralize location designated the “Shahpper Zone” to make sure that the shoppers are able to efficiently perform their jobs. This is an area where the shoppers keep pending orders and it’s also where they start new orders from. To prevent unauthorized personnels such as customers from entering, there will be a large 16:9 banner (exact size is up to the store) that alerts that the area is for employees only.
The wireframes actually very closely resemble the final prototype. While a lot of UI changes were made, most notably with the route map, the user experience and flow largely stayed the same.
The first part of an order is getting and accepting the order. The shopper is notified of the order through a push notification then which they can see the route map along with the number of items. After the shopper accepts the order, they’ll be able to see the order and will have to complete the list.
The list is completed once every item is rather scanned into the cart, replaced with another item, or voided (although the app explicitly discourages this). A common theme in the UI that is most prominent here is the color-coding of green, purple and white. Green buttons are the default for shoppers to continue. Purple buttons are those that should be used less frequently. White buttons are highly discouraged from use but are still necessary in rare cases
After completing the order, the shopper assigns each bag a number and a location. They will store these bags and continue with their next pending responsibilities. When the customer is ready to pick up the order, a shopper (not necessarily the same one that did the order) will get a notification to get it ready for drop-off in which they can chose to accept or decline. Once it’s accepted, the shopper will be able to see the customer’s location if it has been enabled and where to meet the customer for drop-off. The options for this will vary based on the store’s location and amenities (if they have a parking lot, dining area, etc). In the event that the customer is taking a long time, the shopper can call the customer to check on them and if necessary, they can re-stage the order. Once the customer has received their order, the shopper hits the “drop-off complete” button and continues on with their job.
App Demo
The demo walks through the app from the moment the shopper gets a notification to when they complete the drop-off.
Blog Post Three
Google is a company that has taken immense actions during the Covid-19 pandemic to connect its users (which realistically is everyone) with people, products, and virtual experiences. One of their platform that offers virtual experiences is Google Arts and Culture. Google Arts and Culture offers virtual museum tours of some of the world’s most famous museums. The one that I checked out was the National Museum of Modern and Contemporary Art in South Korea. Going into the experience, I was expecting a very similar experience to being a tourist via Google Maps. I was not wrong…
Seeing Las Vegas on Google Maps doesn’t compare to seeing it in real life. The same can be said here. In fact, I would say that it’s even worse here. The biggest issue here is that it’s very easy to disoriented and lost. The implementation of the physical space in a digital setting does not take pathfinding into consideration. On Google Maps, there is a mini-map that shows the users the city layout of the streets from a bird eye’s view. This feature would be extremely helpful here. In fact, this pathfinding method is something that I’ve already added to my prototype but now I’m happy to affirm its functionality and usefulness.
One of the advantages of this experience being virtual is the clear labeling of each artwork and the ability to “teleport” to different areas, artworks and even branches of the museum (the museum has different branches in different cities). One odd quirk of this feature though is that despite being able to read and learn about the artwork from the gallery view, the user is not able to do so by simply clicking it on it when in augmented reality. This is a HUGE issues when it comes to artwork that utilizes video or audio because the the user would have to read the name of the artwork (which is not easy due to lack of quality in 360 cameras) then find the artwork in the gallery which doesn’t contain a search function.
Augmented reality aside, the actual UI/UX/IA of the Google Arts and Culture page for the museum is quite nice. The IA is particularly done excellently. In fact, it’s great inspiration for my project. Every section that I read left me with a question that would be answered by the next section. I love how human-centered this part is. For example, the second to last item of the page is the augmented reality tour (Google Maps). After the user takes that tour, they’ll want to it in real life too in which then the following section is information about the location(s) of the museum.
This is something that I want to apply into my own design. While I don’t exactly know what happened behind the scene at Google to do this, I’m inferring that user testing was taking place. Another way of relating this with my project is thinking of it through a system of hierarchy. Looking at this has taught me about asking questions that my users would ask. To apply this to my project, I could ask “what would the users want to know about this item they’re buying” and rank the hierarchy of price, quantity, weight, etc.
Blog Post Two
So funny story, because of Netflix’s problematic design on Roku, I accidentally watched the episode on graphic design first before watching this one. What I found really interesting is how much intersection there is between the mindset of Es Devlin and Paula Scher. This is really telling and affirming to me that the design mindset is very multidisciplinary. Something that stuck out to me about watching this is how Es tries to tell the performance’s story through her designs. She evaluates her designs based on the artist and their performance then comes up with cool ideas to fit those narratives rather than just try to shove cool ideas in. An example of this is with how she symbolized a band being unified as individual pieces of a face. I think that the biggest challenge between translating this to visual communication design will figuring out what’s possible or not to do. As a a visual designer, I rarely have ran into occasions where projects are not possible to do simply because I didn’t have the means to do them. On the other hand, stage design is very different. In the episode, Es mentioned that she has spent millions to bring her designs to life before.
After watching this episode, the thing that surprised me the most was how closely related stage design was to motion design. In motion design, we’re taught about combining analogue effects with virtual effects. This is something that I see Es do a lot, trying to find the correct balance of both. She also talk about her process for coming up with ideas which happens to be the same process we are taught about in motion design. She starts with an armature or theme of the performance and builds her idea upon that. For example, with her work for Watch the Throne, she talks about how the theme there was that Jay-Z and Kanye West are in this position of power but not invincibility. From there, she starts to develop ideas on how to represent and expand upon that.
I think it’s really interesting how Es gets inspired. She gets inspired by stories. Es translates this into her designs. This is very different from Scher. Scher get’s her ideas from being around design itself. One of the reasons for this is probably because graphic design is much more saturated in our lives so Scher can use that to her advantage and build upon that. In contrast, most of us do not come across stage design on a regular basis and it’s also a more rare art form. Because of this, there is a lot more room to explore in stage design and there is a higher expectation to achieve uniqueness.
Blog Post One
What I found most interesting about the talk by David Delgado and Dan Goods is the fact that they think of design as a mindset and not a skill. This makes me change my perspective of design. Whenever someone has asked me what kind of stuff that I can design, I shoot off the usual list (app, website, poster, infographics, motion graphics, etc) but watching this video has taught that designers are so much more versatile. There have been many times where I’ve looked through design job listings and see something that’s close to what I’m able to do but not quite there yet. A very good example of this was when I was browsing through the internships at General Motors (or was it Ford?) and saw a listing for trim and color designer for their cars. I didn’t give it much thought at the time but I found it really interesting how they were looking through such a wide range of educational background from visual design to industrial design, to fashion design. Watching this talk, I now understand why. Design is such wide concept thats its hard to encompass everything into a few field of studies. This is why I don’t think it’s possible to release their journey through school. Their journey is so unique and tailored to their personal experiences. Someone going through school won’t have that mix or balance of working with aerospace engineers, architects, etc. However, I do think its possible to use their journeys as inspiration for me to develop my own journey for something I’m interested in. I’m not sure what that is yet for me though. To use another example other than cars, I remember that when I went to PAX, I used to ask a lot of the developers about their journey into the industry, I recall that quite a few of them mention that they were visual designers or illustrators beforehand and they ended up using that skill to develop their games.
My favorite project from the talk was definitely the grain of sand. My classmates and I went through Information Design last quarter so to see this being done on such higher scale is really inspiring. Not only is the execution of the project really cool to learn about, I also really like learning about the information communicated in the project. I always knew that everything that we’ve witnessed is basically a rounding error in the grand scheme of things but to see that communicated visually is really eye-opening and thought-provoking. I think that a project like this is exactly something that creates a moment of awe. The concept of awe to me is when I witness something so extraordinary that it takes my mind a few moments to even grasp the idea.