Asobo! is a responsive web app for parents and guardians looking for children’s activities and new friends.
Asobo! means “Let’s play!” in Japanese. The symbol above “Asobo!” is a Japanese Samurai helmet called “Kabuto.” Young kids, especially boys, make origami helmets to represent health, strength, and power. So I added “Kabuto” in the logo to wish every kid a fun friendship with their new playmates.
As a parent trying to look for things to do for your kid, one may use Google Search, Yelp, and perhaps a travel app but none of them cut it. Every parent I have talked with were hopping on different websites just to get one result. There is no centralized place to find things to do for their kids.
After I learned we shared the same concerns, I felt the mission to create the Asobo! app.
My solutions are:
After I set the target users, I sought user interviewers based on the target users' categories. Then, I conducted interviews to get to know their pain points and other opinions when they seek information about their child's activities.
There are two key user flows within this app. 1 - to search the activity the user is looking for. 2 - to find a community that the user’s child can enjoy and make more friends.
After the main user flows are set, I moved on to designing Lofi Wireframes.
After Lofi and Midfy wireframes were set, finally, I started working on the UI side of the process.
Creating a mood board gives great support to have the vision and the feel. It guides the direction of the app. I wanted to have a warm tone in the app to welcome those new to that community.
Before I designed it too far, I wanted to conduct a preference test to see which type of feel the users resonate “kids activity” app.
If you would like to see the test content and the feedback, please click the button below.
I created a full set of Style Guide that gives cohesive elements.
After finding out what resonates with the users the most and created the Style Guide, I started to design the responsive part.
I conducted another user testing on one of the hifi wireframes. I chose this specific frame because of the structure's complexity. It has more information on the page, and I wanted to get feedback on the balance of information hierarchy and image, among others.
“You did a really good job when thinking about the hierarchy and what information the user would like to see/in which order. You also used color really well, the colors complimented each other and also helped identify important information quickly and easily.”
“I love your logo, and the font that you used in creating it, it is easy to read and fun to look at!”
“I like your choice of colors for your color palette, I feel that they combine together really well.”
“Everything is clear on the screen. There is no doubt about what we should do.”
“The font style and the color palette bring a feeling of softness, safety that feel the theme.”
“Incredible job on the L screen, it looks super professional and well put-together”
“You did a really good job when thinking about the hierarchy and what information the user would like to see/in which order. You also used color really well, the colors complimented each other and also helped identify important information quickly and easily.”
“One thing I would check are little consistencies here and there like the size of your search icon on each of the screens. It seems to be getting thinner as the screen size gets larger. ”
“The colors for “Store” and “Medical” feel a little too similar and I would make the “Store” color a shade of blue, perhaps a navy. ”
“Not necessarily wrong, but I would add more spacing between each section. This will make it easier for the user to scan the information. So add more space before "Business Info", "Business Hours", "Reviews", etc. ”
After I collected the feedback, I adjusted my design based on feedback. The followings below are some of the examples that I made adjustments to.
I recieved feedback about the spacing from a few people. I increased the space and it looks much better and doesn’t look clutter anymore.
Considering accessibility, I changed the shapes of the Business Info symbols from circles to different shapes since it was brought up that the colors were too close to each other.
I changed the background color of CTA to differentiate it from input text field elements. I made the primary and secondary colors set apart as well (the primary button color is redish-orange which is used in Submit button in this page).
The map looked very small and made the users feel claustrophobic before. I made it a little taller so they can see more areas in the map.
I decreased the opacity to 70% to make it obvious as a placeholder text.
Once I made some adjustment based on feedback, I finally moved on to create more hifi wireframes.
Thank You for reading this far!
