Background
This is a three-month UI project from the Interaction Design Studio course at UMD HCIM.
We used Thing from the Future to randomly determine the target users and contexts for the interface.
+ Timeline: Better: A few years
+ Topic: mushrooms
+ Object: bottle
+ Audience: daycare
+ Limitation: agoraphobia
My Design Scenario:
A few years later, there will be a trend of people taking mushrooms as their staple food. This will also make the cultivation of different mushrooms more advanced and convenient. In a daycare center, the teachers plan educational activities for the kids. However, the kids are agoraphobia and the traditional incubation room is shady and crowded, which is not a good place for the kids to take care of their mushrooms. So, the teachers provide mushroom cultivating bottles in class and the kids can upload the photos and record the daily progress of their hard work.
From the initial concept to Lo-Fi Wireframe
I created multiple versions of wireframes and carefully considered the following:
- Hierarchy: How can the page layout structure highlight key information?
- Whitespace: Which grid system should be used to make the layout cleaner?
- CTA (Call to Action): The placement and size of interactive buttons.
Design System
- Color: Inspired by plants, warmth, and family-friendly vibes.
- Typography: Reflects a sense of playfulness, adventure, and ensures high readability.
- Components: Incorporates game elements, with a raw, jungle-inspired aesthetic.
Mid-Fidelity Wireframe
The process of creating the mid-fidelity prototype was where I learned the most. To make the interface more appealing to children, I extensively researched computer and mobile game interfaces, gaining a deeper understanding of game design aesthetics. I applied these insights to fundamental elements such as buttons, cards, and loading bars.
The carousel interaction was the component I revised most frequently. Since I positioned this app as a child-friendly version of Instagram, I believed that while the users are children, the browsing experience for social content shouldn’t be entirely gamified. Incorporating a sense of professionalism, consistency, and smooth interaction design would elevate the app’s overall experience. Therefore, balancing the showcase of creators' images with a polished, cohesive design was the key concept I aimed to convey.
Different Design System Presentation
To prevent the gamified interface from compromising overall design consistency, I restructured the layout using Google Material Design as a foundation. This streamlined design system allowed me to meticulously organize the grid system and explore various component arrangements.
Additionally, I experimented with different CTA (Call to Action) placements to assess how they could enhance usability and create a more intuitive user experience.
Key Takeaways
This project was incredibly fun! Unlike my previous work with typical users, it was my first time exploring child-friendly interface styles and interactive patterns. Throughout the process, I drew inspiration from numerous playful designs, gaining insights into the game industry's design aesthetics.
I also experimented with various layouts and carousel interactions to better understand how different arrangements and interactions impact the interface's overall appeal and user engagement.
