The app should enhance user's social life by creating a sense of excitement during the booking process instead of streamlining and losing its magical quality.
With a small rebrand and the addition of micro-interactions, we can breathe life back into the dining and reservation process.
Addition of Micro-interactions
In an effort to practice my animation skills and spice up an app I already love, I used Figma's prototyping tool to introduce 5 new micro-interactions into Rezy's most vital task flow, the booking reservations process.
1. Card Expansion
I created a card expansion animation where it would take the image and enlarge it to add a more dynamic motion.
Before, it was just a simple, slide in from the bottom animation.
2. Number of Guests
I incorporated a sliding animation to show the number of guests being chosen, and exaggerated the bounce.
Prior, it was slower, smoother, and did not bounce.
3. Shake Animation of Icons
I implemented the shaking of the icons when pressed, giving users another form of interaction with their special event.
Before, nothing happened to the icons or screens when selecting an event.
4. Bounce of Elements
5. Loading Animation
Workflow
This was a class project, so we went heavily in depth with many different flows that would help in improving the overall user experience. I wanted to go deeper than just adding micro-interactions. So I set out to empathize with the user, understand the business goals of Resy, and create a brand that I would personally support.
The steps I took were: App research, Empathizing with the User, Analyzing Flows, Designing, Prototyping and Animating.
What is Rezy?
Rezy, inspired by Resy, is a one stop shop for both restaurants and customers to manage reservations. I personally have a lot of experience with Resy and enjoy the current purpose/design.
Empathizing with the Users
Jessica, is an example of my target demographic. She is always busy and needs a tool like Rezy to make scheduling her social life easier.
User Persona of Jessica Smith, who represents my target demographic
Sketching and Branding
I turned to sketching out the screens and potential micro-interactions. Sketching helps me break down the layout and see the basic shapes and frames I would need to create.
Sketches of wireframes (slide 1) and micro-interactions (slide 2)
Wireframes
I had then created my own wireframes and utilized them in some flows. I chose to make it look pretty similar because I already appreciate the layout and don't find any difficulty with the current interface.
Vital Booking Flow
I did an in depth analysis of the booking reservations flow to see what possibilities users could take and the features I would need to implement in my prototype.
Interaction Research
I analyzed the current micro-interactions in place within each page of the task flow, and all their rules according to Don Norman. (triggers, feedback, rules, and modes). This helped me understand how navigation worked.
Final Prototype
Final Thoughts
If I had more time on this project, I would love to interview people about whether or not they feel like these micro-interaction help increase the fun factor of this app.
I personally believe that dining should be fun, and so should the processes in making the reservations. I dread calling ahead and making a reservation on the phone, and enjoy apps like Resy. I believe there could be more to it than just streamlining the process in an app.
I learned a lot about prototyping and how to use Figma’s animation system. Hopefully I will be able to explore micro-interactions more in different contexts in the future!