The Journey of N

Lifestyle magazine blog design and build.

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.

Y – 2017

Services User research User experience Interaction design Visual design Branding consultancy Frontend development

Landing page on a mock up screen

User research

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

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.

Logo development

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. The logo 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.

AaBbCc
AaBbCc
AaBbCc
AaBbCc
AaBbCc

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.

Fonts

Information architecture

Based on the target audience ideation the main tasks we felt the site had to ensure it met were to:

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

With the key user tasks defined I started to sketch out a basic sitemap. It became clear that the end user sitemap was actually fairly shallow due to the blog style nature of the solution.

Sitemap

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.

Prototypes

Using the sitemap and defined key tasks I sketched out some very low fidelity prototypes. Several different layouts were produced based on similar data hierarchies. From these the final solution was selected based on user testing.

Sketches

Visual design

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

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.

Switch visual designs below

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.

Closing

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 back later for the final solution.