daniel

Wedding videos are my thing

I also climb/backpack/adventure

The Graide Network

landing screen rev c.jpg

overview

For a lot of middle and high school teachers, they would rather spend time to focus on their students than on grading papers through the night. That's where The Graide Network comes in; to redefine how these teachers spend their time, how students experience feedback, and how college education programs prepare aspiring teachers, who are the graiders. (graders + aids = graiders)

My design team was tasked to create high-fidelity screens off of existing wireframes.

CLIENT

The Graide Network

ROLE

UI Designer


Exploration

Visual Competitive analysis

With the given task, I started the design process by researching other companies that offer a platform for online grading. This included Prompt, Gradiate and ClassroomIQ.  Airbnb was also added since The Graide Network is looking to "redefine" and to "shake up" the education space. 

 

Prompt

  • Colors: a blue-ish/green
  • Simple layout
 

Gradiate

  • Colors: blues/greens
  • Use of icons and photography that feels connective
gradiate.jpg
 

ClassroomIQ

  • Brighter colors of blue/yellow
  • Playful icons and font
 

Airbnb

  • Selective use of their pink color
  • Great organization of information
  • Iconography

Overall, the observations were that the competitors used a lot of blue and greens. 

Style Exploration

From the competitive analysis, two style tiles were made, one that explored the client's current style and another that explored a disruptive look. For the current style, the use of different shades of green were explored. And for the disruptive style, multiple colors were explored, where they would be used for accenting purposes, which is what companies like Lyft and Airbnb does. 

 

Style tile #1 - Current style

Explored the use of monochromatic colors of green, since that's their current primary color.  

 

Style tile #2 - Disruptive style

In this style, I explored brighter colors and a look that's engaging, but not playful. 

Client's feedback:

After presenting these 2 style tiles, the feedback for the first one was that they liked the use of monochromatic colors and that it was a good first step to explore a different look to their current design. And for the disruptive look, they felt it was a bit playful, but wanted me to keep exploring the usage of a variety of bright colors. 


The design

Key Screens/Aspects

1. Home Page - The teachers that we focused on were teaching up to 2 subjects, max, while having 6 different sections. (sections are like class periods). So, that's why I decided that when teacher's look at their dashboard, they should be able to quickly identify the section that they're looking for. 

2. Posting an Assignment - Because the teachers have so many content to input, this page needs to be simple to navigate and organized. Another aspect of this page is choosing a graider. By putting a photo of the graiders, and a short background info on them, I was hoping that it would help the teachers feel more connected to their graiders. 

3. Grading Reports - This was another design challenge, due to the complexity of the page and just the amount of information involved. I wanted to keep a clean and simple design and that was challenged by the comment section. I didn't want the pages to be text heavy, but also to not hide anything from the teachers. The client had expressed that if there was a short preview of the comments, then they might be more likely to click in them. But I stood by my clean & simple design because no where else had I created a text heavy page.

TYPOGRAPHY & COLORS

For typography, I used Avenir for the modern look because the client had expressed how teacher's felt so tired of working in an old school system. And since The Graide Network is trying to become the modern solution, I thought a font like Avenir would give off that impressions. For color, they had just changed their primary color from blue to green. So, I explored a color of green that was bright and welcoming, but not soft and playful. Taking this note, I also used blue for links on the page and orange for notifications. 

Final design

The two style tiles were combined to where the whites and negative spaces made up more of the pages. And for the other colors, it was important that they were exclusively used for accenting purposes. 

Client's feedback:

Conclusion

As my first UI client project, I learned the importance of having a reason for all my designs. Some of these examples were the choice of colors; I learned that less is more and the subtlest of colors can make a huge difference. I also learned to always design for the user and not to create something purely visual. For the teachers, the different periods are really important to them, so I decided to notify them of that by making the font color green, so that it pops out to them and they don't have to search through the pages. 

I can, now, also say that I went through design sprints, going from the exploration stages, and focusing down to a singular design that represents The Graide Network.

I also learned to stay consistent in my design choices, especially in the usage of color.