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.

Iowa History Journal Cover Art

I’ve had fun working on cover art for the Iowa History Journal on a freelance basis. My first job was colorizing a black and white photo of Smokey Smith. I used Photoshop to remove any major dust and scratches. Then I added extra background so there would be room for the cover elements before adding color. I did not design the final cover, but I am showing it here for context.

My second cover for the journal was to come up with a cover that would illustrate a feature story about Iowa’s baseball history. The owner of the magazine collected and provided several scans of vintage baseball cards that he wanted to use. I curated them down to reflect the time range and made sure to include the players most mentioned in the article. I chose to tie them all together with a weathered background that mimicked an old baseball glove. I also mocked up the cover to show how I envisioned text being placed, but I did not lay out the final cover.

For this cover, I was again commissioned to colorize a black and white image. I searched online for images to get the uniform colors accurate. Again, I added vertical space to the image so that it would fit the dimensions of the cover.

This issue told the story of how Japan attempted to send bombs to the US during World War II. I was provided an image of the balloon and decided to take an illustrative approach — combining an ink rural landscape and the rising sun of Japan’s flag.

"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.

The Cube

For an assignment at Grand View, we were challenged to design the interface for an imaginary cube-shaped apartment block in Dubai where the elevators opened directly into 1600 different apartments. Due to the complexity of the layout and the demographics of the population of Dubai, this required a lot of thinking.

I started by researching Dubai. Based on what I learned, I created some hypothesis personas for the building. I mind-mapped all the considerations and researched elevator interfaces. Rather than physical buttons, I designed a touch-screen interface. Inspired by my Volt’s remote key fob, I worked around the idea of a key fob that a resident could carry in a pocket or purse to be detected as a resident. I then created a flow chart of the various interface screens needed for the elevator. If you would like to read my Dubai summary and hypothesis personas, you can read the full summary here.

I used Balsamiq Mockups to create wireframes of the interface.

Grading app design

This was a project completed for an app design course at Grand View University. The brief was to create an app for a school district that would provide a more efficient way for high school students to electronically submit assignments and for teachers to digitally grade and track them.

I started by researching similar apps and mapping the flow through the app of key tasks. I also identified three user types — teachers, students and parents.

As part of our first milestone, I created an abbreviated style guide for the app. We were given the school mascot and school colors. I created a simple word mark and chose accent colors and typography that would be modern and easy to read.

I also storyboarded key tasks that would be completed in the app.

I then created wireframes using Basalmiq Mockups to show the layout of the screens and how they would differ for each user type.

After the wireframes were complete, I created the final designs in InDesign, added interactivity and used Export Kit to create a prototype app. You can download the epub file here. I conducted testing sessions with six users to gain feedback on the app.

Finally, I created an Implementation Summary addressed to district administrators to help them understand how the app works, how it was built and why it was designed the way it was. I included a design overview, a summary of the usability testing and recommendations for implementations. You can read the full summary here.

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.

Tubabble

One of the more interesting (and challenging) projects I worked on for a Human Computer Interaction class at Grand View University, was to create an Internet of Things product. The catch was, it had to be something that didn't yet exist, AND we had to make a functioning prototype that was somehow related to the product concept.

We started with some structured exercises to generate ideas, and then had to do some market research to evaluate different products that are currently in the marketplace. So I researched products like the Segway Robot, Amazon Echo, Ember mug, Parrot Flower Power, Petnet Smartfeeder and the Samsung Family Hub Refrigerator. 

Compiling info into a consistent framework for analysis

I initially fell in love with the idea of creating a dog collar that would alert me if my dogs got out of the yard. I thought it would be great to have an app to show the exact position of the dog, and some sort of musical element that could be turned on to aid in finding the dog (in case he was in the bushes somewhere). In my head, the music would play "Oh where oh where has my little dog gone?". Maybe it could even light up or glow in the dark.

