a platform for parents to communicate with their after school care providers
Timeline: 3 weeks.
Demographic: Parents in Vancouver aged 30–46.
Project Scope: UI for an iOS app for iPhone 7. Design scope includes creating a UI for the app that is cohesive with that of the website’s landing page.
Edify is a Vancouver based, after school care provider. Edify’s goal is to bridge the gap between after school care and educational providers such as Kumon, and Sylvan. Edify incorporated learning through play in their after school program. Their curriculum is based on S.T.E.A.M. (science, technology, education , art, and math.) The Edify after school care provider picks up the child from school and takes them to their home, where they do fun lessons like making Slime and and building towers with marshmallows. Most of Edify’s providers are either teachers or moms. Edify’s founder, Priya, is a mother herself and has been working in childcare for over 27 years. To learn more about Edify click here.
The scope of the initial client kickoff was to learn more about Priya and Edify, and come up with our why.
To get a better sense of What Edify means to Priya, we did a brainstorm with her.
She wrote down words like “trust”, “Proud”, “Learn”, “Grow”, and “Hope.” At the core of the brainstorm we had the “Safety” and “Education.” We then had a discussion as to why she associated these words with her business.
Priya highlighted the importance of learning opportunities in after school care. She said she wants parents to feel at ease when they’re at work knowing that their children are learning and gaining valuable knowledge while in Edify’s care.
She wants parents, especially mom’s to place their trust in Edify. If mom’s can trust that their children will learn and grow in Edify’s care, they can feel empowered to continue with their careers and feel at ease while at work.
We also participated in UX research. We sat in on interviews and participated in analyzing the UX survey findings. We worked together with our UX to determine the “problem,” the “business goal,” “user goal,” and our “project goal”. You can read more about the UX research by clicking here.
We found that our initial brainstorm with Priya and the results from the UX research aligned:
The Problem: Parents have trouble putting trust into providers and are worried about their children while they are at work.
With the initial brainstorm and the UX research in mind we came up with our why…
We did a 20 second gut test with Priya. A gut test is a collection of screenshots from various styles of apps and websites. We took these screen shots and made into a slideshow presentation. We showed Priya each screenshot for no more than 20 seconds in order to determine her gut reaction to several types of aesthetics. We got her to rate each slide from 1–5, 1 being she hated it, and 5 being she loved it.
- Priya gave this one a 5/5 for its use of vibrant colours and white space. She liked this design because it’s fun, as well as professional and clean.
2. Priya Gave this design a 5/5 for its use of cute illustrations, the calming green colour, as well as the emoji used to illustrate the feelings of the plant. She liked the idea of including emojis in the updates so parents can see how their child is feeling.
3. Priya liked the fun, playful aspect of this website and the bright colours.
We determined from the gut test that Priya liked bright vibrant colours, fun illustrations and clean designs with a lot of white space.
Design Inception & Visual Language
We had enough information from the brainstorm, UX research, and gut test to come up with our 2 design directions.
The challenge with these design directions was to keep them cohesive with Edify’s landing page, while making the app’s UI more fun and vibrant.
We included keywords from Priya’s brainstorming session into our visual language. The first design direction would invoke feelings of trust. The overall look would be soothing, calm, nourishing and hopeful. It would utilize colours like blue, turquoise, purple, indigo, yellow and red. The tone of the colours would be very pastel and muted. This design direction is similar to what the Edify website looks like (see below.)
This design direction is also hopeful and educational but it’s also much more exciting, vibrant and bold. It uses the same colour palette as the first design direction, but the colours are at full vibrancy and we also added an orange. We wanted to have a lot of white space, and a minimal design to keep the design from becoming overwhelming.
This is the design direction that Priya chose. Since Edify’s curriculum is based on S.T.E.A.M. and play based learning, we wanted to communicate to parents that their children be learning, and its still an educational experience, but they will also have fun doing it. Therefore this design is educational as well as playful.
This is the mood board for the 2nd design direction. The paper illustration shows a girl reading, with though bubbles coming from her, which represent questions. Priya mentioned that she wants children to be as educated as possible to they can learn to ask the right questions in the world. The flat paper style also represents the flat style of illustration we would use for the app. The emojis represent the “feeling update” function in the app that allows parents to see how their children are feeling. Edify’s logo and H1 is on the top right. The illustrations of the school, building and house are illustrations taken from the edify website. We put them in the mood board to make sure our app design, and illustrations are cohesive with the website’s design. The girl with the 2 young boys represent children having fun and learning together. We took the colour palette from the website illustrations because they are vibrant and playful — which is appropriate for this design direction and it also helps to use the same colours for consistency.
Fonts: For our main categories and H1’s we used Baloo Bhai — same font from the website. Its rounded irregular shapes make it childlike and playful. It’s stylized and comes with a bold weight which makes it ideal for a header font.
For our body font we used Proxima Nova Alt. This font is also round and playful, but easy to read at a small size and makes a good body font.
We used the same fonts as the website, rather than looking for similar fonts with those properties because we found the website fonts appropriate for our visual language, and we wanted to keep the app and website consitant.
Shapes: We didn’t want harsh angular shapes on the app, so we made rectangular buttons with round corners. The round corners make the buttons look more child friendly and approachable. This is also the button shape used on the website. The Icons, toggles and illustrations also have rounded edges and minimal hard angles.
Map: The map is to show parents where the provider is in relation to their child and notify’s parents when their child has been picked up.
For the child’s profile, because some parents may not want a photo of their child’s face, we created animal avatars that could be used as profile pictures. We kept used an monochromatic red colour palette to contrast with the purple and turquoise background colours.
The app provides parents with an instagram-like post feature on what their child is doing that day at after school. Underneath the post it says how the child is feeling(sleepy, angry, happy, sad, confused, neutral or scared). The emoji is to accompany the feelings.
Another important aspect of the post feature are the S.T.E.A.M. (science, technology, engineering, arts and math) tags. The tags are clickable, so parents can go in and read more about the lesson their child did that day. We made the rectangular with round corners to resemble buttons, so the user can see they are clickable.
After creating our style tile we plugged the design elements into the wireframes UX created.