Quill

 

Client: DESIGNATION | Timeframe: 4 weeks | Team: 3 UI designers

Brief: Create a brand identity and design mockups for a digital communication tool that allows parents and teachers to easily send and receive information about their students' academic and social progress.

My role: UI designer

Solution: I created high-fidelity desktop-facing designs for teachers and mobile-facing designs for parents.

desktop-browser.png

challenge

Quill is a concept app designed to facilitate parental involvement in the academic lives of their middle school children. Parents log onto a mobile platform where they can view information including their children’s grades, school activities, and teacher feedback all in one convenient location. Teachers have a separate desktop application where they can view their class activities, student information, and—most importantly—provide specific comments to parents regarding their children’s academic and personal progress. This app creates an environment in which parents and teachers have easy access to an open line of communication with one another and can keep track of their students’ progress throughout the school year.

The need for a practical communication tool arose from academic research that showed parental involvement decreased as students entered middle school. Several reasons led to this predicament, including:

  • Parents lacking time due to their busy work schedules

  • Parents fearing their children did not want involvement

  • Parents feeling like teachers were on opposing teams

Because parental involvement was crucial to students’ academic success, it was imperative that parents and teachers had a simple method by which to communicate on students’ breakthroughs and setbacks without hindering the daily schedules of either party.

This project was first given to a DESIGNATION UX team to address the problem of how to tap into a wealth of qualitative student information that was otherwise lost in the current communication process among parents and teachers. The UX team handed off their project deliverables to our UI team which consisted of two other UI designers and myself. We took four weeks to create mood boards, style tiles, high-fidelity mockups, and mobile and desktop prototypes of the app.

Because this project did not include a live client, we took freedom in creating a brand from scratch that best fit the needs of the targeted users. We relied on the UX team’s research to answer our UI questions and also collaborated with each other on our design work.

design journey

UX research

We initiated the project by analyzing the UX team’s deliverables which entailed domain research, competitive analyses, user personas, and user interviews.

The domain research and competitive analysis revealed that current educational apps focused heavily on qualitative data surrounding student achievements and one-way communication methods; this typical structure did not leave room for teachers and parents to expand upon students’ behavioral habits and personal growth.

Home-UX-desktop.png

The UX team remedied this situation with their wireframes, specifically creating a student log page for teachers to easily record their feedback on individual students and quickly send it to parents (and to other teachers if the situation warranted it). At that point, parents receive the information on their mobile apps and are able to contact the teacher for further discussion if they desire.

 

From user interviews the UX team refined the issue of how parents could reach out to teachers and receive informative comments on their child’s progress. They also addressed the dilemma teachers faced in finding a reliable channel to contact parents in an informal and more frequent manner.

The UX team constructed user personas reflecting these primary concerns and our team used these personas throughout the design process to push our designs towards resolving our users’ needs in the best manner possible.

user-personas.png
 

The user interviews and affinity diagramming data gathered from the UX team pointed out distinct areas each user party focused on as a main problem. Teachers were searching for a quick and easy way to reach out to parents whereas parents wanted more specific and personal insights into their child’s school life. The app would provide equal emphasis on these distinct needs of teachers compared to parents and ultimately give parties the tool to helping students achieve success in school.

Surveying the competition

We gathered information on 10 competitors who were both directly and indirectly related to educational tools used for parent-teacher communication. It was necessary to look at the out-of-category competitors to find what type of design patterns parents were used to and weave some of their elements into our designs. It was a struggle in the beginning to brainstorm out-of-category apps because I did not know what parents and teachers’ typical go-to apps would be. Despite this initial obstacle, I was able to create an opportunity in discussing the apps that my colleagues knew their parent and teacher friends were using, and branched off from there to determine the appropriate brands to analyze.

Some key competitors that stood out were Edmodo, Bloomz, Google Classroom, and ClassDojo.

all-competitors.png
 

Evaluating our competitors’ design decisions allowed us to condense our findings and advance in our design process. Our target audience were people who needed a product that they could trust and rely upon, especially because the app comprised of confidential data. Our app’s color palette would gravitate towards the cool end of the color spectrum because blue hues evoke emotions of trust and professionalism. Adopting the use of cards reduced the time it would take for users to digest information, helping them manage their time. These observations helped us proceed in formulating our design principles that would later on become touchpoints we referred to as we built out our designs. Taking our competitive analysis insights into consideration, I distilled my findings down to three design principles.

design-principles-quill.png
 

Logo Concept

Once the design principles were in place, I brainstormed ideas for the brand name and logo. The names “Branch” and “Skylink” stood out to me from my other ideas because they reflected the idea of bringing together two parties through their names. I improved my concepting skills through this process by using the word map tool where I quickly generated many logo design ideas connected to the names “Branch” and “Skylink”. My low-fidelity logo sketches centralized around nature-related themes and symbols that tied in with “Skylink” and “Branch”.

