1. Created a task flow of the original app called Yuka
2. Created a user persona
3. Created an app flow of the original app
4. Developed and made choices for my rebranding
- New app name
- Logo
- Color scheme
- Typography
- Iconography
5. Sketched my redesign on paper
6. Created wireframes for my redesign
7. Created a wireflow for my redesign
8. Designed a high fidelity UI
9. Used Adobe Photoshop to design my Vera logo
10. Mapped out my interaction flow
11. Sketched out my animation and motion ideas on paper
12. Created an interaction guide
13. Began animating on a Figma plugin called Jitter
- Animation #1: Vera logo sways
- Animation #2: Toast popup
- Animation #3: Toast bounces
- Animation #4: Toast expands
- Animation #5: “See all” button clicked
- Animation #6: Ingredients page opened
- Animation #7: Ingredients page gradient
- Animation #8: Risky ingredient shakes
- Animation #9: Vera logo sways when bottom of page is reached
- Animation #10: “X” button clicked
- Animation #11: “Scoring method” button clicked
- Animation #12: Information pills slide in
- Animation #13: “X” button clicked
- Animation #14: Favorite button clicked and filled in pink
- Animation #15: Favorited Vera stamps onto product
- Animation #16: Hearts float out of favorited Vera
- Animation #17: Favorited Vera logo sways when bottom of page is reached
- Animation #18: Toast condenses
14. Combined my animations to produce my final rebranded and redesigned
interaction flow!