Que Rica Vida Website Redesign

Objective: bilingual recipe site, Que Rica Vida, was in need of a responsive redesign that catered to it’s mobile savvy audience. My role in this process as Interaction Designer was to collaboratively brainstorm specific behaviors, create animations of feedback concepts, and help facilitate the communication of design and UX goals to the development team. My involvement in the pre-launch testing process was crucial in seeing the design come to life as it was intended. You can view the live site here: QueRicaVida.com.
QRV Mobile Menu Animation

We wanted to make sure the mobile navigation stayed out of the way when looking at content, and was simple to use. The full-screen navigation allowed the user to focus on the navigation task, and allowed enough space to legibly read navigation items and plenty of room to tap. The menu trigger is positioned at the top right to follow behaviors of a majority of right-handed users. The menu navigation animated down from the top of the device as a logical, expected transition to replace the current screen.

Que Rica Vida Heart Hover Animation CSS
The action of favoriting a recipe on the website can be done while browsing or deciding which recipe to make. Adding a subtle animation of the favorite icon, a heart, sparks a reminder to the user of this action, and creates a bit of delight in seeing the heart change once they favorite a recipe.

Role: Interaction Designer

Team: Maria Nocenti – Designer, Audrey Lanners – Designer, Christ Stromquist – Developer