My first stumbling block was when I learned that companies like Garmin already have dog tracking devices. A classmate had one. It was heavy and too bulky for a small dog, so I thought I could propose something small and lightweight. But as I did more research, I learned that there are already companies going that route. I also learned more about how position tracking actually works. In order to have real-time location tracking, the device pretty much has to have its own data plan.

The concept:

I decided to try a different route. Inspired by all the "smart" kitchen devices, I decided to focus on the bathroom. I have a young daughter and bath time can be a struggle, so I thought about what a smart bathtub could be. I imagined a bathtub that I could start remotely that would fill to my preferred level and temperature setting.

My target audience was people with disposable incomes who enjoy long baths, or have young children who take baths. They would be early tech adopters who own a smartphone or tablet (required to operate the tub remotely). We created personas to help develop user scenarios, but they weren't based on real data.

Intended benefits:

  • People would not need to monitor the tub as it fills, saving time

  • Consistent heating for the duration of the bath would be more comfortable

  • Burn prevention — water would never be hotter than desired temperature

  • Water conservation — instead of adding more hot water to increase temperature, the tub would just warm up the existing water.

  • Integration of lighting, music and streaming videos could make bath time more fun or relaxing

Prototype:

I created a physical prototype of the app that would control the tub, and a video to demonstrate how interaction with the tub would work. This video prototype was created quickly in Powerpoint, which made it easy to produce but the pacing is a bit tedious because each slide displays for the same duration. 

Making it work

For the final part of the assignment, I decided to demonstrate how to turn something on and off remotely. I thought a crockpot would be a good representation of a bathtub, but found a gravy boat warmer on clearance for $10. Using an Arduino Uno and 1sheeld, I was able to write a program that would allow me to use voice recognition to turn the gravy boat warmer on and off.

The last part of the project was to identify further research needed to make the product real. Here's what I identified:

  • Design a tub heating method that would warm the water without burning the person sitting in the tub. This might mean circulating the water through heated pipes, rather than heating the tub itself like a crockpot.

  • Devise a mechanical method of measuring the water level in the tub. That could be measurement of what is dispensed through the spout, rather than measuring the fill level of what is in the tub.

  • Based on the tub engineering requirements, market research would likely need to be conducted. Would people buy this tub if it required extra plumbing or electrical work? Would they be willing to pay a price that would support the tub manufacture and a profit margin?

  • Distribution might also be a challenge. Could any plumber install the tub, or would they need specific training?

  • What type of liability risk might there be with the product? For example, what if someone filled the tub remotely and a child got in and drowned?

  • The design of the tub control app, and the interface on the tub would need to be tested and iterated.

  • The tub itself would need to be tested. Because bathing is a private activity, any controlled study would need to be followed up with use of the product in a natural setting. Having the tub installed in a few people’s homes and having them provide feedback would likely result in better insights than having people pretend to take a bath in a controlled study.

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.

 

 

 

 

Leaders of Olympus

The challenge:

Athene wanted to rebrand Aviva's producer loyalty programs. These included an incentive trip, a deferred compensation plan, and differentiated service program. Rather than rebrand each program separately, the Program Manager wanted to combine them into one comprehensive package with a consistent theme. We had to come up with a name and visual system that hadn't been used by our competitors, was in keeping with Athene branding, and communicated what each facet of the program was.

Team approach:

We began by brainstorming and names for the big program. The leadership team liked the words "Apex" and "Olympus", so we moved on to exploring what we would call each of the three sub-programs. The final challenge was what to call the different tiers within each program. Gold, Silver and Bronze we an obvious choice. But maybe too obvious? After exploring many alternatives, we all agreed that the obvious choice was the easiest for people to understand.

For the logo design, we focused on the idea of a three-peaked mountain. Each peak could represent a sub-program or level of achievement. All designers contributed logo options, but mine happened to be the one chosen.

Creating a style guide:

Once we had approval on the logo, I began building out a design system. I created variations of the logo so the identity would be flexible across a variety of applications. I also used color coding and iconography to help distinguish between the different components of the program. All of this had to be documented in a clear manner because execution of the collateral would be spread between designers and two agencies in order to meet project timelines.

