Developing a Web Page for Insurance

The opportunity areas targeted, goals for those areas of opportunity, and prerequisites for the project included:

• Informational structure: Create a structure of information that would better serve users than the existing documents and pamphlets did. This meant gathering all information possible, sorting the information by relevance and necessity, and finding a way to make the most important information more "up front", while less important information was still easy to find within the information architecture and nav flow.

• Incorporate multiple forms of media from multiple sources of documentation into one webpage - text, video, images, .pdf documents, and external webpages. The design had to be clutter-free, mobile-first accessible on multiple platforms, and easy for new and legacy users, all while still containing this large quantity of information and media forms. Multiple pages weren't an option; all information had to be on one page.

• Create a visual design and code that was easy to edit, alter, change, and delete in the future. This meant all digital writing and all visual and structural designs had to adhere to web and digital authoring standards, while also containing enough notes, references, and other information to help those who haven't seen or worked on the code before make necessary adaptations as time goes forward.

Content Inventory

To begin, I created an inventory of all the content featured in the original set of content. This provided assistance in understanding what content exists within all 7 documents, details about that content, and what other information or media it was paired with and relevant to. After sorting information in the content inventory by type and category, those smaller groups of information became large scale categories, which were then sorted by relevancy. Relevancy was determined based on the information most accessed by agents, namely regarding sign up and contacting representatives. These were placed at the top of priority, where categories less used, typically categories related to specific circumstances, were placed near the bottom.

The final inventory post-revision decided instead to sort these categories of information alphabetically. There were 8 categories in total, which we anticipated would be just enough that a user would prefer to navigate based off of a more filtered approach.

Figma Draft

I then created a flat draft of the product's layout on Figma, with color coding, labels, and motion flow for the modal windows. Though modals are growing more obsolete under certain contexts, I decided this was the best way to convey the array of multimedia aspects each category had, while keeping it compact on the main informational page. These modals were single layered and did not contain vital information like forms or submissions, and were only needed to watch a video and read text, or occasionally click an external link.

(This particular document was later flattened for compression, hence the lack of color in this visual. Under typical circumstances, a draft like this would be color and shape coordinated to better convey information. However, in this circumstance, the draft's stylization wouldn't need referencing beyond this point, and leaving it as is was acceptable.)

Front-End Authoring

I was the primary set of hands on this project - from the figma draft's layout, I then created a skeleton of the page's content in HTML. I linked a CSS stylesheet, Javascript script, and imported these to a php file for the page inside the employee intranet. I annotated these scripts heavily, organizing the 8 modal window grid into the centered body and separating them and their contents from the header and footers. Each modal window and its contents were clearly defined in formatting, and individual classes and IDs were assigned where relevant.

Because of the modal windows, I got my hands on learning some new techniques within my digital authoring. I created the functions for the modals in Javascript, as well as added an email form to the footer, and added animation to the content on scroll appearance.

I then validated the code, revised errors, reviewed the design with developers and my supervisors, and continued to revise until the finalized version was ready to be optimized for php format.

Revisions

Some of the initial stylization was adjusted later to be more consistent with what brand leaders wanted - additional vibrance, thicker fonts, and less spacing between page sections. After some minor wording adjustments and color choices, we published the page.

Conclusion

The final version went live approximately 1 month after beginning the project. The feedback from the project was largely positive, in part because no digital space had existed prior to this project, but also due to the design choices making this page an efficient tool for those looking to find information as important as some of the information was. The page is still in use and serves as an ongoing, functional reference.

This project was a great learning experience getting into web authoring in a professional sense; I had only until this point authored code for college courses, so there was a lot of learning, re-learning, and guidance I sought out for this project. That said, it felt very worth it to see it all come together for the final publishing.