Quill's Coffee
For this project, I designed an inventory management application to be used on a mobile device for a local coffee shop's warehouse. The goal of this project is to create a system that the warehouse manager and employees can use efficiently and effectively so that their retail stores don't run out of products.
In this app, you can choose to sign in as the manager or an employee, and what you have access to depends on who you signed in as. If you choose to navigate as a manager, you can view inventory numbers and count product, view the tutorial tips, edit history, daily reports, and add or remove employee access. If you choose to sign in as an employee, you only have access to the tutorial, inventory numbers, and product counter pages.
Date: Mar 16, 2020
Client: Self-Initiated
Medium: Digital Product Design
Tuesday, March 16, 2021
Below is an embedded file of my inventory management mobile app. Click the white bar at the bottom of the file to go to the website, where you are able to navigate through the app as if you were a user by clicking the "play" triangle in the top right hand corner of your screen. You can choose to use the app as the manager or as an employee of the warehouse. To switch users while in the app, simply tap the menu icon, log out, and sign in again as the other user.
Tuesday, March 9, 2021
Below are screenshots of the most recent version of my mobile application. I tried to give it more of an industrial, yet contemporary feel that I felt when I was in the store and on the shop's website. Other than their main logotype, I'm not a fan of their brand and design systems, but all of the buttons, icons, colors, patterns, and fonts have been updated to match what is visible on their website.
Manager View:
Employee View:
Tuesday, March 2, 2021
This weekend I conducted user testing on 3 people that work at my apartment's front desk and 2 people waiting for their drinks at Starbucks. I have typed out below what I noticed in their actions while attempting to complete the task I gave them within the app, as well as screenshots of those pages that the user accessed to help aid my notes.
User 1 Task: Login and recount the Black Tea to make sure there are 60 packets. Submit when finished.
Observation & Comments: Was confused what to do after submitting, wished there was some sort of confirmation after counting was completed. Plus and minus symbols could’ve been bigger, making them easier to tap on screen.
User 2 Task: Login and report a damaged item. Submit when finished.
Observation & Comments: Clicked the “low stock” button to report lost or damaged item instead of the other button. Said symbolism should be clearer.
User 3 Task: Login and add a new user to the system. Submit when finished.
Observation & Comments: Clicked the hamburger menu icon after reading through the rest of the second screen, understanding that there were no buttons available that might add a new user. Once they opened the menu, they completed the task with ease.
User 4 Task: Login and submit a low stock request for Black Tea.
Observation & Comments: User was able to find the button to submit a low stock request to the manager with no issues. Did note afterwards that there should be some sort of confirmation when the notification is sent.
User 5 Task: Login and add a new product within an existing category.
Observation & Comments: Had trouble adding a new product. First went to “Add New Category”, which was incorrect. Said navigating how to add a new product wasn’t obvious
Tuesday, February 23, 2021
At the end of this excerpt is the link to my wireframes on Figma. I didn't make all 21 because for some, I didn't fully understand the concept sketch or felt that it was a duplicate page that could've been summed up in one screen versus two.
Cadle_ADS_560_FearlessInventory
**The content that was active at the time of this post has since been overwritten as I did not make a new file for future wireframe designs. What you see when clicking on this link is the most up-to-date version of my inventory management system.
If you look at the entry on Tuesday, March 2, you can kind of get a sense of what my app looked like at this stage.
Tuesday, February 16, 2021
Over the weekend, I sketched out some more pages for the Fearless Inventory Project. Many of the user stories are in the same group, and many of the screens act the same between Manager and Employee views, hence why there are so few drawings.
The top row is Manager view only.
The Manager has access to view the inventory screens (pictured in row two), the reports, staff, and a list of clients that they supply.
The bottom row is Employee view, after they login first.
The Employee has access to counting stock items, adding that recount to the report, viewing edit history, notifying the Manager of low stock, and reporting damage or stolen items from their side of the mobile system.
Tuesday, February 11, 2021
On Wednesday, I did some user testing with my friend after I got done drawing 6 screens for the inventory section of the app. I have how she interacted with each screen listed by number, and those numbers correspond to the screens in the photo below.
1. User knew what to press to view black t-shirts.
2. User knew what to press to add, subtract, and "SUBMIT" the inventory count.
3. After submitting, the user knew to press "BACK TO INVENTORY" to return to the inventory dashboard
1. User knew to press "HISTORY" to view the employee edit history of inventory in the warehouse.
4. User knew to press "BACK TO INVENTORY" to return to the inventory dashboard.
5. User did not know to press the "warning" icon to view the "LOW-STOCK" page, but said the drawing was "small and messy, which made it difficult to see the exclamation warning icon."
6. User knew to press "ALERT MANAGER" to send a notification to the warehouse manager to reorder the respective item(s).
Tuesday, February 9, 2021
Here are some screenshots from Quills' website. They appear to have this nature vibe going by using dark greens, yellows, oranges, and browns. Their logotype can be seen in the website header below, but I see the vector of an owl being used a lot on merchandise. In the background of the page with all the coffee bags is a low-opacity honeycomb pattern, which could also be a useful element.
