Figma Kiosk UI - PawPup Spa
OVERVIEW
For this project in my Tufts Computer Interface Design class (ENP166), we were each asked to create a conceptual design for a dog washing kiosk. We created a user flow diagram, wireframes, mood boards and screen mockups. As the final step, we made the prototype interactive through Figma.
DESIGN BRIEF
"You are green-lighted to commence with the UI design for our Paw-Pup Spa, an automated self-service
dog washing kiosk tailored for use by laypeople rather than professional groomers. The kiosk’s software
user interface will be featured on a 14-inch, 1500 x 1000 pixel LED-backlit touchscreen display, similar
to sophisticated tablet devices. We expect the kiosk to be available at parks, shopping malls, and other
public areas.
Please note that this project is about crafting a standalone, self-service unit where dog owners can
conveniently and efficiently wash their dogs without professional assistance. The interface should be
user-friendly, with intuitive navigation that facilitates ease of use for individuals with varied levels of
technical proficiency"
Functional
Capabilities
The following features the "client" outlined must be implemented into the final design
05.
Real-time progress indicators
10.
Alert pop-ups to indicate maintenance issues or usage errors
01.
User-friendly welcome screen with language selection
06.
Integrated payment system
02.
Step-by-step washing process, guiding users through each stage with visual aids and simple instructions
07.
Feedback and rating system to gather user reviews and suggestions for improvements
03.
Options to choose between various shampoo and conditioner types based on dog coat type
08.
Short video tutorial and FAQ section for first-time users
04.
Options for users to customize washing preferences, such as water temperature, pressure and fan speed
09.
Adjustable tub height
User Flow
Wire Framing
These are wire frames that I created based on my user flow chart. The left side of most of the screens indicate the user’s progress through the process as well as the title of the step that they are on. The consistent layout between each of the steps streamlines the process and makes it easy to use.
.png)
Branding
The logo I created, a paw print within an abstracted bubble, effectively and simplistically encapsulates the essence of the kiosk brand.
I crafted three distinctive mood boards to capture varied facets of our brand personality. The initial design embraces a modern, clean, and sleek aesthetic, instilling a sense of trustworthiness and professionalism. The second, drawing inspiration from the great outdoors, emanates warmth, creating a natural and grounded ambiance. The third radiates infectious friendliness with vibrant colors and whimsical fonts, celebrating the playful spirit of our furry friends
Showcase
Using Figma, I created a high-fidelity prototype for the kiosk, which features interactive on/off toggles and buttons. I chose to further develop the brand personality from my second mood board because it seemed warm, friendly, and accessible to the largest target audience.