Natasa Todorovic

EdUnity

school hero1.png

EdUnity

School Application


Client: DESIGNATION                         Role: UI designer                       Tools: Sketch, Illustrator, Photoshop, InVision, Proto io.                             Timeframe: 4 weeks


Create a better parental involvement in school

OVERVIEW

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.


CHALLENGE

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.

desktop wires 1 together.png

Parents like to check things on the go so mobile app was a better solution.

mobile wires2 together.png

PERSONAS

After reviewing the wireframes, our next step was to analyze user personas. The UX team created two personas: Sung-Min and Henry.

sungmin.png

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.

henry1.png

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.


COMPETITORS

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.

comp1.png

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.

comp2.png

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.


INDIVIDUAL WORK

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.

Within my first mood board and style tile, I wanted to invoke feelings of connectivity and create an inviting environment for the users. I implemented orange colors for CTAs and simple UI elements to suggest action and involvement. A gradient made t…

Within my first mood board and style tile, I wanted to invoke feelings of connectivity and create an inviting environment for the users. I implemented orange colors for CTAs and simple UI elements to suggest action and involvement. A gradient made the interface more exciting and dynamic. This first design approach represented connections between teachers and parents.

My second mood board and style tile were minimal. Using dark blue alongside a yellow-gold color, I sought to achieve a more professional, serious and elegant feeling. Also, I wanted to use sharp corners with simple, clear UI elements.

My second mood board and style tile were minimal. Using dark blue alongside a yellow-gold color, I sought to achieve a more professional, serious and elegant feeling. Also, I wanted to use sharp corners with simple, clear UI elements.

With the third style, I wanted to invoke a friendlier feeling. I chose green as the primary color because it’s known to improve legibility, suggests stability as well as a sense of contributing to society. I wanted to evoke a feeling of belonging th…

With the third style, I wanted to invoke a friendlier feeling. I chose green as the primary color because it’s known to improve legibility, suggests stability as well as a sense of contributing to society. I wanted to evoke a feeling of belonging that was friendly and warm. I also wanted to instill a desire in users to come back and use the application again.


LOGO

With the name and design style of the app established, I started to work on logo sketches.

logosketches.png

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.

1st logo school.png

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.

2nd logo school.png

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.

final logo school.png

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.


WIREFRAMES EVALUATIONS

Mobile app

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.

 

On this welcome screen, I changed the button order. We wanted parents to register themselves within the application. First, I thought that it was much better to include a Create Account button as the first CTA. I also added a short tagline that read…

On this welcome screen, I changed the button order. We wanted parents to register themselves within the application. First, I thought that it was much better to include a Create Account button as the first CTA. I also added a short tagline that read Your scholastic community to give users a bit of a hint about the purpose and value of the app.

I changed Create Account to make it more clear and understandable for users. I created bigger input fields and labeled them, thinking this made it a huge guide for users. It was important for users to always know what kind of information they needed…

I changed Create Account to make it more clear and understandable for users. I created bigger input fields and labeled them, thinking this made it a huge guide for users. It was important for users to always know what kind of information they needed to provide.

I modified way how grades are presented. Users could see reviews for each subject separately labeled in different color shades. I thought the lowest grade should be shown in the strongest color and intensity to attract the most attention as a warnin…

I modified way how grades are presented. Users could see reviews for each subject separately labeled in different color shades. I thought the lowest grade should be shown in the strongest color and intensity to attract the most attention as a warning for parents, advising them to take more action in helping their child in that individual subject.

I removed an arrow from the drop-down menu. In its place, I put an option that opens up a pop-up modal with the name of the teacher, the subject and an option to call or send a message. I thought it was much more accurate and clear, and presented a …

I removed an arrow from the drop-down menu. In its place, I put an option that opens up a pop-up modal with the name of the teacher, the subject and an option to call or send a message. I thought it was much more accurate and clear, and presented a way of avoiding overcrowding the screen.

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.  


Desktop version

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.

I put the calendar in a visible place and replaced the icons with a labeled navigation bar. I also removed the teacher’s profile information from the navigation bar and set it on the top left side of the homepage to make it easier for teachers to ac…

I put the calendar in a visible place and replaced the icons with a labeled navigation bar. I also removed the teacher’s profile information from the navigation bar and set it on the top left side of the homepage to make it easier for teachers to access their profile information.

In addition, I changed the messaging options. The UX wireframes gave users the option of clicking on a message bar on the right side of the homepage. It made a message modal appear. In my opinion that wasn’t a good solution for the message feature b…

In addition, I changed the messaging options. The UX wireframes gave users the option of clicking on a message bar on the right side of the homepage. It made a message modal appear. In my opinion that wasn’t a good solution for the message feature because it is unusual to have slide modals on desktop applications and might provide another point of confusion for the users. I made a design decision to put the message option on the navigation bar too.

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

Mobile

I started designing my high fidelity prototypes once all my mid-fidelity wireframes received the green light from my creative director.

I used a picture with three hands overlapping to match the logo, and show users that by using this app, they could make strong connections with other members of a school community. I chose to use the gradient on buttons, navigation bar, and some ele…

I used a picture with three hands overlapping to match the logo, and show users that by using this app, they could make strong connections with other members of a school community. I chose to use the gradient on buttons, navigation bar, and some elements to make the app more appealing to users. The tab bar contained recognizable icons which gave users an opportunity to use the app without confusion. Whenever users went to different sections, icons on the tab bar were filled with color so they’d know where they were in the application and didn’t feel lost. I presented students’ grades in a different color shade so parents could track their progress and see which subject they needed to pay the most attention to.

desktop hif firstround.png
desktop hifid first.png

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.

Calendar seemed to be complicated to understand and use, and users also needed to take an additional step to get to the calendar. I decided to put it on the homepage so teachers could see their timetable immediately after logging in. Also, I changed…

Calendar seemed to be complicated to understand and use, and users also needed to take an additional step to get to the calendar. I decided to put it on the homepage so teachers could see their timetable immediately after logging in. Also, I changed the layout of the design. I implemented card design for a more modern look and to make clearer separations between sections. That way, I helped users easily spot functionalities they needed.

I moved the message feature onto a separate page and decided to lose the drop down menu because it resulted in the page looking overcrowded. Within this new design, teachers were able to have a look at messages, notifications and a chat box all on t…

I moved the message feature onto a separate page and decided to lose the drop down menu because it resulted in the page looking overcrowded. Within this new design, teachers were able to have a look at messages, notifications and a chat box all on the same page. The right side of the page displayed all the information of the person you were currently chatting with. With this design, users had better transparency and easy access to all messages and notifications.

The student profile section had a new look as well. I changed button colors to make clear CTA’s. On the student profile log section where teachers post information about students, I used green and made that part more eye-catching and compact, becaus…

The student profile section had a new look as well. I changed button colors to make clear CTA’s. On the student profile log section where teachers post information about students, I used green and made that part more eye-catching and compact, because I wanted teachers to notice immediately that part and to see all available options so that they could make a valid comment about a student.


PROTOTYPE

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

 
 
edunity-giflogo.gif

MARKETING WEBSITE

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.

edunity_marketingwebsite_desktop.gif
EdUnity_marketing_gif-mobile.gif

FUTURE CONSIDERATIONS

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.