Overview

Kristin Yantis, principal at at the Denver-based Malen Yantis public relations, wanted a site that would wow her clients, the same way that she wows them with her hard work and great results.

Challenges

The site needed to have that little something extra in order set it apart. Going above and beyond in order to meet the needs of a client is always an exciting challenge. In this case, finding ways to really make Kristin and her work shine, from their magazine spreads to their gorgeous retreats, was the main goal of the site.

Solutions

The central focus on the site’s homepage is the curtain reveal on the homepage. With an image carousel to showcase their offerings, the image carousel itself became the screen for the curtain. As the user scrolled down the page, the carousel and nav menu scrolled up to reveal the main content of the site.

Cleverly integrated to maintain the SEO on the site, the curtain-raising effect was a hit with the client, and gave the site interaction with the users an example of the kind of out of the box thinking that MYPR could deliver for them in both new media and traditional ways. Working flawlessly across the device ecosystem, the responsive site was lovely as well.

Results

The outcome was a lovely site that integrated and improved the client’s social media visibility on their site, allowed them to easily update their content, and gave them the kind of striking responsive website they were looking for.

Overview

The Ohio Alliance to End Sexual Violence (OAESV) needed a website to increase awareness of and promote tools for combating sexual violence among middle and high school kids. Working with the creative team at About350 I developed a responsive, visually dynamic, image heavy, user experience that considers the mobile user first, and appeals to a younger audience.

Challenges

The challenge of this development-only project was to make sure that it loaded quickly and felt fresh. The image-heavy focus of the site mean that image replacement techniques and highly optimized images that loaded quickly on mobile devices and felt intuitive to users raised on a mobile-first mindset.

Solutions

Using the Foundation 6 framework in combination with WordPress I was able to build a crafty, quick-loading website that looked gorgeous too. Optimizing all of the images to reduce their size while maintaining their vibrant colors at high resolutions was the first step. The second step was to leverage Foundation’s Interchange functionality to make sure that the site was serving the right sized images depending on whether the user was using a phone, tablet or desktop computer.

For style purposes I integrated a library of fade-in animations on much of the content, to help keep the feeling of the site dynamic and exciting.

Results

The result was an award-winning website. ICanBeTheOne.com was honored with a Hermes Creative Award for excellence in web design and development.

Overview

Redesigning the Chibi Tarot site was a labor of love for me. The major’s only deck was a kickstarter project I launched five years ago and have worked to maintain and improve since then. The website had been out of date for a long time, and was eventually hacked forcing me to use a standard theme that looked really crappy. It was clear that I needed to improve the site’s look, but there were a number of other considerations beyond the site’s styling that needed to be dealt with.

Challenge

1. Quickly getting the user access to all 22 cards in the major arcana without taking up too much space. Part of the beauty of the deck is that each character has their own story to tell. An incredible amount of time and effort went into these cards and making sure that each one is given its due is a difficult thing to manage. While each card gets their own page along with a description of varying length getting the user to that information was proving difficult as the homepage was a bottleneck.

2. Improve the visibility and trustworthiness of the store
The bottleneck was also choking off traffic to the store. Increasing traffic to the store, improving product representation and the trustworthiness of the store were vital to the success of the site.

Solutions

Home Page

While most image sliders aren’t effective, showcasing 22 cards without taking up an entire page demanded some kind of compromise. I chose a slider not out of habit, but out of need. The image slider below the introduction quickly and easily showcases all 22 cards in an attractive and interactive format that works well across the device ecosystem. It quickly introduces the user to the product without overhwleming them with every card or a lot of unnecessary text.

Cards

