Analysis of blog’s audience and considerations

Current blog audience, according to the Google Analytics report, is loyal audience: 56 percent are returning visitors. They use Chrome (47 percent of visitors) and Safari (20 percent) with just 3 percent with Internet Explorer set up and running. Mobile users mostly browse from iOS devices (64 percent), with 35 percent using Android. Definitely no Flash technologies should be used; also i should check if my design is responsive.

71 and 8 percent of readers are from Russia and Ukraine respectively, so it is better to stay with Russian or European hosting company.

7 percent of traffic comes through RSS, it is still an alive technology in Russia, so the subscription buttons should be clearly visible. 18 percent of traffic is referral, that is coming from social networks, hence sharing buttons and easy commenting system are necessary.

The demographics overview of GeekChick.ru

With the majority of audience female, the design should be feminine: ‘artistic, sensitive, deep, associative, open, personalised, aesthetic and receptive.’ (Humm 1989:85, cited in Leung, 2008)

User Personas

As recommended by Caddick & Cable (2011), all project's personas are based on real users and readers of GeekChick.ru blog. After four year of blogging, some quantative and qualitative data was collected along with quotes and even real readers' photos. The App Chick and The Shopper Chick are the Focal Personas, while The Nerd Chick is the Secondary Persona (Olsen 2004).

Also, as was recommended by Brown (2006), Blog Features were added. It is suggested to list System Features, however the most valuable features here are more on a content and information organisation side.

System Architecture Diagram

System Flow Chart

Project scope statement

The purpose of the project is to redesign the GeekChick.ru blog and move it from the Wordpress to the Ghost platform along with content, settings and comments system. Additional requirements are: to set up Amazon.com aStore, to change the hosting company and to move hosted images from different hosting companies to the cloud servers.

In scope

With a deadline 10 June 2014, it is planned to:

develop an aStore from Amazon.com with affiliate links inside. Active links to this aStore should be available from the each page of GeekChick.ru;
restyle the CSS of aStore;
transfer the post database from Wordpress to Ghost blog platform (from PHP to Node.js);
move all images hosted on Wordpress linked hosting (Jino.ru) to cloud services Amazon AWS and Cloudinary;
to transform posts categories to tags, edit the list and move the whole tag system to Ghost;
to choose and install LESS-written responsive Ghost theme (for instance, Mochi) to deconstruct and investigate its code;
to download and install in the test development environment Ghost project the Linen Theme for further customisation;
to relocate and set up Disqus commenting system, Google Analytics code and FeedBurner feed;
to link social network accounts to the Ghost blog using open APIs: Facebook, LinkedIn, Twitter, Delicious.

Out of scope

Ghost theme design could be created in two defined stages: template file creation and styling with CSS or LESS. (Bracey 2013)

While template file creation could be completed during this particular course, design and styling is definitely out of scope and should be finished until 1 August 2014.

For visual enhancement I will use Original Dream color palette by Adobe Kuler, extended Cyrillic Google font Roboto Slab by Christian Robertson, and Linen Theme as a base for development.

Features that will be added after the final course deadline:

Responsive design (tried and tested);
Sticker.js application to the Social Network circles;
Separate pages for additional content, such as offline author's publications, crowdfunding projects, mediakit and contact information.
Blog's logo and favicon.
New rubrics, promoted in the right column: interviews, translations, mediakit, blogrolls.

Development plan

It is the latest update of it, you can find the first edition in the Learning Proposal.

Week 9	Draw a detailed mockup of the updated Ghost theme. Start customising Linen Ghost theme using Handlebars.js and Mustache template language. Finish the System Plan.
Week 10	Take a Node.js track on TreeHouse. Move Disqus comments from WordPress to Ghost. Alter Google Analytics code. Investigate moves needed to transfer the RSS feed.
Week 11	Investigate Ghost plugins and make a list of possible design changes. Start to implement design resolutions to Ghost theme. Resolve current issues with its developers.
Week 12	Update the hosting plan, test the results, consider additional learning paths to acquaintance yourself with tempting languages.
Week 13	The final stage. Collect feedback, ask for help, list all educational resources, validate, publish and test all code and final pages.
Week 14	Validate any published code. Post a final evaluation of my learning experience. Collect and publish all badges, certificates and final exam results to illustrate my progress. Publish any final pages and compose development plan for independent work. List educational paths or resources I still need to read and finish. Move my study blog to the independent hosting.

Ghost theme design layout

With the Mochi theme installed there is a list of at least seven modifications that should be made until the deadline:

The Ghost theme designing plan

1. Correctly displayed Cyrillic fonts should be added. Text transformation should be reconsidered.
2. Tags should be transformed from Uppercase to Sentence case.
3. The custom background will be applied.
4. Links structure will be changed.
5. All necessary SEO alterations will be made. All I’ll add the favicon and the blog’s logo, along with the author’s photo.
6. It is the place for Disqus commenting system, transfered from the WordPress CMS to Ghost.
7. The colour scheme will be changed.

References:

Amazon Web Services 2014, Amazon Web Services (AWS) - Cloud Computing Services, Amazon Web Services, Inc. or its affiliates, viewed 06 May 2014, <http://aws.amazon.com>.

Amazon.com, Inc. 2011, aStore for Amazon Associates, viewed 31 March 2014, <http://astore.amazon.com>.

Bracey, K. 2013, Understanding Ghost: Stages of Design, Tuts+ Web Design Tutorials, viewed 05 May 2014, <http://webdesign.tutsplus.com>.

Brown, D.M. 2006, 'Personas', Communicating design: developing Web site documentation for design and planning, Peachpit, Berkeley, California, pp. 15-42.

Caddick, R. & Cable, S. 2011, 'Personas', Communicating the User Experience: A Practical Guide for Creating Useful UX Documentation, Wiley, pp. 9-42.

Cloudinary.com 2014, Cloud-based image management upload, viewed 25 April 2014, <http://cloudinary.com>.

Ghost 2014, Ghost — Just a blogging platform, viewed 2 May 2014, <https://ghost.org>.

Google 2014, Feedburner, Google Feedburner, viewed 06 May 2014, <http://feedburner.google.com>.

Google.com.au 2014, Google Analytics Official Website – Web Analytics & Reporting, Google, viewed 06 May 2014, <http://www.google.com.au/analytics/>.

Kim, J. 2014, Sticker.js, Jongmin Kim, viewed 06 May 2014, <http://stickerjs.cmiscm.com>.

Leung, L. 2008, Digital Experience Design: ideas, industries, interaction, Intellect Books, Bristol, UK.

mark 2014, Original Dream color theme by mark, Adobe Kuler, Adobe Systems Incorporated, viewed 4 May 2014, <https://kuler.adobe.com/Original-Dream-color-theme-3859234/>.

Olsen, G. 2004, Persona Creation and Usage Toolkit, Interaction by Design LLC, viewed 1 May 2014, <http://www.interactionbydesign.com/presentations/olsen_persona_toolkit.pdf>.

Robertson, C. 2014, Roboto Slab, Google Fonts, viewed 4 May 2014, <https://www.google.com/fonts/specimen/Roboto+Slab>.

Theme Spectre 2013, Linen | Theme SpectreTheme Spectre, Theme Spectre, LLC, viewed 29 April 2014, <http://themespectre.com/linen/>.

Themeforest.net 2014, Mochi – Responsive Theme for Ghost Preview, viewed 25 April 2014, <http://themeforest.net/404?ref=hdalive&ref=hdalive&clickthrough_id=219917761&redirect_back=true>.