JustBooks Design System
JustBooks Design System
JustBooks Design System
Helping case workers
Helping case workers
Helping case workers
refer seamlessly
refer seamlessly
refer seamlessly
Product Design
Design systems
User Research
Product Design
Design systems
User Research
Product Design
Design systems
User Research
Role
Designer
Duration
June - Aug 2023
team
Kelly
Phil
Corina
An
Quymbee
The Shelf System
In 2022, I led the redesign of their website and while redesigning the web and mobile experiences I also focussed on creating a clean and comprehensive design system along with a design library to maintain a cohesive brand. Post the redesign, engagement increased by 34% in 2 months and the average session duration went up by 66% with 500 visitors/day.
JustBooks is an online books and magazine rental system with over 200,000 customers. Readers can choose from their large collection of over 1 million books and magazines. JustBooks is a convenient and affordable way for book lovers to enjoy a wide variety of reading material.
This case study focuses on the Design System.
The Atomic Structure
For this design system I decided to follow the atomic design system structure. First we focussed on creating the foundational system on which the building blocks (atoms) would be placed and built.
The Foundation
To build a strong structure our foundations for the The Shelf System had to be strong
Colors
The brand uses a very strong red called the “First Edition Red”, since the primary color of the brand is so strong, other colors were used very sparingly
Colors
The brand uses a very strong red called the “First Edition Red”, since the primary color of the brand is so strong, other colors were used very sparingly
What is the Goal for this feature?
Accelerate benefit access by implementing a streamlined workflow for swift client referrals within and outside the organization.
1
Reduce time taken to find the right organization
3
Reduce time outside of Kiip to send details to case workers
2
Increase the availability of benefit options
4
Reduce time spent to send documents to next organization
The Shelf System
Stephen Mayer, a Salt Lake City native, was nurtured in the publishing world by his magazine-running father and developed a fascination for fonts upon receiving a Mac for his family. During his collegiate years, he skipped lectures and gained knowledge about typeface—and life—by working as a designer for his university newspaper.
He also worked independently as a consultant, bridging the gap between typeface creators and users, always championing the needs of both parties. Not only is he the co-founder of the web platforms, Typographica and Fonts In Use, Stephen has also penned a regular column for Print magazine and authored the acclaimed book The Anatomy of Type. In 2017, he became an integral part of the nonprofit library and museum, Letterform Archive, as an Associate Curator and Editorial Director.
The Atomic Structure
Stephen Mayer, a Salt Lake City native, was nurtured in the publishing world by his magazine-running father and developed a fascination for fonts upon receiving a Mac for his family. During his collegiate years, he skipped lectures and gained knowledge about typeface—and life—by working as a designer for his university newspaper.
He also worked independently as a consultant, bridging the gap between typeface creators and users, always championing the needs of both parties. Not only is he the co-founder of the web platforms, Typographica and Fonts In Use, Stephen has also penned a regular column for Print magazine and authored the acclaimed book The Anatomy of Type. In 2017, he became an integral part of the nonprofit library and museum, Letterform Archive, as an Associate Curator and Editorial Director.
The Foundation
To build a strong structure our foundations for the The Shelf System had to be strong
Stephen Mayer, a Salt Lake City native, was nurtured in the publishing world by his magazine-running father and developed a fascination for fonts upon receiving a Mac for his family. During his collegiate years, he skipped lectures and gained knowledge about typeface—and life—by working as a designer for his university newspaper.
He also worked independently as a consultant, bridging the gap between typeface creators and users, always championing the needs of both parties. Not only is he the co-founder of the web platforms, Typographica and Fonts In Use, Stephen has also penned a regular column for Print magazine and authored the acclaimed book The Anatomy of Type. In 2017, he became an integral part of the nonprofit library and museum, Letterform Archive, as an Associate Curator and Editorial Director.
Stephen Mayer, a Salt Lake City native, was nurtured in the publishing world by his magazine-running father and developed a fascination for fonts upon receiving a Mac for his family. During his collegiate years, he skipped lectures and gained knowledge about typeface—and life—by working as a designer for his university newspaper.
He also worked independently as a consultant, bridging the gap between typeface creators and users, always championing the needs of both parties. Not only is he the co-founder of the web platforms, Typographica and Fonts In Use, Stephen has also penned a regular column for Print magazine and authored the acclaimed book The Anatomy of Type. In 2017, he became an integral part of the nonprofit library and museum, Letterform Archive, as an Associate Curator and Editorial Director.
What is the Goal for this feature?
Accelerate benefit access by implementing a streamlined workflow for swift client referrals within and outside the organization.
1
Reduce time taken to find the right organization
3
Reduce time outside of Kiip to send details to case workers
2
Increase the availability of benefit options
4
Reduce time spent to send documents to next organization
The Shelf System
In 2022, I led the redesign of their website and while redesigning the web and mobile experiences I also focussed on creating a clean and comprehensive design system along with a design library to maintain a cohesive brand. Post the redesign, engagement increased by 34% in 2 months and the average session duration went up by 66% with 500 visitors/day.
JustBooks is an online books and magazine rental system with over 200,000 customers. Readers can choose from their large collection of over 1 million books and magazines. JustBooks is a convenient and affordable way for book lovers to enjoy a wide variety of reading material.
This case study focuses on the Design System.
The Atomic Structure
For this design system I decided to follow the atomic design system structure. First we focussed on creating the foundational system on which the building blocks (atoms) would be placed and built.
The Foundation
To build a strong structure our foundations for the The Shelf System had to be strong
Colors
The brand uses a very strong red called the “First Edition Red”, since the primary color of the brand is so strong, other colors were used very sparingly
Colors
The brand uses a very strong red called the “First Edition Red”, since the primary color of the brand is so strong, other colors were used very sparingly
What is the Goal for this feature?
Accelerate benefit access by implementing a streamlined workflow for swift client referrals within and outside the organization.
1
Reduce time taken to find the right organization
3
Reduce time outside of Kiip to send details to case workers
2
Increase the availability of benefit options
4
Reduce time spent to send documents to next organization
This is the Final Solution we designed.
Introducing “Referrals”, a tool catered to case workers to refer their clients via Kiip to other organization. With this feature, case workers can send relevant documents to organizations that can help their client better.
New feature entirely dedicated to referring clients
Ability to send previously signed forms
Accepting new clients via Kiip
A quick internal process to send documents
What did all the research teach us?
We conducted various interviews before and during the design process to understand how a referrals feature can best help a case workers and clients.
1
Complicated Transfer Process
After supporting a client with benefits, case workers often face challenges reminding them to engage with the next organization, a recurring pain point highlighted in calls and interviews
2
Redundant Document Transfers
Case workers were sending documents to other organizations through email, online cloud services and by sending physical documents —this process was much more time consuming.
3
Missing Documents
While sending multiple documents for multiple clients to multiple organizations it is likely that some documents are missed out, lengthening the process of the referral.
4
Time-consuming Endeavor
Manually tracking and transferring clients is a time and effort consuming chore for case workers. This time can be spent on helping the clients instead
How is this significant to the users?
Managing multiple clients as a case worker is a challenging task, and it becomes even more complex when clients are referred by and to various organizations. This process adds an additional layer of stress to an already hectic workload. This renders it exceptionally cumbersome and challenging for case workers to handle both incoming and outgoing clients effectively.
"With Kiip, our client exits have significantly decreased. Previously, I would exit 100 clients monthly due to non-compliance. Now, it's down to 20 as they either graduate or get referred to other programs."
Case Manager on what happen after clients receive their benefits
"We retain graduated clients on file to facilitate referrals to other organizations or departments. We prioritize referrals from organizations we have previously collaborated with, emphasizing trust in the client's needs."
Case Manager on referring their clients to other organizations & working with referred clients
What did we prioritize?
To prioritize features that generate maximum value in a limited timeframe, we collaborated with project management, research, engineering, and product operations to devise a plan for the MVP or the thinnest slice as we like to call it at Kiip.
We ultimately decided to tackle two workflows that dominate the majority of a rep’s work: client directory management and referral process
What was the big Opportunity here?
A better referral system experience can help case workers and clients alike. For case workers, this translates to streamlined processes and a reduced workload. Meanwhile, clients benefit by gaining quicker access to the right organizations.
Here is a more detailed Final Design
Updated Client Directory
With the Referrals feature, I created a distinct list for incoming clients, ensuring easy assignment for case workers alongside the existing 'All Clients' and 'My Clients' categories in the directory.
2. The Referral Process from the Representative Room
The referral process starts in the client's room, allowing reps to select the organization, specify required documents, and add notes for the next case worker.
3. Client Room
After a referral, the new organization appears in the client's nav bar. They can view transferred documents in their room, and once a rep is assigned, the room is ready for communication.
2. The Referral Process from the Representative Room
The referral process starts in the client's room, allowing reps to select the organization, specify required documents, and add notes for the next case worker.
How did the developers and I work together?
I generated handoff documents for the engineering team, offering detailed insights for screens requiring context. These documents were structured into flows to enhance comprehension.
I collaborated closely with the team, ensuring a thorough understanding of the details throughout the process.
Additionally, I composed tickets to aid in grasping the context, solution, purpose, and finer details. To further enhance clarity, they outlined the context, proposed solutions, purposes, and minute details.
What happened and what I learnt
1
Shipped to case workers
The feature was shipped and is currently used by various organizations for internal as well as external referrals.
2
Understood Ground Reality
Conducted interviews with case workers, managers & directors to gain insights into their client exit & transfer processes. It was fascinating to discover unique approaches each organization has in handling procedures.
3
Keep it Simple
Simplifying the process is crucial for case workers managing heavy workloads. It enhances efficiency and allows them to focus on delivering impactful support to clients
4
Nomenclature Matters
Recognizing the significance of nomenclature in exiting clients from various programs and organizations within our system was crucial. Determining the appropriate terms for each process was an essential aspect of this understanding.
What did all the research teach us?
We conducted various interviews before and during the design process to understand how a referrals feature can best help a case workers and clients.
1
Complicated Transfer Process
After supporting a client with benefits, case workers often face challenges reminding them to engage with the next organization, a recurring pain point highlighted in calls and interviews
2
Redundant Document Transfers
Case workers were sending documents to other organizations through email, online cloud services and by sending physical documents —this process was much more time consuming.
3
Missing Documents
While sending multiple documents for multiple clients to multiple organizations it is likely that some documents are missed out, lengthening the process of the referral.
4
Time-consuming Endeavor
Manually tracking and transferring clients is a time and effort consuming chore for case workers. This time can be spent on helping the clients instead
How is this significant to the users?
Managing multiple clients as a case worker is a challenging task, and it becomes even more complex when clients are referred by and to various organizations. This process adds an additional layer of stress to an already hectic workload. This renders it exceptionally cumbersome and challenging for case workers to handle both incoming and outgoing clients effectively.
"With Kiip, our client exits have significantly decreased. Previously, I would exit 100 clients monthly due to non-compliance. Now, it's down to 20 as they either graduate or get referred to other programs."
Case Manager on what happen after clients receive their benefits
"We retain graduated clients on file to facilitate referrals to other organizations or departments. We prioritize referrals from organizations we have previously collaborated with, emphasizing trust in the client's needs."
Case Manager on referring their clients to other organizations & working with referred clients
What did we prioritize?
To prioritize features that generate maximum value in a limited timeframe, we collaborated with project management, research, engineering, and product operations to devise a plan for the MVP or the thinnest slice as we like to call it at Kiip.
We ultimately decided to tackle two workflows that dominate the majority of a rep’s work: client directory management and referral process
What was the big Opportunity here?
A better referral system experience can help case workers and clients alike. For case workers, this translates to streamlined processes and a reduced workload. Meanwhile, clients benefit by gaining quicker access to the right organizations.
Here is a more detailed Final Design
Updated Client Directory
With the Referrals feature, I created a distinct list for incoming clients, ensuring easy assignment for case workers alongside the existing 'All Clients' and 'My Clients' categories in the directory.
2. The Referral Process from the Representative Room
The referral process starts in the client's room, allowing reps to select the organization, specify required documents, and add notes for the next case worker.
3. Client Room
After a referral, the new organization appears in the client's nav bar. They can view transferred documents in their room, and once a rep is assigned, the room is ready for communication.
2. The Referral Process from the Representative Room
The referral process starts in the client's room, allowing reps to select the organization, specify required documents, and add notes for the next case worker.
How did the developers and I work together?
I generated handoff documents for the engineering team, offering detailed insights for screens requiring context. These documents were structured into flows to enhance comprehension.
I collaborated closely with the team, ensuring a thorough understanding of the details throughout the process.
Additionally, I composed tickets to aid in grasping the context, solution, purpose, and finer details. To further enhance clarity, they outlined the context, proposed solutions, purposes, and minute details.
What happened and what I learnt
1
Shipped to case workers
The feature was shipped and is currently used by various organizations for internal as well as external referrals.
2
Understood Ground Reality
Conducted interviews with case workers, managers & directors to gain insights into their client exit & transfer processes. It was fascinating to discover unique approaches each organization has in handling procedures.
3
Keep it Simple
Simplifying the process is crucial for case workers managing heavy workloads. It enhances efficiency and allows them to focus on delivering impactful support to clients
4
Nomenclature Matters
Recognizing the significance of nomenclature in exiting clients from various programs and organizations within our system was crucial. Determining the appropriate terms for each process was an essential aspect of this understanding.
What did all the research teach us?
We conducted various interviews before and during the design process to understand how a referrals feature can best help a case workers and clients.
1
Complicated Transfer Process
After supporting a client with benefits, case workers often face challenges reminding them to engage with the next organization, a recurring pain point highlighted in calls and interviews
2
Redundant Document Transfers
Case workers were sending documents to other organizations through email, online cloud services and by sending physical documents —this process was much more time consuming.
3
Missing Documents
While sending multiple documents for multiple clients to multiple organizations it is likely that some documents are missed out, lengthening the process of the referral.
4
Time-consuming Endeavor
Manually tracking and transferring clients is a time and effort consuming chore for case workers. This time can be spent on helping the clients instead
How is this significant to the users?
Managing multiple clients as a case worker is a challenging task, and it becomes even more complex when clients are referred by and to various organizations. This process adds an additional layer of stress to an already hectic workload. This renders it exceptionally cumbersome and challenging for case workers to handle both incoming and outgoing clients effectively.
"With Kiip, our client exits have significantly decreased. Previously, I would exit 100 clients monthly due to non-compliance. Now, it's down to 20 as they either graduate or get referred to other programs."
Case Manager on what happen after clients receive their benefits
"We retain graduated clients on file to facilitate referrals to other organizations or departments. We prioritize referrals from organizations we have previously collaborated with, emphasizing trust in the client's needs."
Case Manager on referring their clients to other organizations & working with referred clients
What did we prioritize?
To prioritize features that generate maximum value in a limited timeframe, we collaborated with project management, research, engineering, and product operations to devise a plan for the MVP or the thinnest slice as we like to call it at Kiip.
We ultimately decided to tackle two workflows that dominate the majority of a rep’s work: client directory management and referral process
What was the big Opportunity here?
A better referral system experience can help case workers and clients alike. For case workers, this translates to streamlined processes and a reduced workload. Meanwhile, clients benefit by gaining quicker access to the right organizations.
Here is a more detailed Final Design
Updated Client Directory
With the Referrals feature, I created a distinct list for incoming clients, ensuring easy assignment for case workers alongside the existing 'All Clients' and 'My Clients' categories in the directory.
2. The Referral Process from the Representative Room
The referral process starts in the client's room, allowing reps to select the organization, specify required documents, and add notes for the next case worker.
3. Client Room
After a referral, the new organization appears in the client's nav bar. They can view transferred documents in their room, and once a rep is assigned, the room is ready for communication.
2. The Referral Process from the Representative Room
The referral process starts in the client's room, allowing reps to select the organization, specify required documents, and add notes for the next case worker.
How did the developers and I work together?
I generated handoff documents for the engineering team, offering detailed insights for screens requiring context. These documents were structured into flows to enhance comprehension.
I collaborated closely with the team, ensuring a thorough understanding of the details throughout the process.
Additionally, I composed tickets to aid in grasping the context, solution, purpose, and finer details. To further enhance clarity, they outlined the context, proposed solutions, purposes, and minute details.
What happened and what I learnt
1
Shipped to case workers
The feature was shipped and is currently used by various organizations for internal as well as external referrals.
2
Understood Ground Reality
Conducted interviews with case workers, managers & directors to gain insights into their client exit & transfer processes. It was fascinating to discover unique approaches each organization has in handling procedures.
3
Keep it Simple
Simplifying the process is crucial for case workers managing heavy workloads. It enhances efficiency and allows them to focus on delivering impactful support to clients
4
Nomenclature Matters
Recognizing the significance of nomenclature in exiting clients from various programs and organizations within our system was crucial. Determining the appropriate terms for each process was an essential aspect of this understanding.
Explore next
Lights on·off