Top
OVERVIEW

Practising Law Institute (PLI) is a non-profit, continuing legal education organization. Our objective was to redesign and develop an online education platform for lawyers. I collaborated with the designers, PMs, and developers of Work & Co to revamp PLI's design. We showcased our shared vision of a reimagined digital experience through smart content recommendations, seamless media viewing, and a refreshed user interface.

EXPERIENCE

Work & Co

TEAM

6 Product Designers
3 Product Managers
2 Software Developers

DURATION

3 Months

my role

My involvement encompassed three design sprints, focusing primarily on refining the homepage, enhancing the media player functionality, and advancing the design system.

MY CONTRIBUTIONS

During the detailed design phase, I contributed to 3 design sprints
and mainly worked on the homepage, media player, and design system.

THE CHALLENGE

Create a best-in-class mobile app experience for legal education

CHALLENGE

Create a best-in-class mobile app experience for legal education

Content Recommendations

Improve onboarding and personalization based on interests and credit needs

Media Player

Improve credit redemption experience

Browse & Search

Improve way-finding across the entire catalog of content

SOLUTION

Automated Personalized Content

To improve personalization based on interests and credit needs, the homepage is auto-populated depending on the profile/user behavior data availability.

Seamless Media Viewing

With the improved video controls, credit submissions are easily accessible to users at any point in a segment or program.

Intuitive Browse & Search

Users can efficiently search and locate content that meets their specific requirements and preferences.

Project Timeline
Concepting

Gaining Perspective

Conducting a comprehensive exploration of various strategic approaches and investigating the product's offerings and features.

Discovery

In order to formulate UX principles for shaping the app's user experience, we engaged in a brainstorming session, setting aside considerations of feasibility and viability. Some of the prompts we explored included:

  • How might we add personalization (passive recommendation) and customization (active selection) to surface the right content?

  • How might we engage and provide guidance to users as they navigate the content, ensuring they have a clear sense of their location and a feeling of control?

Competitive Audit

As PLI content is characterized by its informative and accomplishment-oriented nature, we conducted a comprehensive analysis of other platforms in these categories, focusing on fulfilling three primary user needs: finding, flowing, and finishing.

  • Finding: elevating content that is useful, relevant, and interesting

  • Flowing: ensuring seamlessness and ease throughout

  • Finishing: guiding users through each content segment toward clear next steps

Exploring Frameworks

We thoroughly examined a range of strategic methods and integrated the second and third frameworks that align with the product's primary objectives: guiding users to access the appropriate content (for credits, meeting deadlines) and facilitating effortless transitions between different content types and formats (from web to app, Live to On-demand).

concept 01

Immersive / Tailored / Customizable

What if the app focused credit seeking into a series of goals around different credit types, to help the Member finish their requirements?

concept 02

Guided / Utility / Seamless

What if the app could offer playlists to guide a Member through all their credit requirements, and keep them in the flow of earning CLE credit?

concept 03

Engaging / Fresh / Academic

What if the app surfaced personalized editorial content, helping Members browse, find an interesting segment, and learn with credit seeking as a byproduct?

Outlining the Structure

We meticulously designed the information architecture (IA) to facilitate easy content discovery while minimizing unnecessary steps and cognitive load for users.

homepage

Home Content Logic

Our goal was to improve onboarding and personalization based on interests and credit needs.

Automated Personalized Content

Home is auto populated depending on the profile/user behavior data availability. Always prioritize the related recommended module versions when the profile data is available to provide a more personalized experience.

Curated Content

When profile/user behavior data is not available, show broader recommendations to users. Use these modules to promote PLI programs.

media player

Seamless Media Viewing

Our task was to increase user engagement and provide seamless media viewing by improving the media player.

option a

Displaying program queue on timeline bar

Pros

  • Prioritizes credits

Cons

  • A bit cramped on timeline bar, transcript icon gets a little small
  • Transcript still might not be clear to users as a way to change the view of the video player
option B

Keeping queue on media player

