DIALOG

00

CLIENT

TOOLS

TASKS

TIMELINE

DESIGNATION

SKETCH
INVISION

UI DESIGNER
INTERACTION DESIGNER
BRAND DEVELOPER

4 WEEKS

01

THE BEGINNING

MY CHALLENGE

A

               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:

02

RESEARCH

Before beginning our designs 
we needed to understand our 
product, domain, and users 
by conducting research 
in four 
main ways:
Through 
this we
identified:

  1. Reviewing UX assets: the 
    problem statement and user
    personas
  2. Competitor analysis

PROBLEM STATEMENT

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.

USER PERSONAS

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.

03

STYLE EXPLORATION

STYLE TILES

04

LOGO/NAME

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 
exploration I 
narrowed my 
search until I 
found a logo-
type that 
embodied the 
core values of 
my brand. 

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
our mockups.

05

WIREFRAME EVALUATION

MOBILE WIREFRAMES

06

DESKTOP
WIREFRAMES

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 
quickly complete 
tasks while main-
taining focus on 
their students.

With wireframe issues identified and remedied I was able to turn my attention to building my final mockups and prototype. 

07

FINAL PRODUCT

SCREENS, PROTOTYPE
STYLE GUIDE

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

FINAL MOBILE SCREENS

Here you can see a sampling of the final screens created. For additional states see the final InVision prototype below.

FINAL INVISION MOBILE PROTOTYPE

This InVision prototype shows additional states and screens I built to create user flows and demonstrates functionality for the parent-facing version of Dialog.

FINAL DESKTOP SCREENS/PROTOTYPE

This InVision prototype shows the screens and various states I built to create user flows for the teacher-facing version of Dialog.

MOBILE MARKETING SITE

This one page marketing site acts as an introduction to Dialog. Potential users can learn about functionality, benefits, and download the app.

08

MOVING FORWARD

FUTURE
CONSIDERATIONS

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.

S

FIN