Project Overview and Goals
The health insurance company needed to create an online platform to allow small businesses to renew their health plans that would cover their employees. This website should allow the small business to make changes to their employee roster, update their small business information, change their health plans, select a health plan for each employee, and upload necessary documents.
In my role as the user experience designer and researcher on this multi-disciplinary team, I gathered requirements from the business, gathered feedback from the end users and subject matter expert, created the user flows, paper sketches, and high-fidelity visual designs. Also, I conducted review sessions with team members and worked with the developers to ensure the resulting online platform would be technically feasible, easy to use, and meet business goals.
Please note: Sensitive information about this project has been removed from the visual designs.
- Product owner
- Scrum master
- Business analyst
- User experience designer and researcher (myself, Cynthia)
- 13 developers (front-end and back-end)
- 4 QA (quality assurance) testers
Our team worked in an agile environment with sprint cycles, daily stand-ups, sprint planning sessions, and sprint retrospectives. The product owner, business analyst, and user experience designer worked one sprint “ahead” of the development team so that the visual designs and user stories would be ready for the developers during the next sprint.
Sprint Zero Workflow for UX Role
The following diagram illustrates the process of my user experience work at the very beginning of this project during the non-development sprint that set up the user stories for the developments in the first developers’ sprint.
Sprint 1+ Workflow for UX Role
The following diagram illustrates the general process for my user experience role during a sprint cycle, after “sprint zero”. During this time, developers were simultaneously developing previously written user stories.
Recurring Steps within Sprint Cycle Process
I’ve elaborated on certain key recurring steps of the sprint cycle, included in the above diagrams, that I performed in my user experience designer role below:
Gather and Clarify Requirements from Business Stakeholders
The first set of requirements were shared with me from the product owner. In follow-up meetings with the business stakeholders, I asked follow-up questions to clarify these requirements. This helped me properly understand the actions the user would need to do for each step of the renewal and determine the appropriate functionality to meet the business logic.
As the project progressed, the weekly meetings with business stakeholders served as a place for the stakeholders to provide feedback to our team about our ideas for the website and to inform our team of any updated business requirements. Sometimes these updated requirements would lead to needed updates to the visual designs and development work, which would be addressed in upcoming sprints.
Create and Edit the User Flow Diagram of the Renewal Process
To ensure that the entire team had a shared understanding of the renewal process, I created a user flow diagram. The first iteration of the user flow diagram was based on the initial requirements from business stakeholders, and during the review process with the business stakeholders, product owner, technical lead, and subject matter expert (who worked closely with the end-users), I iterated upon the user flow diagrams when business requirements changed and feedback was given.
Below shows examples of some of the iterations of the user flow diagram through the project:
Here is the final version of the user flow diagram:
Considering the actions the user needs to perform from the user flow, I created paper sketches of possible interface layouts for the different renewal process steps. I iterated upon these paper sketches before creating the digital designs. Here are some of the paper sketches I created during the project:
Using a Style Guide to Quickly Create High-Fidelity Visual Designs
Normally, my UX process for projects includes moving from paper sketches to medium-fidelity wireframes to high-fidelity visual designs. However, the user experience team already had a style guide in place. Thus, I could re-use elements from the style guide to directly jump from the paper sketches to create high-fidelity visual designs, which would take just as much time as creating medium-fidelity wireframes without a style guide.
Here is an example of one of the visual design pages created from the style guide:
Review Sessions with Team Members
To ensure everyone on the team was in alignment with the design decisions and functionality for the online renewal website, I conducted regular review sessions to share my progress on the user flow diagrams, paper sketches, and visual designs. These sessions allowed team members to provide feedback, express concerns about technical constraints, suggest and discuss different solutions, and prioritize those solutions according to business needs and technical effort.
The team members present in these review sessions included:
- Product Owner
- Scrum Master
- Business Analyst
- Business Stakeholders
Review Sessions with the Subject-Matter-Expert
I also solicited feedback from our subject matter expert, who works closely and regularly with our end-users, and his insight helped shape our design of the renewal process. These design decisions were later verified to be effective during review sessions with our end-users.
Our subject-matter-expert provided insight on various parts of the renewal process, including:
- Word choice terminology familiar to the-end users
- Names of steps in the renewal process
- Expected order of steps in the renewal process
- Important pieces of information that should be included in data tables
Review Sessions with End-Users
The End-Users: General Agents
The end-users of this website are called general agents who work with small businesses to renew their health insurance plans. General agents are the intermediaries between the health insurance company and the small business that needs a health plan for its employees.
To ensure that our overall renewal process would address the end-users’ needs effectively, I set up review sessions with the end-users to solicit their feedback. Using an online screensharing program, I showed visual designs to the end-users and then asked questions to learn how they interpreted the information on the page, what kind of actions they would try to perform next, and what parts of the design they would change to make their jobs easier.
Improved Experience for End-Users
An example of how the end-users’ feedback improved the designs is on the “Employee Allocation” step of the renewal process, during which users would select a health insurance plan for each employee. Originally, our team included pagination, of 10 rows of employees per page, on the table. However, during a review session, the general agent users expressed that pagination would slow down their work flow and prefer to see all 100 rows of employees on one page. We modified our designs to save the general agent users time on their tasks.
Also, the end-users wanted to include the phrase “allocate employees to plans” to each renewal option checkbox to clarify that this step would always occur. We changed our designs so that the renewal process would better match our users’ expectations.
Validate Design Features with End-Users
We were also able to validate features that would be useful and understandable for them. For example we learned that:
- The word choices in the designs are very familiar to the end-users’ jargon
- The different renewal options at the beginning of the process were clear
- The names of the steps made sense
- Data tables provided sufficient information so that more detailed modals were not needed
Iterations of Designs from Feedback
As a result of the various review sessions with team members, subject matter expert, and end-users, the renewal process went through many iterations before the final product. Iterations addressed feedback involving end-users’ expectations, updated business requirements, technical effort, and time constraints.
Below shows a sample of some iterations of the Employee Allocation step:
High-Fidelity Visual Designs with Functional Annotations
During the design process, I worked with the copywriter and proofreader who wrote the text in the designs to maintain consistent language across this renewal process website and the health insurance company’s other websites outside of this project.
Furthermore, to help the team clearly understand the intended functionality in the designs, I wrote annotations as needed to the side of the designs for easy reference. The business analyst and product owner used these annotations to write the more detailed user stories that were passed to the developers.
Create and Revise User Stories with Product Owner and Business Analyst
After new visual designs were completed or were updated, I shared them with the product owner and business analyst who would begin writing the user stories for upcoming sprints. Then the scrum master, product owner, business analyst and I would review these user stories together to verify they were ready to hand off to the developers and QA testers.
Collaborate with Developers and QA Testers During Current Sprint
Besides working with the team that was creating user stories “one sprint ahead”, I also worked closely with developers and QA testers during the current sprint. With the developers, I clarified requirements and functionality for anything that needed further explanation beyond the written user stories.
If the QA testers found issues in the testing environment and were not sure if those issues were true defects, I collaborated with team members to decide the next steps. Sometimes this led to a need for new user stories to be written as well as new or updated visual designs. Also, if there were issues of technical limitations, I would revise the designs and functionality as needed to ease workload for the developers.
End Result of Project
This online health insurance renewal process for small businesses has already been developed and is currently being used by the general agents end-users. These users have expressed that this website is “more user friendly” than those of the other health insurance company competitors and has a very “clean design”.
Final Visual Designs for Renewal Process
The screen flow diagram below highlights the main steps of this renewal process and how they relate to each other.
To see the interactive prototype and additional visual design screens, please click on this button:
- During QA testing, I learned that developers did not always understand which question options or elements on a page were meant to be pre-selected with defaults and which should remain initially un-selected. I learned to clarify this in my functionality annotations in following sprints and during my review of the user stories written by the product owner and business analyst.
- Some end-users were initially difficult to solicit feedback from. In my initial feedback requests, I asked if they would be willing to look at my team’s designs and share their thoughts in an open-ended email, which often led to a lack of response from them. Later, I discovered that asking them for literally 5 or 10 minutes of their time on a web conference call would encourage them to participate then our team was able to receive valuable end-user feedback.