Pros

  • Transcript is clearer as a toggle and feels like a control to the whole video
  • Program segments are still on the media player
  • Settings are grouped together

Cons

  • Credits are a little bit harder to find because they are not on top
  • Video toggle and video is duplicate functionality
option C

Moving queue to overflow menu

Pros

  • Prioritizes credits
  • Transcript feels clearer as a toggle
  • All program details are grouped together in overflow
  • Settings are grouped together

Cons

  • Video toggle in transcript mode is a bit redundant with video thumbnail
  • CC are slightly harder to find, but it is still a common placement for video players
final version

Media Player

Based on the user testing and internal discussion, we finalized the media player that best solved the credit issue.

iPhone 13 mockup

First priority

Modules that require profile data to provide smart recommendations about non-completed, non-watched, and live content.

Second priority

Modules that require profile data to provide smart content recommendations.

Third priority

Modules that don't require profile data.  When the profile data is available, show the personalized versions of the modules.

DESIGN SYSTEM

Building Design System

To add consistency to the overall product and make it easier to collaborate, I crafted visual elements and components that adapt and flow with responsive design system. I also constructed prototype library for developer handoff.

DETAILED DESIGN

Automated Personalized Content

To improve personalization based on interests and credit needs, the homepage is auto-populated depending on the profile/user behavior data availability.

iPhone 13 mockup
iPhone 13 mockup
iPhone 13 mockup
iPhone 13 mockup
iPhone 13 mockup

Seamless Media Viewing

With the improved video controls, credit submissions are now easily accessible to users at any point in a segment or program.

Intuitive Browse & Search

Users can efficiently search and locate content that meets their specific requirements and preferences.

iPhone 13 mockup
iPhone 13 mockup

Keeping our planet clean
by inspiring and connecting ploggers

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare."

Name Surname

Position, Company name

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare."

Name Surname

Position, Company name

Feedback

Feedback on personalization, usability, and overall design

"This experience is taking a lot of the bells and whistles of the website, and condensing it to be very easy to get to what I needed - download, ease of access, ease of use. This made a huge impression on me."

Ryan Stevens

Lawyer

"I like that it auto-generates content and suggests things you'd be interested in. If I have to go in and get ethics credits, finding content I need and would be interested in is right there so I don't have to do a bunch of searches."

Ashley Krause

Accountant

"Design looks sleek, looks really nice. I like the simplicity, the black and white. It's more sleek and modern looking than the existing design."

Steve Jackman

Lawyer

Reflections

It was a transformative learning experience, joining Work & Co and collaborating with the PLI Team. Being surrounded by so many talented designers and receiving feedback through exchanging opinions and listening to how other designers critique each other broadened my perspective of the inner workings of the industry. Alongside this, I was also able to continue building my technical design skills and grow as a product designer.

Communication and collaboration

Working within a large team, communication was key to our collective success. I contributed to daily team meetings and weekly client meetings and was able to glean key insights into presenting design to clients who may not be well versed in the discipline.

Getting down to business

As a designer, I admit to having fallen into the trap of considering products only from the design side, obsessing over my own vision of experience and visuals. By working in industry, I came to terms with the fact that designer considerations are secondary to the realities of business. The task is not to create the perfect product according to my own standards, but to do so for the client according to their time and budgetary constraints. Though ego-battering, this experience has led me to become a far finer designer than I had been previously and I am grateful for it.

Dummy Dummy

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

MY CONTRIBUTIONS

During the detailed design phase, I contributed to 3 design sprints and mainly worked on the homepage, media player, and design system.

  • Worked on the homepage structure and logic

  • Created a seamless media player experience

  • Built design system, and prototype library for developer handoff

During the detailed design phase, I contributed to 3 design sprints
and mainly worked on the homepage, media player, and design system.

  • Worked on the homepage structure and logic

  • Created a seamless media player experience

  • Built design system, and prototype library for developer handoff

Tagline

Medium length section heading goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Subheading one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.

Subheading two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.

Customer testimonials

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat."

Name Surname

Position, Company name

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat."

Name Surname

Position, Company name