Website

Athene.com Rebuild

After consolidating the public-facing websites at Athene, we embarked on a new project to “rewrite” the web portals that were built using IBM Wepshere and Web Content Manager (WCM). The primary goals of the project were to reduce annual maintenance costs and improve data quality. Secondary goals were to add additional self-service functionality to the customer and financial professional web portals.

As Creative Service Manager, I wanted a content management system that would be simple for for writers to use. IBM’s solution was extremely robust, but had a steep learning curve and we had not internal experts on how to use it. All content was maintained in HTML format, which writers did not know. I also wanted to use the project to define a modular design system for future efforts.

My involvement in the was to:

  • Provide input in the RFP for a new content management system (CMS)

  • Help articulate requirements for the CMS

  • Participate in all vendor meetings and demonstrations

  • Evaluate and score options

  • Define requirements or the design system

  • Provide feedback on proposed design concepts

  • Provide feedback on UI elements and navigational structure

Athene.com was the launched in June of 2018. Development on the customer and financial professionals is underway.

Designs concepts were created by Garrigan Lyman Group and brought to life by Tiffany Nickelson, who reported to me at the time.

"What's your more?" campaign

In 2015, Athene worked with a content marketing agency to use existing proprietary research data in a pilot program that would focus on the positive side of retirement. They developed retirement personas, cards for financial professionals and an online quiz. When asked to simply post the quiz on our website, I worked with a writer to develop a mini journey and content to support it.

The quiz was shared on social media platforms and in email communications. People who completed the quiz had their retirement persona revealed and were invited to receive Athene’s newsletter which contained retirement lifestyle content. We shared tips for each persona and included additional relevant content where it existed.

I designed all of the content, including the PDF downloads.

Blog integration

In 2015, we needed to move content from an existing blog to our Athene website. This was done to increase engagement on our website rather than diverting traffic to a separate site that was vendor maintained (we did not have direct access to the metrics).

We didn’t currently have an article system on the site, so I worked with a developer and content admin. I designed the UI elements needed and they made it work.

Grand View University Information Architecture

For a course at Grand View, we were challenged by our instructor to improve the information architecture of Grand View’s website. At the time, there were multiple university websites — for admissions, academics, athletics. Each site had a different look and navigation scheme, which was confusing. The main site design was dated and there was very little visual interest to the content. Here’s the homepage:

Grand View University: Undergraduate & Masters Programs, Liberal Arts, Des Moines Iowa 2016-04-04 00-02-27.png

I was given a copy of the brand guidelines. Blue and the peachy-tan background color were not in keeping with the school’s red and black colors.

I started by researching college and university websites, evaluating what I thought was good visual design and information architecture. This I compiled into a summary presentation. I then indexed the content on all three Grand View websites and compiled it all into a spreadsheet. There were over 4000 unique pages! I found there were quite a few redundancies between the sites.

Proposed GVU Hompage Structure

I recommended consolidating separate GVU websites as much as possible. Most of the admissions content is of interest to multiple audiences and could be worked into main site architecture. For example, local residents and job seekers might be interested in learning about the facilities. All university websites could benefit from a consistent global header to allow users to navigate between sites and not get lost in the different UIs.

Primary Navigation (consistent across ALL sites):

  • About

    • Facts at a Glance

    • Our Campus & Des Moines

    • Strategic Planning

    • Offices & Services

    • History & Traditions

    • Media Coverage

    • Rankings & Recognition

    • Diversity

    • Safety

  • Admissions

    • How to Apply

    • Visit

    • Tuition, Aid & Scholarships

    • Admissions Team

    • Check your application status

    • Orientation

  • Academics

    • Departments & Programs

    • Core Curriculum & Courses

    • Honors Programs

    • Advising & Registration

    • International Programs

    • Internships

    • Featured Faculty

    • Academic Services

    • Academic Resources

  • Student Life

    • Campus Living

    • Student Activities

    • Student Ministry

    • Counseling, Health & Wellness

    • Career Center

    • Featured Students

    • Dining Services

    • Athletics

    • Sports

    • Conferences

    • Facilities

    • Coaches

    • Recreational

  • Community

    • Involvement Opportunities

    • Connect with Students

    • Post Jobs/Internships

    • Cross Enrollment

    • Concerts, Exhibits & Events

    • Grand View Experts

    • Study Abroad for Community Members

    • Camps, Clinics, Workshops

    • Memorial Gardens

    • Meeting Facilities

    • Live

    • Learn

    • Work

    • Play

    • For Our Neighbors

Homepage content areas:

  • Recent News

  • Upcoming of Events

  • Testimonials

  • Featured student/faculty member

