The Journey of N Lifestyle magazine blog design and build

Food, fashion, fitness
Mockup with first view

Summary

This project was produced for my partner, Nagma, who is embarking on a journey of getting healthy. In order to help motivate and partially keep her accountable for progress she requested I design and build her a website on which she could journal her fitness progress, meal ideas, fashion tips and any experiences she has along the way. Her aim is to help inspire others on their own journeys.

The final solution was built upon Wordpress as I felt it would be an easy enough platform for the client to use whilst also providing room for growth if needed as the brand progressed.

Ideation

We started by looking at themes which we could incorporate into the design, colours and style the client liked and the target audience.

Target audience

  • Young women.
  • Age range of 16 to 30.
  • Looking to get healthy, food inspiration or fashion guides.
  • More likely browsing on mobile.
  • Likely to socially share articles they find interesting.
  • Will leave comments if they want more information.

Themes and styles

  • Likes the layouts of fashion magazines.
  • Wanted minimalistic aesthetic - wanted her photos and words to be the most important aspect on the screen.
  • Wanted few colours.
  • Likes 'Millenial Pink'.

Branding design and style guide

From our initial discussions around the themes, I worked closely with the client to develop a simple style guide and brand for the site. I did however leave it very open should further branding work be required at a later date.

We decided upon the brand name of "The Journey of N" as the client didn't want her full name in the brand but wanted an indication of the essence of the blog.

Logo

The logo (below) can be rendered in any of the brand colours to provide flexibility. It is also saved as an SVG so can be resized to any dimensions for the clients use.

The Journey of N logo in pink

Colours

#E9637B

#FFFFFF

#F5F5F5

#66676D

#242A32

Typography

The fonts were chosen to pay homage to the classic fashion magazine typography. A serif font was chosen for the headings which had a clean and precise high fashion look, whilst body copy was contrasted with a modern sans-serif font.

Heading font - Cormorant Bold

Type sample of Cormorant Bold

Body font - Open Sans Light

Type sample of Open Sans Light

Key user tasks

Based on the target audience ideation the main tasks we felt the site had to do well were:

  • Display clear article content.
  • Be easy to navigate.
  • Be responsive.
  • Be able to filter based on categories.
  • Display images clearly with no distortion.
  • Be accessible.
  • Allow articles to be shared on social media.
  • Allow users to comment on the articles.

Information architecture

Based on the key user tasks I started to sketch out some very low fidelity prototypes and produce a sitemap. It became clear that the end user sitemap was actually so shallow it didn't require documenting.

I carefully considered the responsive aspects of the design throughtout as based on the target audience a high number of potential users would be accessing through a mobile device and we wanted to give them the best user experience possible.

Sketches

Once I was happy with the information hierarchy on the prototypes I proceeded to do some high fidelity mock ups to show the client.

High fidelity prototypes

Within these I incorporated the branding and some mock content to show a more realistic representation. They however didn't include the comments area as at this point we were unsure on the comment plugin that would be used.

Main page mockup Article page mockup

Development

With the client happy, I moved on to developing the site using php, html, css, and jQuery on a CMS platform of Wordpress.

Some small additions were made during development including a footer which had a small "about" section of the client, and the addition of comment styling to match the rest of the site.

Final words

The client was extremely happy with the final result and intends to use it frequently.

This site will be available online shortly, so please check it out for the final solution.

Visit The Journey of N