Guiding users through using their slow-injection pharmaceutical device
Alignment, Experience design, Interface design, and Interaction design for BD
Mobile
Motion Design
Visual Design
UX Design
Guiding users through using their slow-injection pharmaceutical device
Client
BD
Client
BD
Client
BD
Timeline
Q1 2018, 10 weeks
Timeline
Q1 2018, 10 weeks
Timeline
Q1 2018, 10 weeks
Role
UX Designer, Visual Designer, Interaction Designer
Role
UX Designer, Visual Designer, Interaction Designer
Role
UX Designer, Visual Designer, Interaction Designer
What I Did
Visual Design, UX Design, Motion Design, Animations
What I Did
Visual Design, UX Design, Motion Design, Animations
What I Did
Visual Design, UX Design, Motion Design, Animations
Project Overview
Challenge
Create a cross-platform mobile app that guides a user, often with higher accessibility requirements, through the setup, pairing, application, and delivery of their medication by way of BD's new delivery device
Challenge
Create a cross-platform mobile app that guides a user, often with higher accessibility requirements, through the setup, pairing, application, and delivery of their medication by way of BD's new delivery device
Challenge
Create a cross-platform mobile app that guides a user, often with higher accessibility requirements, through the setup, pairing, application, and delivery of their medication by way of BD's new delivery device
Output
I created a fully documented high fidelity user flow, complete with animations. The animations were used to film a promotional video for the product announcement. Ultimately, our team built out the application and delivered it to the client.
Output
I created a fully documented high fidelity user flow, complete with animations. The animations were used to film a promotional video for the product announcement. Ultimately, our team built out the application and delivered it to the client.
Output
I created a fully documented high fidelity user flow, complete with animations. The animations were used to film a promotional video for the product announcement. Ultimately, our team built out the application and delivered it to the client.
Context
Individuals with illnesses like Multiple Sclerosis are sometimes prescribed a long-term medication that needs to be injected into the patient on a regular basis. BD is introducing a line of medication delivery products that adhere to the patient's body for the duration of the slow injection of the medication.The concept of an injection device that adheres to the patient's body is very new to patients. BD informed us that many of the people that will use this device are elderly people, many of whom have very little technical literacy. Also, most users will fear the device to some extent, especially the first time they apply it since they don't know what it will feel like to actually insert the integrated hypodermic needle.The team also had a rapidly approaching deadline. They intended to show a demo video of the product and app in use, and then have an initial version of the full product available to demo later on.
Context
Individuals with illnesses like Multiple Sclerosis are sometimes prescribed a long-term medication that needs to be injected into the patient on a regular basis. BD is introducing a line of medication delivery products that adhere to the patient's body for the duration of the slow injection of the medication.The concept of an injection device that adheres to the patient's body is very new to patients. BD informed us that many of the people that will use this device are elderly people, many of whom have very little technical literacy. Also, most users will fear the device to some extent, especially the first time they apply it since they don't know what it will feel like to actually insert the integrated hypodermic needle.The team also had a rapidly approaching deadline. They intended to show a demo video of the product and app in use, and then have an initial version of the full product available to demo later on.
Context
Individuals with illnesses like Multiple Sclerosis are sometimes prescribed a long-term medication that needs to be injected into the patient on a regular basis. BD is introducing a line of medication delivery products that adhere to the patient's body for the duration of the slow injection of the medication.The concept of an injection device that adheres to the patient's body is very new to patients. BD informed us that many of the people that will use this device are elderly people, many of whom have very little technical literacy. Also, most users will fear the device to some extent, especially the first time they apply it since they don't know what it will feel like to actually insert the integrated hypodermic needle.The team also had a rapidly approaching deadline. They intended to show a demo video of the product and app in use, and then have an initial version of the full product available to demo later on.
Team
I worked with a UX Architect to design the product, worked with our mobile development team to implement the designs, and also worked closely with the client to ensure proposed designs met their user's needs, and that their product was accurately reflected in the app.
Team
I worked with a UX Architect to design the product, worked with our mobile development team to implement the designs, and also worked closely with the client to ensure proposed designs met their user's needs, and that their product was accurately reflected in the app.
Team
I worked with a UX Architect to design the product, worked with our mobile development team to implement the designs, and also worked closely with the client to ensure proposed designs met their user's needs, and that their product was accurately reflected in the app.
Home Page
I pushed the design of the home page in a more bold new direction for their brand, hoping that the new aesthetic would push returning visitiors to rethink their expectations from MHI
Home Page
I pushed the design of the home page in a more bold new direction for their brand, hoping that the new aesthetic would push returning visitiors to rethink their expectations from MHI
Home Page
I pushed the design of the home page in a more bold new direction for their brand, hoping that the new aesthetic would push returning visitiors to rethink their expectations from MHI
Home Page
I pushed the design of the home page in a more bold new direction for their brand, hoping that the new aesthetic would push returning visitiors to rethink their expectations from MHI
Blog Pages
After gathering and consolidating all of the objects, attributes, metadata, and CTAs within the various content types on the site, we built out these wireframes to illustrate which attributes were needed on each type of content, and the relative hierarchy of those attributes. The bottom row represents one or two layouts in OOUX wireframes for the data included in the card view of each type of content.
Blog Pages
After gathering and consolidating all of the objects, attributes, metadata, and CTAs within the various content types on the site, we built out these wireframes to illustrate which attributes were needed on each type of content, and the relative hierarchy of those attributes. The bottom row represents one or two layouts in OOUX wireframes for the data included in the card view of each type of content.
Blog Pages
After gathering and consolidating all of the objects, attributes, metadata, and CTAs within the various content types on the site, we built out these wireframes to illustrate which attributes were needed on each type of content, and the relative hierarchy of those attributes. The bottom row represents one or two layouts in OOUX wireframes for the data included in the card view of each type of content.
Blog Pages
After gathering and consolidating all of the objects, attributes, metadata, and CTAs within the various content types on the site, we built out these wireframes to illustrate which attributes were needed on each type of content, and the relative hierarchy of those attributes. The bottom row represents one or two layouts in OOUX wireframes for the data included in the card view of each type of content.
Member Companies
Directory
MHI stakeholders expressed some needs to be able to add CTA language into the flow where people search for Members. Once we decided on this tile direction, it was easier to incorporate extra messaging tiles into the structure. I also included plenty of callouts with descriptions of behavior and experience suggestions, as well as features we had discussed during the project that did not make this version.
Directory
MHI stakeholders expressed some needs to be able to add CTA language into the flow where people search for Members. Once we decided on this tile direction, it was easier to incorporate extra messaging tiles into the structure. I also included plenty of callouts with descriptions of behavior and experience suggestions, as well as features we had discussed during the project that did not make this version.
Directory
MHI stakeholders expressed some needs to be able to add CTA language into the flow where people search for Members. Once we decided on this tile direction, it was easier to incorporate extra messaging tiles into the structure. I also included plenty of callouts with descriptions of behavior and experience suggestions, as well as features we had discussed during the project that did not make this version.
Customizable Company Pages
Three different options for Members to customize their page.
1. Members select an individual Hex value to add one of their brand colors as a splash on the page.
2. Members can select up to two hex values in the cases where they may have more complex branding needs.
3. Members may also select an image to use as a banner at the top of the page. (since it works oh-so-well on Notion.
Customizable Company Pages
Three different options for Members to customize their page.
1. Members select an individual Hex value to add one of their brand colors as a splash on the page.
2. Members can select up to two hex values in the cases where they may have more complex branding needs.
3. Members may also select an image to use as a banner at the top of the page. (since it works oh-so-well on Notion.
Customizable Company Pages
Three different options for Members to customize their page.
1. Members select an individual Hex value to add one of their brand colors as a splash on the page.
2. Members can select up to two hex values in the cases where they may have more complex branding needs.
3. Members may also select an image to use as a banner at the top of the page. (since it works oh-so-well on Notion.
Member Directory
MHI stakeholders expressed some needs to be able to add CTA language into the flow where people search for Members. Once we decided on this tile direction, it was easier to incorporate extra messaging tiles into the structure. I also included plenty of callouts with descriptions of behavior and experience suggestions, as well as features we had discussed during the project that did not make this version.
Member Directory
MHI stakeholders expressed some needs to be able to add CTA language into the flow where people search for Members. Once we decided on this tile direction, it was easier to incorporate extra messaging tiles into the structure. I also included plenty of callouts with descriptions of behavior and experience suggestions, as well as features we had discussed during the project that did not make this version.
Member Directory
MHI stakeholders expressed some needs to be able to add CTA language into the flow where people search for Members. Once we decided on this tile direction, it was easier to incorporate extra messaging tiles into the structure. I also included plenty of callouts with descriptions of behavior and experience suggestions, as well as features we had discussed during the project that did not make this version.
Member Directory
MHI stakeholders expressed some needs to be able to add CTA language into the flow where people search for Members. Once we decided on this tile direction, it was easier to incorporate extra messaging tiles into the structure. I also included plenty of callouts with descriptions of behavior and experience suggestions, as well as features we had discussed during the project that did not make this version.
Member Company Pages
Three different options for Members to customize their page. (1.) Members select an individual Hex value to add one of their brand colors as a splash on the page. (2.) Members can select up to two hex values in the cases where they may have more complex branding needs. (3.) Members may also select an image to use as a banner at the top of the page. (since it works oh-so-well on Notion)
Member Company Pages
Three different options for Members to customize their page. (1.) Members select an individual Hex value to add one of their brand colors as a splash on the page. (2.) Members can select up to two hex values in the cases where they may have more complex branding needs. (3.) Members may also select an image to use as a banner at the top of the page. (since it works oh-so-well on Notion)
Member Company Pages
Three different options for Members to customize their page. (1.) Members select an individual Hex value to add one of their brand colors as a splash on the page. (2.) Members can select up to two hex values in the cases where they may have more complex branding needs. (3.) Members may also select an image to use as a banner at the top of the page. (since it works oh-so-well on Notion)
Member Company Pages
Three different options for Members to customize their page. (1.) Members select an individual Hex value to add one of their brand colors as a splash on the page. (2.) Members can select up to two hex values in the cases where they may have more complex branding needs. (3.) Members may also select an image to use as a banner at the top of the page. (since it works oh-so-well on Notion)
Industry Groups
Industry Groups?
In the industries that MHI organizes around, there are many different groups and organizations that focus on specific portions of the larger industries. Each Industry Group (IG) has space on mhi.org to post their own content, and generally drive traffic to their material and generate leads for their members.
Industry Groups?
In the industries that MHI organizes around, there are many different groups and organizations that focus on specific portions of the larger industries. Each Industry Group (IG) has space on mhi.org to post their own content, and generally drive traffic to their material and generate leads for their members.
Industry Groups?
In the industries that MHI organizes around, there are many different groups and organizations that focus on specific portions of the larger industries. Each Industry Group (IG) has space on mhi.org to post their own content, and generally drive traffic to their material and generate leads for their members.
Group Home Page
Each Industry Group has their own home page within the site where they can customize their own sub-navigation, and display names and contact information for the members of their boards.
Group Home Page
Each Industry Group has their own home page within the site where they can customize their own sub-navigation, and display names and contact information for the members of their boards.
Group Home Page
Each Industry Group has their own home page within the site where they can customize their own sub-navigation, and display names and contact information for the members of their boards.
IG Directory
Internally, MHI knew that this page could lead to a lot of politicking from the groups to have their tile moved 'above the fold', so our priority was to condense the tiles as much as possible, reducing the imact of being located further down on the page.
IG Directory
Internally, MHI knew that this page could lead to a lot of politicking from the groups to have their tile moved 'above the fold', so our priority was to condense the tiles as much as possible, reducing the imact of being located further down on the page.
IG Directory
Internally, MHI knew that this page could lead to a lot of politicking from the groups to have their tile moved 'above the fold', so our priority was to condense the tiles as much as possible, reducing the imact of being located further down on the page.
IG Directory
Internally, MHI knew that this page could lead to a lot of politicking from the groups to have their tile moved 'above the fold', so our priority was to condense the tiles as much as possible, reducing the imact of being located further down on the page.
Industry Group
Each Industry Group has their own home page within the site where they can customize their own sub-navigation, and display names and contact information for the members of their boards.
Industry Group
Each Industry Group has their own home page within the site where they can customize their own sub-navigation, and display names and contact information for the members of their boards.
Industry Group
Each Industry Group has their own home page within the site where they can customize their own sub-navigation, and display names and contact information for the members of their boards.
Industry Group
Each Industry Group has their own home page within the site where they can customize their own sub-navigation, and display names and contact information for the members of their boards.
User Account
Member users have access to member-only content, and have views into account updates as well as a loyalty point system.
User Account
Member users have access to member-only content, and have views into account updates as well as a loyalty point system.
User Account
Member users have access to member-only content, and have views into account updates as well as a loyalty point system.
User Account
Member users have access to member-only content, and have views into account updates as well as a loyalty point system.
Content Cards
All of the different card components necessary to bring consistency and clarity to the range of companies, industry groups, and content.
Content Cards
All of the different card components necessary to bring consistency and clarity to the range of companies, industry groups, and content.
Content Cards
All of the different card components necessary to bring consistency and clarity to the range of companies, industry groups, and content.
Content Cards
All of the different card components necessary to bring consistency and clarity to the range of companies, industry groups, and content.
Discovery
Background & Kickoff
This was the first time working with this client, so it was very important to really win them over with our discovery process. Many clients, especially on smaller projects, don’t decide to pay for discovery engagements, so we really wanted to make sure that they got their value from the project.
Background & Kickoff
This was the first time working with this client, so it was very important to really win them over with our discovery process. Many clients, especially on smaller projects, don’t decide to pay for discovery engagements, so we really wanted to make sure that they got their value from the project.
Background & Kickoff
This was the first time working with this client, so it was very important to really win them over with our discovery process. Many clients, especially on smaller projects, don’t decide to pay for discovery engagements, so we really wanted to make sure that they got their value from the project.
Visioning workshop, Stakeholder Interviews, & New Information Architecture
We hosted a workshop via mural where we gathe red some of the baseline requirements that the client stakeholders would be thinking about when they evaluate our work, and where we got their buy-in to move forward with the different sets of interviews and activities that we had planned.
Visioning workshop, Stakeholder Interviews, & New Information Architecture
We hosted a workshop via mural where we gathe red some of the baseline requirements that the client stakeholders would be thinking about when they evaluate our work, and where we got their buy-in to move forward with the different sets of interviews and activities that we had planned.
Visioning workshop, Stakeholder Interviews, & New Information Architecture
We hosted a workshop via mural where we gathe red some of the baseline requirements that the client stakeholders would be thinking about when they evaluate our work, and where we got their buy-in to move forward with the different sets of interviews and activities that we had planned.
OOUX & Wireframes
My Principal UX designer and I are both big fans of Sophia Prater’s Object Oriented UX system and the ORCA process that builds it, so we started building object maps as we were gathering information in the interviews and the IA activities
The OOUX and ORCA process helped us fully wrap our heads around the different types of content people come to MHI.org for. We pulled together a set of wireframes from our object and attribute collection that would serve as the basis for a system of consistent but differentiated cards for all of the content types.
These wireframes made creating structures for the rest of the website pages more streamlined, and they significantly improved the speed at which we could get the client on board with the design direction. In later meetings questions would come up about including and excluding certain attributes in the different cards, and these OOUX based wireframes were essential in ensuring that none of us ran away with ideas that could threaten the consistency of the card system.
OOUX & Wireframes
My Principal UX designer and I are both big fans of Sophia Prater’s Object Oriented UX system and the ORCA process that builds it, so we started building object maps as we were gathering information in the interviews and the IA activities
The OOUX and ORCA process helped us fully wrap our heads around the different types of content people come to MHI.org for. We pulled together a set of wireframes from our object and attribute collection that would serve as the basis for a system of consistent but differentiated cards for all of the content types.
These wireframes made creating structures for the rest of the website pages more streamlined, and they significantly improved the speed at which we could get the client on board with the design direction. In later meetings questions would come up about including and excluding certain attributes in the different cards, and these OOUX based wireframes were essential in ensuring that none of us ran away with ideas that could threaten the consistency of the card system.
OOUX & Wireframes
My Principal UX designer and I are both big fans of Sophia Prater’s Object Oriented UX system and the ORCA process that builds it, so we started building object maps as we were gathering information in the interviews and the IA activities
The OOUX and ORCA process helped us fully wrap our heads around the different types of content people come to MHI.org for. We pulled together a set of wireframes from our object and attribute collection that would serve as the basis for a system of consistent but differentiated cards for all of the content types.
These wireframes made creating structures for the rest of the website pages more streamlined, and they significantly improved the speed at which we could get the client on board with the design direction. In later meetings questions would come up about including and excluding certain attributes in the different cards, and these OOUX based wireframes were essential in ensuring that none of us ran away with ideas that could threaten the consistency of the card system.
OOUX for Content Cards
After gathering and consolidating all of the objects, attributes, metadata, and CTAs within the various content types on the site, we built out these wireframes to illustrate which attributes were needed on each type of content, and the relative hierarchy of those attributes. The bottom row represents one or two layouts in OOUX wireframes for the data included in the card view of each type of content.
OOUX for Content Cards
After gathering and consolidating all of the objects, attributes, metadata, and CTAs within the various content types on the site, we built out these wireframes to illustrate which attributes were needed on each type of content, and the relative hierarchy of those attributes. The bottom row represents one or two layouts in OOUX wireframes for the data included in the card view of each type of content.
OOUX for Content Cards
After gathering and consolidating all of the objects, attributes, metadata, and CTAs within the various content types on the site, we built out these wireframes to illustrate which attributes were needed on each type of content, and the relative hierarchy of those attributes. The bottom row represents one or two layouts in OOUX wireframes for the data included in the card view of each type of content.
OOUX for Content Cards
After gathering and consolidating all of the objects, attributes, metadata, and CTAs within the various content types on the site, we built out these wireframes to illustrate which attributes were needed on each type of content, and the relative hierarchy of those attributes. The bottom row represents one or two layouts in OOUX wireframes for the data included in the card view of each type of content.
OOUX to Wires
Once the cards were nearing approval, we could also work up wireframes for the core pages we wanted to design for the client. We started at the section level and could increase fidelity to reflect how the cards will display within the sections once they were approved.
OOUX to Wires
Once the cards were nearing approval, we could also work up wireframes for the core pages we wanted to design for the client. We started at the section level and could increase fidelity to reflect how the cards will display within the sections once they were approved.
OOUX to Wires
Once the cards were nearing approval, we could also work up wireframes for the core pages we wanted to design for the client. We started at the section level and could increase fidelity to reflect how the cards will display within the sections once they were approved.
OOUX to Wires
Once the cards were nearing approval, we could also work up wireframes for the core pages we wanted to design for the client. We started at the section level and could increase fidelity to reflect how the cards will display within the sections once they were approved.
Project Conclusion
Next Steps
After our project closeout and handoff, MHI will still need to develop and deploy the updated site. Our team has a list of next steps that we hope to work with them on soon.
1. Further research into the areas of the MHI site that are behind their paywall
2. Perform an intentional brand update and refresh
3. Look deeper into moving mhi.org further into the realm of web apps by breaking the site apart into different product-focused user flows and feature sets, instead of centering the experience around content.
Next Steps
After our project closeout and handoff, MHI will still need to develop and deploy the updated site. Our team has a list of next steps that we hope to work with them on soon.
1. Further research into the areas of the MHI site that are behind their paywall
2. Perform an intentional brand update and refresh
3. Look deeper into moving mhi.org further into the realm of web apps by breaking the site apart into different product-focused user flows and feature sets, instead of centering the experience around content.
Next Steps
After our project closeout and handoff, MHI will still need to develop and deploy the updated site. Our team has a list of next steps that we hope to work with them on soon.
1. Further research into the areas of the MHI site that are behind their paywall
2. Perform an intentional brand update and refresh
3. Look deeper into moving mhi.org further into the realm of web apps by breaking the site apart into different product-focused user flows and feature sets, instead of centering the experience around content.
Outcome
At the end of the engagement, the client was really satisfied with the work we did for them. The information architecture work created some buzz and excitement with the stakeholders, and the new visual design approach definitely had many of the members of the client very excited for the potential future, while keeping the marketing group satisfied with the capabilities and priorities that the new design incorporates.
Outcome
At the end of the engagement, the client was really satisfied with the work we did for them. The information architecture work created some buzz and excitement with the stakeholders, and the new visual design approach definitely had many of the members of the client very excited for the potential future, while keeping the marketing group satisfied with the capabilities and priorities that the new design incorporates.
Outcome
At the end of the engagement, the client was really satisfied with the work we did for them. The information architecture work created some buzz and excitement with the stakeholders, and the new visual design approach definitely had many of the members of the client very excited for the potential future, while keeping the marketing group satisfied with the capabilities and priorities that the new design incorporates.