Website

Wings of Hope International

One of the faculty members at Grand View University is a founder of a non-profit that seeks to empower people living in Moldova. Our class was tasked with creating an updated website.

Here's what the site looked like when we started:

You can find the site at http://whintl.org/.

My approach

I started by creating a simple style guide in Frontify that could be referenced by anyone working on the site. It provided basic rules for colors, font styling and photography. My proposal to the client included a change in the logo. I wanted the "wings" to be visually associated with the organization, so I placed them in a way so that they looked more like a creature in flight rather than boxed in triangles.

The client was in Moldova at the time of the project, but we were able to Skype with him to get more information on the organization, its goals, life in Moldova, and who uses the current website. Based on this information, I created a new site architecture and design. I started with static Photoshop files, and then built out all of the content in HTML, CSS and Javascript. I used Bootstrap for a framework.

The final deliverable for the project was a custom Wordpress theme. I installed Wordpress locally using Mamp, created the theme files using PHP, populated all the content and then exported the database.

Athene Website Consolidation

In 2015, the Athene companies had seven different public websites, with another in development. In addition, there were five secured portals for producer and customer access. Sites were hosted on different platforms and maintained by different teams. For site visitors, the differences created confusion and misunderstanding.

Our team was responsible for four websites:

  • Athene.com
  • Atheneannuity.com
  • Athenelifeny.com
  • PresidentialLife.com

Athene.com was our primary retail website. The other three sites were for companies that Athene had acquired in the past, and we needed to retire. On top of that, it had been decided that our parent company, Athene Holding, would take over the Athene.com domain name by the end of the year. All of the websites except the retail site would be built and hosted on Wordpress. We would keep our site on the IBM Websphere Portal and WCM platform.

Domain Question

Our first challenge was to determine whether all sites could be hosted within one shared domain — Athene.com. The alternative was to have a separate domain for the retail website at Atheneannuity.com. We made the case for separate domains, which would allow us to meet the four-month deadline. It would be very difficult to have content built in two different systems be delivered in a seamless user experience. We chose to use Atheneannuity.com for the retail site.

Content Rationalization

I took stock of all the existing content on the four websites and compiled it into a content audit spreadsheet. It turned out that we had a lot of redundant content, which was easily reconciled with our primary website. However, we quickly learned that there were going to be some very tricky pages. The Contact Us page, and the Service Forms page would have to include information for a multitude of legacy companies, whose business was being serviced by different Third Party Administrators (TPAS). All of the legacy forms would have to be moved into the same database, and we would have to come up with a way to display the correct forms and service information to each user.

I compiled all the different service groups into a spreadsheet and drafted a "forms logic" matrix to show how we would need to have the user answer a series of questions before showing them the correct forms and mailing address. Another team member worked with partners in Operations to confirm that the information was correct. We were also able to get them to agree that we could display one toll-free number for customers to call.

 

Page Layouts

I created mockups of the pages that would change significantly. We went through several options for some of these pages. I had the high fidelity templates from a previous project, so it was quicker to create finished designs than build wireframes from scratch.

 

I also updated the visual design of the customer and agent portal login screens. The agent portal login page layout had to be adjusted to make room for a link to a new site area just for New York appointed producers.

 

 

 

 

Aviva Microsites

I spent three years working on Aviva USA's web properties. Many of these were promotional websites that had a limited lifespan.

Rebranding AvivaUSA.com

AvivaUSA.com before the acquisition.

The challenge:

Athene had acquired Aviva USA, and we had to rebrand everything. Aviva's websites had been built on IBM's Websphere Portal, and WCM. The plan was to upgrade to a newer version of portal and redesign the site. I had been designing and building small responsive microsites for Aviva and we all agreed it was worth the effort to develop a new responsive theme for our public website. We only had a few months to complete all the work, so the customer and agent portals would remain on their existing fixed-width theme with simple changes of the colors and imagery.

 

Visual Design:

The Athene brand was in a state of transition. Exploratory research was underway with a branding agency, but we couldn't wait months for new guidelines. The existing Athene collateral and sites felt somewhat cold and sterile, which was a huge change from Aviva's attitude. I explored different design options using Style Tiles. My main goal was to show the difference between the classic Athene look and an approach using some brighter colors. Our design team was also advocating for a brand typeface that had a variety of weights and was easy to read.

Wireframes created in Axure.

We documented the current site structure, and worked through what content changes would be needed. I used Axure to make an interactive wireframe prototype to show how users would navigate through the site.

 

Responsive Design:

After the wireframes were approved, I moved on to creating high fidelity mockups to tie in the visual design. These were used to get sign-off from stakeholders, and show developers different navigation states.

Survey on Wellness

Landing page design

Full infographic

Aviva USA conducted an annual Wellness for Life survey in collaboration with Mayo Clinic. Aviva offered a unique rider that provided discounts to premium for customers who got annual checkups. They formed a relationship with Mayo Clinic to provide wellness benefits, resources and expertise to encourage better health for life insurance policyholders. The annual survey was meant to draw connections between financial well-being and living a healthy lifestyle.

In 2013, I designed the infographics and an informational web page about the survey. A physician from Mayo Clinic did live television interviews and Aviva recorded videos of him commenting on the survey results. The infographic was shared on social media and by select industry publications.