01
CONTEXT
Happy Tummy is a mobile app which provides food-allergic diners with a quick and easy way to find places that accommodate specific dietary needs.
Role: UI/UX Designer
Date: May 2019 - June 2019
GOALS:
> Search restaurants based on allergies and intolerance
> Create and share list about favorite spots (with possibility to connected with other social media app)
> Build a community, Giving feedback about the visited restaurants.
> Off-line map. Synchronizing with Google Maps.
> Create and share list about favorite spots (with possibility to connected with other social media app)
> Build a community, Giving feedback about the visited restaurants.
> Off-line map. Synchronizing with Google Maps.
Happy Tummy is the hands-on project for the UI/UX Design Specialization course from CalArts (California Institute of the Arts)
The project comprises idea, moodboard, sketch, mapping, wireframing and prototype.
Included 4 Courses:
- Visual Elements of User Interface Design
- UX Design Fundamentals
- Web Design: Strategy and Information Architecture
- Web Design: Wireframes to Prototypes.
- Visual Elements of User Interface Design
- UX Design Fundamentals
- Web Design: Strategy and Information Architecture
- Web Design: Wireframes to Prototypes.
02
DESIGN PROCESS
I started the design process defining my app (Ideation phase), branding and naming it, mapping out all the different screens and how it works, and testing the app as well. Finally, designing a digital prototype.
02.1 IDEATION
Good ideas come from good problems.
By creating a good process, based on being specific, trying different possibilities and refining them, I built a consistent structure.
Followed by Researching:
- Checking the competition
- Processing the information collected
- Asking "WHAT IFS"(What if my app was entirely image-based?, What if my app connected to a food delivery service?...)
Lastly, Defined my audience goals and outcomes.
By creating a good process, based on being specific, trying different possibilities and refining them, I built a consistent structure.
Followed by Researching:
- Checking the competition
- Processing the information collected
- Asking "WHAT IFS"(What if my app was entirely image-based?, What if my app connected to a food delivery service?...)
Lastly, Defined my audience goals and outcomes.
02.2 INVISION
After defining my app, I started developing the visual language. Mapping the content, developing ideas, paper prototype and applying basic UI.
Moodboard Inspiration
Sitemap
02.3 WIREFRAMING
1. Started mapping out Happy Tummy with words, that means create a sitemap
2. Turning the sitemap content into wireframes.
3. Wireframing: Created the structure or skeleton of our interface
4. Created the visual directing, defining the UI design.
User flow wireframes
02.4 PROTOTYPING
Simulate the platform, interface and interaction , to trick the user into thinking that our prototype is real and a fully programmed app.
03
FINAL RESULTS & LEARNING
> Learned how to design and articulate meaning using color, type, and imagery, making interfaces function clearly and seamlessly.
> Ability to describe the formal elements of clear, consistent, and intuitive UI design.
> Apply the learned skills to the design of a static screen-based interface
> Described and apply current best practices and conventions in UX design, and employ the fundamental principles.
> Ability to describe the formal elements of clear, consistent, and intuitive UI design.
> Apply the learned skills to the design of a static screen-based interface
> Described and apply current best practices and conventions in UX design, and employ the fundamental principles.
Thanks for reading! ✌