Client: DESIGNATION Role: UI designer Tools: Sketch, Illustrator, Photoshop, InVision, Proto io. Timeframe: 4 weeks
Create a better parental involvement in school
This is the story of how we designed an education application to improve teacher-parent communication so parents can get more involved in their children’s academic activities and performance.
The lack of time and corresponding tools was a primary barrier to better parental involvement in the school life of their children. How can we streamline teacher-parents communication flow?
I was part of a three-member team at DESIGNATION. A previous UX team at DESIGNATION provided wireframes to us. They researched middle schools across the region and found out that parents were not as involved as they should be in their children's school activities. The concept of the app was based on connecting teachers and parents in order to help them keep track of their kids and students while they were in or out of the classroom.
The UX research that we received mentioned that teachers needed a desktop-focused experience. This was because of the sensitive student information needed to be kept off mobile networks. The research also pointed to teachers don't want to spend a bunch of time looking down at a small screen.
Parents like to check things on the go so mobile app was a better solution.
After reviewing the wireframes, our next step was to analyze user personas. The UX team created two personas: Sung-Min and Henry.
Sung-Min, the immigrant father. He wanted to meet other parents and have a stronger support network. He didn’t feel involved and sometimes struggled keeping up with all the communications from school due to his time-consuming job running a corner store, and his weak command of the English language.
Henry is an older, traditional teacher. He just wanted to get things done quickly so he finished his work on time and enjoyed his life outside the school.
Keeping in mind two different user profiles, it was easier for us to understand where should we go with the design. For the parents that would use the mobile app, we needed to find a solution that considered their hectic lifestyle. All the information should have been visible and apparent at first sight, and they should not think about functionality. Using recognizable design patterns and icons should make it easier to use for parents on the go and quickly familiarized them with the app.
Henry, the teacher, needed an app which he could use in an easy and fast way, despite having a lot of duties during the school day. We should design a desktop option for teachers that would help them spot all data efficiently and quickly. Good hierarchy and transparency were our primary goals for the desktop web app.
We tried to empathize with the personas that the UX team created, and in some way find the best visual solution to make the product as easy as possible to use. Our first step towards this solution was to conduct a competitive analysis.
We didn't know anything about the school apps currently available on the market. We analyzed nine competitors to gain more of insight into what was out there.
Most of the competitors used round, friendly sans serif fonts. Some of them had bright, friendly, illustrative iconography and very sparse photography use. The elements were kept simple to keep the focus on content, and they brought personality to the apps through icons and colors.
ClassDojo and Bloomz were examples of playful/friendly applications which used illustrative iconography and brought personality through icons and colors. They applied rounded, sans serif typefaces to play up friendliness and variation in font weight and size to establish proper visual hierarchy. Clean, bright, mostly white UI with light gray provided contrast and structure, while bright colors were used for CTA’s and areas of interest.
On the flip side, there were straightforward and serious examples of the apps as PowerSchool and Rate My Teacher. These applications had a modern approach with a very clean user interface, emphasizing content and delivering a professional experience instead of a fun, childish one. They were devoid of illustrative elements seen in other apps and geared more toward a grown-up content heavy experience. Also, they had very sparse use of photography, instead of using simple and straightforward iconography.
We set about creating some design goals based on our takeaways from the competitive analysis.
We wanted to use legible sans serif fonts to create a contrast-heavy type style for maximum legibility because the app needed to prioritize content over visual elements. Our design goals also made us decide to use clean, bright, predominantly white UI. Saturated colors were used for all iconography and CTA's. Lastly, we wanted to limit the use of photography to ensure that we weren’t going to distract the user’s eye from the content.
Visual explorations and renaming the app
Once we completed analyzing the market as a team, I started work on my individual approach to the visual solution. My first step was to come up with a new name for the application and improve my branding skills. I explored various ideas to find an appropriate name that would be recognizable and easy to remember.
I initially came up with three names: EdUnity, EduScanner, and GreenClass.
- EdUnity stood for Education Unity. Education indicated school and Unity represented both the parent-teacher relationship and their connection. I wanted both to lend a sense of dedication towards a student’s success.
- EduScanner stood for Education Scanner. As with the first brand, Education represented school and learning while Scanner represented the ease with which teachers and parents would be able to scan or review their kid’s progress.
- Green Class was another concept I toyed with. Green, much like on a traffic light, means “GO.” It was something that I saw as good, positive and optimistic. The class had a clear connection with schools and learning.
My second step was to gather visual inspiration and create mood boards and style tiles.
While collecting my inspiration I had both teachers and parents on my mind. Parental involvement during middle school directly impacts achievement in the child’s life, but middle school is a time when parental involvement drops off. I wanted to design an app that invoked more intense parental involvement in their child’s school life while helping them maintain better communication with teachers.
With the name and design style of the app established, I started to work on logo sketches.
I had various ideas for logo design. Most of them represented a connection, but after a presentation and some feedback from my creative director and peers, I decided to go with the circle in the logo.
This logo represented connections, involvement, progress, focus, and stability. You can see how the circles were meant to represent teachers, parents, and kids in mutual relationships. All these circles form a triangle shape to represent stability and focus on achieving the same goal: academic success for students.
After receiving another round of feedback on my logo, I realized that I needed to make iterations. I disconnected this logo’s lines as these were too simple and not attractive enough.
With my second iteration I tried to make the logo look more 3D. I decided to implement a gradient and connect the lines to make it more reflective of the connection between the users. I thought it was fine and that I did a great job, but the feedback was once again negative. The logo designed in 3D didn’t look as good, and the green color was perceived as much too aggressive. So, once again I needed to iterate on my logo and make significant changes.
With my third iteration, I finally had the logo finished. I created this logo to be more 3D shaped, and instead of the green color, I used yellow-orange with a small addition of gradient to make the logo more attractive. This color was perceived as more inviting and lent a warm and welcoming feeling to the users.
Once I finished the visual exploration my next step was to review the desktop and mobile wireframes and begin designing them. My first action was to make mid-fidelity wireframes. While reviewing the UX wireframes, I noticed a few things that made the app less user-friendly. I decided to make some changes and presented these to my creative director and instructors.
My creative director thought that all changes I incorporated made sense, and he approved it. The only suggestion was to modify the order in which the grades were represented. He thought that positive grades should be presented first because his idea was to make the app more optimistic.
While reviewing the desktop wireframes I realized that some elements could be seen as confusing for users, so I decided to speak with the UX designers. Through communication with them, I learned as much as possible about the user’s needs. It was also great to find out more on their insights from their research and user testing. They suggested that I make the calendar more visible and easier to access so teachers could easily see their timetables.
When we looked at the wireframes together, I asked them whether I should use a labeled navigation bar instead of icons in order to avoid user confusion. They thought that was a good idea and I began implementing those changes.
My creative director’s feedback was to make the calendar bigger and to put it on a separate page in my high fidelity mock-ups.
HIGH FIDELITY MOCK-UPS
I started designing my high fidelity prototypes once all my mid-fidelity wireframes received the green light from my creative director.
While designing the desktop version I kept teachers and their needs in my mind. As our persona, Henry said: “I just want to get things done quickly so I can finish my work on time and enjoy life outside the school.” I decided to point out content and make all functions of the app easily visible and accessible. I used the orange to call teachers’ attention to notifications about students, as well as notifications in the messaging section. I used a lot of white spaces to make every part of the application easily noticeable.
After feedback from my creative director, I needed to make iterations on my screens that made the app easier to use and more appealing to users. Calendar didn’t seem understandable enough, because of the color which I used for selecting dates. Drop down menu for messages options made page overcrowded. Additionally, I needed to reorganize the content of the page to be more compact.
I made sure to think about the users at every turn, particularly the teachers who have lots of obligations to attend to throughout their day. I decided to make the app even more simple, clean and easy to use without compromising the content. I had new high-fidelity mockups after iterating long and hard over the course of just a few days. My new wireframes had a new look.
While designing the prototype, I decided to think about incorporating microinteractions and some animations in an attempt to make the app more attractive and inviting. However, I had only one day before the final presentation of the prototype was due and had to figure out which tools to use and subsequently how to use them. I chose Proto.io and spent hours making some logo animations. In the end, they may not have been perfect, but I was proud of myself for having finished them.
CHECK PROTOTYPE BELOW
After finishing the high-fidelity prototypes, I created a marketing website for the product. I carried the visual style from the mobile and desktop versions of the app to showcase the features and benefits of the product to future users. I also highlighted where and how they could download EdUnity and connect with the app’s social network.
There are some future considerations for improving EdUnity. For the teacher-facing side, it would be great to design the functionalities around assignments and grading. Also, I would continue to do more research into a teacher’s use of a mobile app in the instances when they might need to access their profile outside of school and away from their computer.
For the parent-facing product, it would have been good to have had more time to create more elements of personalization and customization through language and translation options. One of our personas was an immigrant father with a huge language barrier, and I considered how useful a translation option would be even for a parent like myself. I truly empathized with this persona during the development of this app.
WHAT I LEARNED
The hardest part of this project was getting to know myself. I discovered things that I’d never known about myself. I didn’t realize how capable I was of working under high stress and still being able to finish all my tasks on time. The beginning of this project was something new for me.
New experience, new career, new people - lots of stress.
I learned how to deal with these obstacles and leveraged them to provide me with excellent preparation for my next project with a live client Fire Extinguisher. Practicing my stakeholder presentations helped me immensely in becoming a better presenter in general.
Designing a desktop application was something new for me. It was a big challenge because I didn’t have any experience in developing desktop apps before. We also had only four weeks to finish our project and to learn to use new software, tools, and skills needed to complete this project. Along with learning new design skills, I needed to improve my English, and that was the additional stress for me.
After finishing this project, I was particularly proud of how fast I learned new programs and acquired new technical skills. Using Sketch, Illustrator and InVision is now incredibly easy for me. The biggest software-related challenge was learning how to use Proto.io in the very short timeframe.
I'm happy to be able to say "Yes, I can make a presentation deck and present my work." That was big, actually, that was the biggest challenge for me. I can also now say that I know how to deal with feedback constructively. I discovered how to implement good critique and make iterations, and improve my work in that way. Finally, I found out how to work with different types of people; how to learn from them, and how to deal with various personalities. By completing this project, I have learned many new skills and gained a lot of experience in creating interfaces, which have helped me to become a better designer and an even better person.