lowfi-logo-sketches.png
 

After presenting the initial logo and brand names to my creative director and colleagues, I discovered none of the three names fostered a connection to anything education-related, but instead reminded my peers of social media apps. Based off their critiques, I went back to the drawing board to brainstorm potential names that imparted a stronger educational connotation. I revised the app name to “Quill” to reflect the app’s primary use of being a tool for written dialogue. The name received positive feedback and helped solidify the brand.

 

At this point in the logo concept process my goal was to create a simple, clean geometric design with a strong silhouette to fit the overall sharp design of the app. I chose a strong shape because branding typically entails logo placement on a variety of materials, and it was important to create a logo that could maintain its integrity on various surface types.

final-logo.png

For the final version of the logo I decided to create a diamond shape with a minimalist quill overlaying the diamond to signify the unification of parents and teacher. Moreover, quill has always been a tool used to capture the important messages of history and carries a strong association as a tool of communication which represents the framework of this app. The journey through inventing a name and logo was highly challenging and made me appreciate the complexity that surrounds the creation of a brand identity from scratch.

 
 

Enhancing the user experience

I made two major revisions to the UX wireframes as I built out the high-fidelity screens. I referred to user testing notes and my knowledge of well-known design patterns as guides because our UI team did not have access to the UX researchers at this time.

The first feature teachers saw was their daily schedule and calendar section with events, making it very easy for them to modify or add events and activities that are bound to pop up.

Keeping our teacher user Mr. Henry in mind, I altered the home page to display the calendar as the dominant feature of the page in lieu of school announcements, which initially took up valuable real estate. The UX team’s user notes showed that teachers wanted the calendar function to be more prominent, and in my design I made the calendar bigger and paired it with a daily schedule so that teachers could quickly see what their schedule looked like. This modification supported teachers’ scheduling needs without detracting from the importance of the other features.

sidebyside1.2.png
 

After visiting the home page, Mr. Henry’s next step may have been to visit the class period page, where he would’ve likely seen the grid layout displaying his current roster of students. This type of pattern was not conducive to teachers’ time management flow because they were impeded in finding student information compared to if the information was displayed in list view. I also implemented a sorting and filtering feature to provide teachers control over how they wanted to categorize student information to help them accomplish their goals. Taking the time to think of other design patterns confirmed my use of the list-view pattern because it was a standard pattern that worked well with the long lists of student names.

studentlog-sidebyside.png
 

Final Design

The four weeks of researching competitors to building out the prototypes resulted in an educational product specifically tailored to the current needs of our targeted users. Ultimately the alterations to the wireframes and creation of the high-fidelity screens led to a successful product that bridged the crucial gap between parents and teachers. The high-fidelity screens I created were a reflection of the UX modifications and iterations based on feedback from my creative director and peers.

Download the desktop prototype here.

1. home.png
 
macbook-desktop-messages.png
4. roster.png
mobile2.png
 

Future Plans

If I could take the project further with Quill, I would first and foremost conduct user testing with middle school teachers and parents to glean insights from them. Their feedback would be invaluable in providing me with knowledge on their initial thoughts and assumptions of the app and how they would navigate and explore its features. With their comments I could go back to revise my screens to improve functionality in addition to possibly enhancing their emotional experience.

I would also have loved to explore and expand upon the community feature for parents that goes beyond messaging one another in the app. The exploration of how parents are looking to interact with one another and what their goals are for these types of interactions is an area for my personal UX growth.

 

Insights

Upon reflection, I recognized some areas where I needed to work on improving in future projects:

  • The process of creating design principles. I realized my design principles were too broad to be successfully used as a guide when I designed my screens. Instead, I relied on looking at the UX wireframes and user personas which guided my design process in creating the screens that would best enhance functionality. Moving forward, I’d work on crafting stronger design principles by thinking about the specific goals the product’s attempting to achieve and the solutions it’s providing for intended users.

  • The process of creating a brand name and logo. Building a brand from the ground up was a momentous experience because I had total control over everything from the typeface to the color. It was overwhelming at first to concoct a logo I deemed suitable for Quill, but I was able to turn the challenge into an opportunity to own my design work and convey its meaning to a design audience. In the future I’d generate more diverging variations of the style I was going after. I definitely look forward to sharpening this process in future projects.

  • Design pattern awareness. After designing the desktop screens I learned that having boxes within boxes was not a good design decision to make. Creating an unclean design caused users to struggle in digesting the information they saw.

  • Defending my design decisions. Having the chance to present my work to more experienced designers was both a wonderful and nerve-wracking experience. Throughout the project phase I improved the way I communicated my design decisions by constantly asking myself the reason why. This ability to deliver sound reasoning to all the design choices I made and will make is a skill that can only be sharpened, a notion that I carried into my first client project Fire Extinguisher.