student’s academic success is
forged by three parties–
parent, teacher, and student.
Studies have shown the level of parental involvement in a student’s academic life to directly relate to their academic success. Despite this knowledge, teachers often find themselves overwhelmed by student-facing tasks and lack the time and resources to foster relationships with parents.
Understanding this, a UX team at DESIGNATION was tasked with creating a product to connect parents and teachers to drive student success. Their solution was a parent-facing mobile application and teacher-facing desktop application with a working name of Brite Line. These were designed to foster parent/teacher relations and allow each party to stay connected to their student(s). My UI team was tasked with taking this product and developing its branding and design of the mobile and desktop applications. We did this by creating the brand name, logo, style tiles, high fidelity mockups, a high fidelity prototype, and a marketing site. Key screens for mockups were:
Before beginning our designs
we needed to understand our
product, domain, and users
by conducting research
We evaluated 11 competitors, nine in-category and two out-of-category. We wanted to assess how well our competitors conveyed the characteristics eRetirements needed. From this we could implement what they were doing well or improve upon what they were doing wrong.
Personas highlightoth parents and teachers, and identified their shared interest in communicating with one another as well as individual stumbling blocks in doing so.
Henry is an older, traditional teacher. He has been teaching for 30+ years and is driven first and foremost by the academic success of his students. His day is busy and he is frustrated by having to double communication efforts in order to connect with parents but also finds the integration of technology into his work day a hassle.
In order to connect with Henry our application would need to prioritize ease of use and speed. Options would need to be available up front and strong hierarchy would be of utmost importance to allow for quick identification.
Sung-Min is a busy, immigrant father of two and small business owner. He wants to be involved in his childrens’ schooling but is unsure of how and feels he is too buys and lacks the proper support to do so.
In order to connect with Sung-Min our application would need to use traditional mobile patterns and functionality would need to be easily recognizable. With his busy life, Sung-Min would need to be able to pick up our application and use it immediately.
These assets revealed a key consideration that would become a linchpin in my design development:
Brite Line had two distinct parts to it and each aimed to solve problems for a fundamentally different user – the parent and the teacher. Each presented unique challenges to solve for and different platforms to build my solution on. To complicate things further, we needed to design solutions for a third stakeholder, the student. Branding and subsequent designs would need to address all three.
With research completed and takeaways formed, direction for my brand exploration became clearer. If the playful and illustrative nature of some applications could be tempered by elements from the professional applications, a design could speak meaningfully to all three parties.
To begin, I explored multiple names and visual symbols representing conversation. As I moved from brand adjectives and word associations to hand-drawn
logos to vector
search until I
found a logo-
core values of
Though the branding and
for DiaLog was somewhat complete, my work was just beginning. It was time for
me to turn to the wireframes to be used in creating
The desktop application required larger changes. Since insights gleaned from the UX research told me this platform needed to prioritize speed and ease of use I created an interface that clearly defined its page structure and presented main functionality up
front. This would
allow teachers to
tasks while main-
taining focus on
With wireframe issues identified and remedied I was able to turn my attention to building my final mockups and prototype.
My director was very happy with the results of this project. He felt the branding, especially spoke to Dialog's target audience very well and the balance I had struck between scholastic and professional elements played a large role in achieving this.VIEW MARKETING SITEVIEW PROTOTYPEVIEW PROTOTYPE
Here you can see a sampling of the final screens created. For additional states see the final InVision prototype below.
This InVision prototype shows additional states and screens I built to create user flows and demonstrates functionality for the parent-facing version of Dialog.
This InVision prototype shows the screens and various states I built to create user flows for the teacher-facing version of Dialog.
This one page marketing site acts as an introduction to Dialog. Potential users can learn about functionality, benefits, and download the app.
If I had the chance to continue building out DiaLog, there are are two tasks I would focus on:
implify the layout. The
gradebook and student
screen still read as visually
busy because of the blue lines separating the individual cards. I would remedy this by making them a light grey or doing away with the spacing altogether and allowing the horizontal alignment to connect the elements
Iterate on the home screen. Because of the variation in items comprising this screen, the layout is also still visually busy. This requires further iteration on the layout, the sizing of items and color considerations.
Prototype Dialog with a program such as Proto.io or Principle. This can illustrate how my product would delight users and set itself apart from competitors using microinteractions. This would also allow me to convey to stakeholders how elements such as the carrot from the speech bubble would interact with other elements.