Skip to content
← Portfolio

Case study  /  Product design  /  Frontline Education

One page for a whole career of learning.

As lead senior UX designer, I took on a problem in Frontline Professional Growth: three core products and no single view of an educator’s learning. My Growth Journey is a learner-focused front page that brings together what a person has done, what they are doing now and where they are headed. It helped the product win a Tech & Learning Award of Excellence.

Client
Frontline Education
Product
Frontline Professional Growth
Role
Lead senior UX designer
Users
Teachers and other educators, as learners
Scope
A new front page for three products: concept, rough drafts, critique and final design

01 / The context

Three products, no single view.

Professional Growth was built from three core products, each with its own features and its own place in the app. A district might use one, two or all three.

The data an educator generated was spread across them. There was no single source of truth that gathered it, so an individual had to hunt through separate areas to see what they had completed, what was in progress and what was expected next.

The brief was a new front page for the learner: one place that pulls existing data together and might replace the Learning Plan page or the landing page.

3

Core products, with separate features

1

Learner-focused front page

4

Questions the first concept asked

02 / Goals and direction

Unify the data, then make it engaging.

The project board set out what the page had to do and a first direction for how it should feel: graphical, visually appealing, and shaped like a journey.

01

One front page

Unify the functionality of the three core products in a single learner-focused page.

02

One place for the data

Show an individual learner’s existing data together, for ease of use and access.

03

Possibly replace

Take over from the Learning Plan page or the landing page, if the new page earned it.

The first design direction

01

Where have I been?

Completed activities, resources and evaluations.

02

Where am I now?

Current activities, resources and evaluations.

03

Where am I going?

Upcoming activities and goals.

04

How do I get there?

Recommended activities, shared resources and new opportunities.

03 / Starting point

Sketches, a benchmark and a loop.

I began with handwritten notes and a look at how LinkedIn Learning’s home page handles goals, top picks and trending courses. Then I drew the idea as a loop an educator moves around: what I did, where I am going, how I get there, what I am doing.

The loop made a real constraint visible: districts can have the learning product, the evaluation product or both, and some older clients have a different pair. Whatever the page showed had to make sense with only some of the data present.

A note from the board: the loop is “more high level than user journey maps I’ve seen before.” Most focus on a specific task and the experience at each step.

04 / Sorting the page

What gets the best seat?

Before drawing layouts, I sorted every piece of data by two questions: how often will people look at it, and how much does it matter to them?

The data fell into four groups that became the page’s spine: Continue, what I am doing; Accomplishments, what I have done; Next Steps, where I am going; and Recommendations, how I get there.

Current enrollments, proposals and needed actions sit under Continue. A portfolio, history and evaluations tell the story of Accomplishments. Personal, building and district goals, and evaluation scores, drive Next Steps.

05 / Drafts and critique

We argued with the concept.

The four questions became tiles across the top of the page. I drew them bold and quiet, open and collapsed, then shared them with the wider team and asked for feedback on the styles and on the latest version.

The critique

Clever, but is it clear?

Comments were left as sticky notes on the board. The loudest theme: the four-question idea was charming but made people work harder than a plain label would.

What people said

The concept of these 4 categories seems to overly complicate the concept. “recommendations” is a lot quicker and clear than “How do I get there”.
The questions on the tiles seem a little gimmicky.
“Where” may be repeated too many times.
Not clear that these are selectable.

The user stories that came back

As a user, I want to know what I need to do now.
As a user, I want to know how much longer I need to go to finish a learning unit.

06 / The design

Where I’ve been, where I am, where I’m going.

The feedback changed the page in two ways. The journey became a calm strip of three selectable tiles. Recommendations moved to a column on the right, and the loud blue panel was retired.

Styling feedback

Use color, but don’t shout.

Reviewers questioned the light blue bevel (“we don’t do it anywhere currently”) and noted that the solid blue panel created an odd focal point. The final page uses quiet white cards and saves color for status.

Where I’ve been

A career as a timeline.

Completed work is plotted as dots on a timeline, colored by type: PD activities, exploratory learning, logs and evaluation elements, each with a count. A date range and school-year filter change the view, and hovering a dot opens that activity.

Below the timeline, a sortable table lists each event with its format, credit and completion date.

Where I am now

What I need to do today.

The “now” view answers the first user story. Activities in progress show how far along they are, with a bar and a count. Attention Required lists what is incomplete, with a View button beside each.

My Requests, My Employee Evaluation and My Log Entries follow, so the three products’ data lives on one page. Alerts for maintenance and new registrations sit above everything and can be dismissed.

Where I’m going

Goals, with the work behind them.

Upcoming PD sits above a Goals area with tabs for District, Personal and Building goals. A chart shows how many activities are assigned to each goal. Each goal expands to the activities that support it, with category, credits and objective.

The right column carries the recommendations: Recommended, Shared With Me, New Learning Opportunities and Product News.

How the goals view evolved

Four passes at one chart.

The goals view was the hardest to get right, because it had to show progress against goals without turning into a spreadsheet. These are the passes, in order.

First pass: enrolled activities against each goal.
Second pass: enrolled and available activities stacked.
Third pass: activities assigned, with a hover card on each activity.
Final pass: a sortable table of category, credits and objective.

07 / The outcome

Best of 2021.

In February 2022, Frontline announced that Professional Growth had won a Tech & Learning Award of Excellence: Best of 2021. The announcement described My Growth Journey as the product’s latest addition: a learner-focused portal with dashboards of an educator’s professional learning activity and engagement over a career.

Tech & Learning Awards of Excellence, Best of 2021, Winner

Tech & Learning · Awards of Excellence · 2021

Frontline Professional Growth

A panel of educators judged nominees on how well products support different learning environments and student needs, plus value, versatility and ease of use. Frontline also won for Student Health Management in the same program.

Read the announcement ↗

In Frontline’s words

“We view these awards as validation that we are delivering problem-solving solutions to our client partners.”

Kevin Haugh, Chief Product Officer, Frontline Education

What I took from it

01

Ask for the argument early

Putting rough drafts in front of colleagues before polishing them surfaced the biggest problem, an overly clever concept, while it was cheap to change.

02

Plain beats clever

Labels people already understand beat a metaphor they have to decode.

03

Let the data lead

Sorting content by how often and how much it matters gave the page its order, before any styling.