Umbrage has an employee swag collection, including tees, hoodies, and stickers. However, there needs to be a centralized system to check swag sizes and quantity or to send swag to remote employees. The stakeholders challenged our apprentice team to create an admin portal and e-commerce site to solve these problems.
The Umbrage Bodega project comprises a product manager, a designer, and me. We collaborated on user research, such as understanding the problem, interviewing stakeholders, competitor analysis, persona creation, and app flow. From our research, we focused on two different user experiences for the Umbrage Bodega, an administration portal for handling swag stock and requests and a front-end user platform for employees.
We divided the design work based on the two user experiences, with me leading the admin portal and the other designer leading the front-end e-commerce site. While we handled our work, we collaborated on the design system and internally critiqued each other's designs.
To understand the user and design a successful product, we need to find solutions to these three problems.
The operations manager is frustrated with maintaining stock because he uses several apps to organize swag quantities, sizes, and orders. Also, employees are free to take swag on display, or when the swag order arrives, so the operations manager needs help keeping track of the swag.
Since employees can take swag without notifying the operations manager, tracking the inventory is complicated. A centralized system where employees can request swag can help admins organize and manage inventory distribution.
When the admins want to order or reorder swag, they would guess the out-of-stock sizes and quantity based on previous swag orders. Also, remote employees are left out when new swag drops since they don't receive updates about current and new swag orders. A centralized system will help employees input their sizes without judgment and allow remote employees to add their addresses and receive notifications about incoming swag they can have delivered to their homes.
We interviewed stakeholders about the problems with swag distribution and maintaining swag stock. We established two user personas, the admin, which handles swag orders and employee requests, and the employee, which chooses and collects swag. Here are the two user personas' thoughts, feelings, and frustrations regarding Umbrage swag distribution.
Keeping track of incoming swag orders and requests can be frustrating. They need an automated system where it's more efficient to track the swag's quantity, distributions, and orders.
Sometimes, sending swag to remote workers can be a hassle because their addresses need to be updated when moving to a different location. They want an easier way to deliver swag and prevent sending similar swag they sent before.
Employees often request swag and it's out of stock. The admins need a system to notify employees when swag is not in stock and have a list of recent employee requests.
The Umbrage employee wants to see all the options in a list to request swag and keep a record of swag in their collection. Also, they can easily search for swag without questioning which is in stock.
Employees also feel frustrated when the swag size they want is out of stock. A request system will make it easier for employees to order swag and help admins keep track of requests and swag stock.
The stakeholders want to include remote employees to know the swag inventory and new drops. However, some addresses aren't up to date when employees change residence. This bodega app will allow employees to update their addresses and input their sizes, which can help admins determine sizes to reorder.
Since the app has two user personas, we created a separate flow for admins and employees. I worked with the product manager and designer to brainstorm epics and features for this app. We also decided on the MVP based on the developers' capacity for two sprints.
Once employees log in or sign up, they can access the Umbrage Bodega swag site. They can browse the featured swag or search for a specific swag. Once they find something they like, they can check out the item's description, add quantities, or change their default size. After selecting their choices, the employee can request the swag, which will appear on their request page. Employees with admin privileges can access the portal by choosing it on their profile.
The admin portal's primary utility is to handle employee requests and inventory management. We also added an employee directory since admins need addresses to send swag to remote employees.
Keeping track of the Umbrage swag stock can be frustrating when there isn't one app to manage inventory. Also, employees would request swag for a specific size, but it's sometimes out of stock. As a team, we want to find a solution for inventory management and allow employees to pick out swag in one centralized app.
We researched different e-commerce sites and inventory management systems to analyze app features and design competitively. The ones that stood out to us were Zoho Inventory, Squarespace Ecommerce, and Real Thread.
One of the inventory management systems we checked out is Zoho Inventory. The app helps maintain large quantities of items and track sales, customers, and vendors in one place. However, the user experience could be more straightforward for the average user selling small amounts and only needs to ID some of their products with an SKU. Also, the interface is very utilitarian, with little hierarchy or noticeable call-to-action. On the product overview page, the user has to individually click on each product to see the description, which can be frustrating if users want to see an overview of many products.
Squarespace e-commerce is another inventory management system we checked out. The site experience is excellent for beginners new to e-commerce since it provides user onboarding tasks to complete and helps them understand their e-commerce services. However, the interface can be too simple such as a lack of visual hierarchy and containers with thin outlines, which can be hard to see in the background. Also, headers can sometimes get lost in the inventory forms and content, making it hard to skim for information.
Real Thread is one of the vendors the stakeholders use for some of the Umbrage swag. We researched the site to improve the e-commerce and bodega side of the site and compared swag descriptions we can add to the admin portal's inventory management.
I led the design system's creation with a collaborative effort to align on the direction. We apply the system to the wireframes for the admin portal and employee e-commerce side to keep a consistent look and feel.
The Umbrage Bodega visual style is all about being vibrant and fun. We designed the bodega logo to mimic the script and handwritten type on bodega signs and kept the Umbrage helmet logo to keep it cohesive with the Umbrage brand.
My designer teammate and I chose colors to represent the energetic atmosphere of the people and studios and express popping vibes. We kept the original Midnight navy blue on the Umbrage brand as a primary color, with blue-violet and ocean to complement the dark color. For the secondary colors, we got creative and found bright lime, punch, and Sunkist colors.We chose a humanist, geometric typeface for the typography, which expresses the friendliness and fun of the visual style. We also picked this type because of its readability in smaller font sizes. The components also reflect the energetic visual style with curved corners on containers and pill-shaped buttons. We started building the list of components on the design system to keep it cohesive as we designed the wireframes and prototypes.
