Elin Kero

Elin is running her own company as a photography consultant in Sweden where she helps companies expressing emotion and feelings in product photos. She has also been blogging since 2007 and throughout the years her blog has become well regarded within the photography sphere.

The Problem

A limited audience

The blog was hosted by an online blogging platform where bloggers are able to do certain changes to design and code but were severely limited when trying to do more advanced things.

My goal was to consolidate her blog, her professional photography portfolio, courses and newly launched webshop under one umbrella but to do this I had to rethink the current blog structure and platform. On top of this, she is regularly creating blog posts which, together with the size of her blog, created some additional complications with migration to the next platform.

The migration and expansion is a crucial step in growing her business, because her site will serve as a hub for all of her services in the future. We needed to implement courses, a webshop and a newsletter while keeping her blogging platform intact as it’s the main source of visitors today.

My role

What I focused on

My role is to work with the user experience in this project to effectively integrate the services without losing the established blog foundation she has today. I’m also taking care of the migration to an alternative platform and the design and implementation of the existing blog during that process.

Due to Elin’s regular blogging habits the timeline was short. We needed to switch platform right away because every new blog article caused us to ask for a new export of her blog from her previous blogging platform. Thus we needed to approach the project in several logical steps:

* Migrating the an alternative platform with current design
* Rethinking the menu and page structure
* Redesigning the blog and implementing new services
* Incorporating professional portfolio and rebranding under new name

Solution

A new menu structure

When implementing the new sections (primarily courses and webshop) the current menu structure grew to large. In addition to this some blog posts written about photography tips that needed to be consolidating with courses because it would make more sense. This allowed us to decrease the amount of menu links, and putting everything regarding “the blog” under a mega menu section.

A new top menu

Important sections early

We’re still working with a blog and the articles are what makes people visit Elin’s site today. I wanted to keep the focus on the blog and utilize it to push users towards the newer sections.

One way to achieve this is to display an important blog post at the top (which would be set through the administration control panel), and dividing the top hero section and the rest of the blog with row of gateways to the other sections. These gateways are also color coded and available in the navigational structure throughout the site.

Top header

A minified blog structure

If the main reason people are visiting the root URL to a blog is to read the articles, it makes sense having the articles fully written out to avoid an extra jump to the article page. But for returning visitors it’s highly likely that their primary interest is the latest article, which then would put less focus on the older ones.

We obviously can’t disregard the older articles, but we can minify them to take up less visual real-estate on the site. Visitors most probably wouldn’t mind jumping, as their way of thinking at this stage would probably be the same as when they are browsing a category - they will click on what’s interesting to them.

Article view blocks

The article pages received a face lift as well where we moved the headline above the top picture to encourage the visitor to start reading right away instead of looking at a photo. The photo then serves as a short divider to catch the users’ attention further, followed by the content of the blog article.

Article header

Creating returning habits

Elin is a photographer, so it’s essential we let her photos take up a larger visual space thoughout the whole site. I wanted to see large category and article pictures, streamlined together with good written content that makes visitors return.

Her only way of reaching out to her readers was through an external service. We wanted to expand with new possibilities so implementing a newsletter and user base on her blog. Combined with the section implementations above it would be easier to sell content to visitors in addition to the free content she already gives out.

Approach

Migrating to Wordpress

After the first workshop with Elin it was fairly easy to see where the problem was and that the first step was to switch platform. It was a complicated process due to her frequent blogging habits and her blog being to large for automatic export of all the content.

We had to time it right and prepare as much as possible (such as DNS changes and recreating the blog on Wordpress) before doing the actual import. When all content was in place and the design was functioning, we pushed the button and within a short timeframe we had switched platform.

Rebuilding the menu structure

Initially we tried a few different menu structures, none of which worked because they all was based around the idea that the blog would be the center part of the website and the other sections would be “attached” to it. It was first when we saw the blog as another section, equally balanced with the new ones, the menu structure made sense.

This sparked a lot of ideas like creating visual hooks deeper into each section to bridge over to the other section. Deeper into the blog structure, e.g. on an article page about a new product she’s selling, we could create bridges over to the shop where you could purchase the product and photography courses could, for example, have links over to articles explaining her photography process.

In the end, everything connects which shortcuts the normal ways visitors would need to take to traverse the sections.

Redesigning the front page

It was obvious that we needed to have the dividing sections visible early, above fold, but in the beginning the plan was to have the latest blog article first. Structurally, this meant that the sections divided the hero image of the latest blog post with the content. After some sketching and designing I realized that this didn’t make much sense as it would be perceived to segregate the image and content causing it to look like they didn’t belong together.

Luckily the problem also was the solution, because that meant we could use the top section for an important article that we wanted to showcase for a longer period of time no matter what happens below in the actual blog.

The top thumbnail of the latest blog post didn’t necessarily need to be shown at this point either as the visitor could go into the actual article page to see it should they want it. I believe visitors are here for the content of the articles, not necessarily the thumbnail-photo.

This case study and Elins page will be updated in iterations.