Journeys Kiosk
Project G.A.R.D.E.N.S
During our Senior Capstone class, our objective was to develop a pitchable project that integrated the 'Community' theme. With a timeline of 14 weeks, we transformed our ideas into an industry-level end-product. Throughout the process, we actively participated in stand-ups and presented bi-weekly pitches to showcase our progress.
Can Digital and In Store Experiences Be Unified ?
Many customers are now adjusted to a more digital experience. With the problem of understaffing, most covid restrictions being lifted and people returning to a normal life, a lot of stores have been under pressure to adjust to these changes. Kiosks provide a opportunity to address these issues.
Kiosks Can Lead The Way
Creating a unique in-store shopping experience, the kiosk project tackled current in-store issues. It allowed me to design a digital solution and delve deeper into UX, while maintaining brand-centric UI.
Kiosk And Associate Device Walkthrough
Goals
Understanding The Shoe Game
- Complement Journeys' high energy style with a UI that allows the products breathe and shine.
- Provide an interesting and engaging user experience that brings the same unique interaction of trying on different shoes.
- Allow the employees to better provide help with choosing products for the customers.
Process
Heuristic Evaluation
To start off research for this project I did a competitive analysis of three in-store kiosks (Panera Bread, Taco Bell, Coco Cola). In my process document I go through a in depth Heuristic Evaluation of Panera Bread.
Connecting the Dots Through UX
For This Project, I was fortunate enough to interview two Journeys' managers and receive their feedback throughout the process. With the help of their feedback I created a detailed workflow and refined ideas through throughout the wireframe stage. These were also were presented weekly to my professor and peers in weekly stand ups where feedback was provided. Below is the component workflow for the customer hub as well as the wireframe for that page. The full workflow can be viewed in my process deck.
Re-Imagining Journeys
Once I had successfully gone through a few rounds of refining the work flow and wireframes, I headed into creating a design system. For this I kept in mind the energetic and youthful mood of Journeys.
Final Product
Journey Through Journeys!
"My final compositions closely resemble the wireframes, with the main change being a streamlined onboarding to a single page. Additionally, I addressed edge cases for products not directly sourced from the store. Typography was refined, emphasizing focused consistency, ensuring content changes type only when necessary."
Welcome Screen
Users have the option to either login which will take them to a page to fill in their account login information or shop as a guest which will start them on the onboarding process.
Welcome Screen
This the main screen of the kiosk if the user decided to shop by themselves shoes and use the store hub.
- This part serves to show the category the user is currently in. For this instance it is shoes. Its included as a form of breadcrumbing.
- New is the sub-category from which the user can begin to narrow down their shopping. For the store hub there are four sub categories: new, popular,on sale and seasonal. This is the picture of the product and can be clicked to go to
- Clicking show more colors will expand to show more colors
- The buy now is only for logged-in users who have all their information filled out. By clicking the buy now the user will be taken to the buy now page.
- The view all button will take the user to a page to view all the products of that sub category.
Product Page
The product page provides numerous features to help a customer when viewing a product:
- The grid-style allows customers to easily scan for available colors and sizes.
- Standard product information provided as a pop up for easy accessibility
- Recommendations allow the customer to quickly view others shoes if the current one is unavailable
Bag Page
The Bage page provides quick scannable information on all the items in your bag
Checkout Process
- Effortless Checkout with Multi-Source Integration.
- Simple payment and receipt pages to quickly guide the customer through checkout
Associate Device
- The top navigation will show the associate’s name and their sale goal for the day. The sale goal is the amount of money they should be making that day.
- The search button will pull up a search bar for the associate to search for products.
- This will display the current’s customer’s name, it can be filled by the associate or auto filled if the customer is logged in at the kiosk.
- The buy now is only for logged-in users who have all their information filled out. By clicking the buy now the user will be taken to the buy now page.
- This button will push the product to the kiosk as a pop up.
- Here on the second page you get the search results. With this product it's out of stock in the store. If so there will be a button to look for it at another store. A pop will be sent to the kiosk with the store it is at so the user can add it to their cart.
Takeaways
The biggest takeaway from this project is just how important it is to have very detailed, strong workflows and wireframes do to the fact that it will streamline the design process more and allow you to create with a more focused mindset.