Navigation by target audience:

  • Prospective Students

    • Incoming Freshmen

    • Transfer Students

    • Graduate Students

    • International Students

    • Military/Veteran Students

    • Continuing Education Students

  • Current Students

  • Parents & Family

  • Faculty & Staff

  • Alumni

  • Community

Less prominent persistent navigation:

  • Directory

  • Calendar

  • Giving

  • Visit

  • Search

  • Contact Us

  • Social Media sites

  • Employment opportunities

  • MyView

  • Webmail

Homepage Redesign

After working out the navigational structure, I created a new design for the homepage to bring it to life. I chose to stick with the school’s black and red colors, and added in a gold accent color from the brand guidelines. Rather than having all the link text red, I used red and gold to draw the eye to key elements on the page. The increased use of black helped the site not look too similar to Iowa State University, which has cardinal and gold as it’s school colors. I built an interactive prototype using InVision to show how the interactive elements in the navigation would work.

GVU_admissions.png
Screen Shot 2018-12-06 at 5.30.20 PM.png

Learning Processing

For this same course, we had to learn Processing and incorporate it into the page design. We had several assignments to learn Processing script and were provided a few examples of its application in design. I thought it was an interesting thing to learn, but as an experienced web designer, I didn’t think it was a skill most designers would find practical. I used it to animate the red fact box, swapping out the facts with a subtle animation.

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.

 

 

 

 

Junior Achievement

A co-worker and I were asked to help create a website for Junior Achievement of Central Iowa. We worked with the client to develop the site architecture. I created some visual concepts, using their brand guidelines, and selected a Wordpress theme to customize once the design was approved. My co-worker worked on getting access to the site host, installing Wordpress and creating admin accounts. We both helped populate the content and trained Junior Achievement staff on how to update the site themselves using Wordpress.

Aviva Advanced Markets Animate

The Advanced Markets team wanted an interactive tool to help agents better understand business insurance fundamentals. The desire was to allow agents to answer simple yes or no questions until they reached a point where we would display a recommendation on a course of action (along with supporting documentation for further reading).

I built the page with a responsive layout and a javascript accordion, which seemed to be the simplest solution for our one-page limitation. The logic flow actually became quite a challenge to match up with the code of all the nested accordion divs. This site was my first forray into CSS3 animations. I wanted to tie in with the "animate" name of the promotion, without going overboard.

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.

Aviva's Agent Website

When I joined Aviva, work on their agent portal had begun. The team was struggling with the designs produced by an external agency for the public website. The agent website had much more content and planned functionality so new layouts and UI patterns were needed.

I worked with Business Analysts who were writing business requirements for each area of the site, creating wireframes to accompany their documentation. Once approved, I would design new UI elements and I work with developers to implement the design. If technical issues came up, we would whiteboard out options to come up with a design solution that would work. I did quite a bit of CSS tweaking to get the design of elements just right. I participated in daily standup meetings, show and tells, user acceptance testing and usability testing sessions.

Paper Systems

Paper Systems was one of the most interesting clients I worked with while employed by Red 5 Interactive. Early in the project I was able to meet with the clients and tour their facility, learning about their products and the challenges of storing bulk liquid products. They essentially make cardboard boxes that hold large plastic bags that have valves in them. They did not have a logo or visual identity, so that’s where I started.

For the logo, I wanted to incorporate the "liquid” concept visually. I also tried some concepts that incorporated recycling, green and cardboard references.

 The chosen logo is the one on top. The smaller logos show some of the alternative concepts we presented.

The chosen logo is the one on top. The smaller logos show some of the alternative concepts we presented.

Once the logo was approved, I worked on designs for the website. We also created an email template.

Meredith "Deals" Microsites

This is a collection of promotional microsites I worked on while at Red 5 Interactive. Ads in car owner magazines would direct readers to a sweepstakes site where they could enter to win a prize. While there, they could also browse other exclusive offers. I was provided images, but had freedom to design the layout of the sites, and matched the aesthetics of the brands.

DodgeDeals3.jpg

Shopping Mall Websites

This is a collection of web site designs I worked on while at Red 5 Interactive, which has a client base that includes several chains of shopping malls. For each chain, I would design a layout based on the features they wanted to incorporate. Each shopping mall they owned would have a customized color palette and imagery that was updated quarterly.

Each mall would also have an interactive directory map. I would create the map in Illustrator and export it as a SVG so that the colors and text could be changed programmatically. At one point, I created 3D directories for all the malls, which was a challenge.

In addition to their primary websites, I would also work on promotional microsites. The client would typically provide the creative assets for the campaign and then I would translate that into the online experience, working from wireframes our production coordinator created. Again, we would work in functionality so that each individual mall would have its own branded campaign site.