The biggest technical solution was to create a custom post type for each one of the cards in the major arcana. There were two advantages to this. One, it separated out the card content from the rest of the blog content on the back end, giving it higher visiblity and a sense of indepdendance, and making it easier to manage the varying types of content. Second, it gave the cards their own SEO friendly URL, aligning more closely with the optimal format recommended by MOZ(https://moz.com/learn/seo/url).

Singles

Each card now has a custom in page navigation that allows the user to more easily browse the cards without having to return to the main menu. Both the “Next Card” and “Previous Card” navigation elements include the image for the card, making it more visually compelling and immediately recongizable. The easy and attractive navigation helps keep users on the site and has helped reduce bounce rate.

Store

Improving the store was relatively straightforward. First I clarified the two differeing ordering options to US and International, then used a very standard looking button. I chose blue as a more trustworthy and recognizable button color instead of orange, which conflicted with the theme pattern, but I thought it was important enough to do that here.

I also created a number of product photos that I shot myself over the course of a weekend to give the user a sense of the size of the cards as well as their physicality, which is an important aspect of owning an artifact.

Results

The result is a vibrant, colorful site that improves access to the content, gives the user tools to navigate quickly to the information they’d like, whether that’s the shop, the blog or one of the 22 cards. Since the new design sales are up, site visits have increased and the length of visit has increased.

Overview

Harlequin books wanted to update the look and feel for their flagship writing contest, “So You Think You Can Write”, a competition that selects a new published novelist every year based on editor choices and fan voting. In the process they wanted to improve access for their users to their editors and their content, and create a unique events calendar.

Challenges

There were multiple challenges to this projec: The first was to organize the previous content that the contest had generated in a way that made it useful for new users. Second was to improve access to editors in way that allowed for both quick access and gave the users the option to quickly access more information if they wanted. Lastly, to do it in a unique and fun way that kept the users interest.

Solutions

Content

The first thing I did was to create a schema for the legacy content that users were having a difficult time accessing. I created the “Writer’s Workshop” and broke down content into four different categories: Getting Started, Writing, Advance Topics and Submissions. Using these four buckets I categorized all the previous content to make it easier to navigate, then added a menu to the homepage aligning icons with each category to use for shorthand throughout the site.

Editors

To improve user access to the editors I immediately added a “Tweet them now” button that allowed users to send each editor a tweet right from their mini-biography on the editors page. This meant that instead of sifting through info to find the editors twitter handle and then going to Twitter.com just to tweet them, the users could simply click and tweet right from the editors page. Secondarily, I used Isotope.js to create a pinterest-esque interface for the editors along with a toggle switch to compact the editors into a small space that allowed for the users to conveniently click open their tag and read their biographies. This allowed quick and easy access to editor information that functioned well on mobile as well as desktop.

Results

SYTYCW.com is a dynamic and interactive site that allows the client to update their editors, events and content in useful way for their users, that looks great on desktop computers and mobile phones. The responsive solution looks beautiful and loads quickly across the device ecosystem.

Overview

Pacific Intnernational Academy came to me after a thorough rethinking of their site. They’d created a new logo, and their current look and content were out of date and didn’t function on mobile. Their staff had gone through and thoroughly updated their content, and now they needed a new site that looked great and got their point across quickly to their target audience.

Challenges

PIA’s biggest challenge was that their target users were, by definition, poor English speakers. So communicating the application process and various bureaucratic tasks clearly and concisely to non-native English speakers was an integral piece of creating a successful site for them that integrated responsive web design techniques.

Solutions

I took the artistic direction of site from their new logo, integrating their primary colors in attractive and understandable ways. I used their red as the ‘activity’ color, highlighting areas and components of the site that users could interact with, and used the blue as the static color, connoting headlines, page breaks and other static site elements.

To help simplify the application process I created a numbered design element that used numbers in combination with instructions to quickly and clearly state the order of the steps, how many steps there were in the process, and how easily the process could be completed. This motif was used repeatedly throughout the site to create familiarity with the theme and simplify what might otherwise have been seen as overwhelming applications processes.

The pattern was created using pure CSS, which made it translate incredibly well to mobile phones and tablets, as well as looking great on desktop computers.

Additionally I was able to craft CSS for their third party application submission site to match their site design, improving brand consistency and user trust when visiting an off-site application.

Results

PIASchools.edu is a clear, easy to navigate website that displays a lot of content in an attractive and fun to use way. Their processes are clearly delineated, and though international application is never an easy thing to do, I was able to represent it clearly and concisely for all of PIA’s users.

Overview

BookClubbish.com is a Harlequin Books property that helps promote and encourage the formation and continuation of book clubs all over the world. The brief for BookClubbish.com was meant to be a small design update from its original design. Their team was redesigning the logo and wanted me to integrate it into the previous site. Unfortunately the logo designers did a poor job of integrating the existing colors or aesthetic into the updated logo.

Challenges

The first challenge was finding a way to redesign the site around the new logo in a way that fit the client’s budget, while integrating WordPress author functionality in a way that benefitted the site content all in a responsive web design package.

Solutions

Reflecting the artistic direction of the new logo, I created a minimalist design that kept unnecesary stylistic flourises to a minimum. This had a two-fold effect in reducing the design and development time to keep it within the client’s budget.

On the backend I was able to build utilize WordPress’s custom post type functionality for the books, and then use its author functionality to link those books. Leveraging WordPress’s native functionality allowed me to keep the size of the site small, and deliver content quickly and efficiently, without the use of third-party plugins. This had a knock-on effect of keeping site maintenance low and reducing client headaches and hassles for plugin management and updates.

Results

BookClubbish.com is a beautiful, minimalist site that took a difficulty and turned it into an asset, using bright complementary colors to brighten and embolden the site. An easy-to-use back end allowed the client to easily and confidently publish book reviews for their book club members knowing that users could easily navigate through related titles and authors.