Communications:

The marketing plan included several deliverables — brochures for each program, flyers, promotional emails, trade advertising, a website, video, qualification letters, stickers, awards, etc.

I worked with our internal writers and designers and reviewed work completed by agency partners. I even wrote promotional copy for an Aruba flyer. We successfully launched the program in 2015, updated all materials in 2016, and continue to tweak copy to be more conservative in our language due to regulatory scrutiny.

Athene Intranet

Aviva was acquired by Athene, and the company needed a new Sharepoint site design. I was asked to come up with just the homepage design and to use as much "out of the box" Sharepoint functionality as possible. At the time, we didn't have much to go on for brand guidelines. Athene's corporate branding utilized an image of a statue of Athena which was very drab and gray. It was quite a change from Aviva's yellow sunshine. I chose to use "retail" colors to brighten up the site.

I worked with the Corporate Communications team to determine what content would be needed and how it would be placed on the page. At the time, they knew they wanted to list off news and events, but weren't sure how much news or how many events the company might have.

One of the more challenging parts of the design was trying to make the header as vertically compact as possible, to keep the emphasis on content throughout the site.

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.

AvivaUSA.com

I spent three years working on Aviva USA's web properties. AvivaUSA.com was their public-facing website. Before I joined the team, the website had been designed by an external agency and the internal graphic designers created all images.

I also took on creating all graphics. I advocated for live text instead of images with text, working with the Web Specialist on the team to update components in the CMS. The site design also made heavy use of drop shadow images that were all fixed-width and in the HTML code. I rewrote the code to use CSS background images and gradients instead which decreased the load time of the site pages. On the homepage, I simplified the account login area. I also reworked the site footer to include more helpful links. As our use of social media increased, I added sharing functionality and links to Aviva’s social pages.

I participated in an advisory board for the website where we proposed and prioritized roadmap items for the site. User testing was conducted quarterly. I would attend the user testing sessions and make suggestions for improvement afterwards.

 Aviva USA Home page

Aviva USA Home page

One area we significantly changed based on user feedback, was the “Find an Agent” page. The agency had concepted a tool where you could put in your zip code and it would list an agent near you. In reality, the finder didn’t work very well due to data constraints.

Policy owners sometimes used the tool expecting to be contacted by their existing agent. But would instead be contacted by a new agent trying to sell them a product. We renamed the page “Connect with an Agent” and adjusted the content to eliminate confusion. We also combined separate web forms from different areas of the site into one dynamic contact form allowing us to funnel issues to the appropriate area of the company.

An insight we gained from user feedback was that people were reluctant to connect with an agent because they anticipated a hard sell to follow. So we added content to help them understand the services an agent can provide, and featured profiles on some of our top agents to humanize them.

I created wireframes of the pages to show the flow through the content. For the final design, I used icons and visual elements to break up the text and add visual interest. I wrote the HTML and CSS for the pages, and provided input on the form fields.

Find an Agent | Aviva USA – Life and Annuities 2013-07-11 11-33-17.jpeg
 Connect with an Agent page

Connect with an Agent page

“Youmanity” was a corporate responsibility initiative that had three ongoing campaigns. Youmanity tokens were wooden nickels that could be passed on with good deeds and tracked through social media. Street to School was a global initiative for Aviva, and Insuring a Future allowed agents to nominate people who faced a loss without life insurance. I was involved in pretty much any Youmanity project, as it usually included website updates, lead generation forms, social media content and email campaigns.

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.

Aviva Emails

During my time at Aviva, I designed and built many HTML email templates. I learned how to create adaptive layouts using media queries to create designs that would look good on smartphones. I eventually built a modular email template system that contained pretested code for different column widths, buttons, heading sizes, etc. This made it much easier to quickly deploy last-minute emails. The email template system was rebranded for Athene and an updated version is still in use.

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.