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.

    Paintpushers

    I've been a member of a local artist group for nearly ten years (2006–2015). The group meets monthly to critique each others' work, commisserate and have fun. The group also puts on an annual exhibit, which has to be marketed. For me, these are fun exercises in how to communicate the concept of the show without making an assemblage of photos from each artist. Our budget is pretty low, so we hang up posters around town, hand out postcards and use social media to try and draw an audience.

    My role within the group has been to edit press release drafts, set up the website, train people how to use it and then try to persuade them that it's really not that hard to update once in a while. Paintpushers.com is built on Tumblr specifically for ease of use, low cost, and easy sharing functionality.

    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.

    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.