Final Desktop

Final Mobile

Presentation Results

Need to work on;

Mobile;
Sizes of mascot boxes, make wider and shorter. Try to fit all 5 in the fold.

Desktop;
Article look, make text column smaller, make paragraphs. Use left column for text, right column for images and captions, allowing for over spill into left column.

Mascot Development

I have decided to develop the mascots into editors. This means that they will be seen as the complete editors for each tag of the site.

Cat-Local;
Your neighborhood cat is dedicated to show you the top local news in your area any way possible.

Bear-World;
Your well-traveled bear is searching to bring you the best worldwide news to read after a long hibernation.

Dog-Sport;
Your best friend dog is excited to fetch you the most tail wagging sports news in and out of the field.

Deer-Life;
Your most zen deer is grateful to present you the freshest life news to get your inspiration kickstarted.

Elephant-Business;
Your memorable elephant is dedicated to present you the fresh-off the press business news like you had heard it yourself.

Mascot Images

Local Mascot:

• Animal - Bird
• Background - Map of wellington
• Middle-ground - Bird home?
• Prop - ?
• Wearing - ?

World Mascot:

• Animal - Bear
• Background - Map?
• Middle-ground - ?
• Prop - Backpack? or globe?
• Wearing - ?

Sport Mascot:

• Animal - Dog
• Background - Field (Soccer?)
• Middle-ground - ?
• Prop - Soccer ball
• Wearing - Sporty gear

Life Mascot:

• Animal - Mole
• Background - Garden 
• Middle-ground - ?
• Prop - Gardening gear
• Wearing - Sunhat

Business Mascot:

• Animal - Elephant
• Background - Buildings
• Middle-ground - ?
• Prop - Suitcase
• Wearing - Tie and Suit?

Technology Mascot:

• Animal - Cat
• Background - ?
• Middle-ground - ?
• Prop - ?
• Wearing - Glasses

Mascot Inspiration:

Friday, 17th March

Development of the four user journeys;

Haiyan Zhang - phone:

• Features to use - changing languages option.
• The journey will be to find an article about china in her native language on her phone.
• Home -> World -> Scroll? -> Language button -> Mandarin/Cantonese -> Article

Sarah Blake - desktop:

• Features to use - commenting section.
• The journey will be to find a local article that she can share her opinion on with and to comment on her computer.
• Home -> Local -> Scroll? -> Article -> Comment button -> Post comment

Andrea Pazmandi - phone:

• Features to use - sharing to social media option.
• The journey will be to find the latest sports news on the All Blacks or Silver Ferns and post it to Facebook on her phone.
• Home -> Sport -> Scroll? -> Article -> Facebook share button -> Share

Barry Down - desktop:

• Features to use - email option.
• The journey will be to find the top international political article and email it to his colleges on his computer.
• Home -> World -> Top article -> Email button -> Send emails

To do;

1. Design basic mascot looks
2. Hard wireframes of world and local
3. Soft wireframes of sport, business, technology and life
4. Design mobile versions 
5. Hard mobile wireframes of world and sport
6. Design background of home page

Tuesday, 14th March

Themes for pages:

• Active, energetic (Sport)
• Technical, scientific (Technology)
• Sophisticated, polished, refined, elegant (Business)
• Cosy, organic, natural (Life)

Pros and Cons of Each Personae;

Haiyan Zhang - Phone:

• Pros - Simple, two languages
• Cons - Not specific, not diverse choices

Hemi Kamana - Web/Phone:

• Pros - Two languages, needs eye catching articles, podcasts/music
• Cons - Multitasks

Mike Richards - Web:

• Pros - Bookmarks
• Cons - Picky with news

Sarah Blake - Web:

• Pros - Social media, freelancer/contributor, comments

Andrea Pazmandi - Phone/Web:

• Pros - Sport, facebook

Barry Down - Web:

• Pros - Politics, printing articles, emailing articles, forums
• Cons - Vision impaired

User Journey Results:

Successful!

Needs labels for where the local "is" e.g. Wellington label.

Simple map of the place of the background for the local mascot.

Challenge myself with the journey.

Friday, 10th March

Exploration of ideas for website;

Art News:

• Redesign an already existing art news website, such as http://www.artnews.com (less freedom in my own content for the site)
• Design my own art news website with a focus (having to find my own content for the articles instead of having it supplied for me)

World News:

• Using different mascots for the different tags, such as; Technology, World, Local, Sport, Lifestyle etc.
• A front page that is designed around the look and has no articles, only the tags.

Tuesday, 7th March

Enabling interaction:

• Navigation
• Multimedia handling
• Social media interaction
• Sharing
• Comments
• Content contribution
• Related stories
• Suggested stories 
• Signed in experience

Website models (Mascot edition):

I am interested in creating a mascot to tie my website together. The only problem is when creating a mascot for one audience, it does not cater to all the others. I also need to research art styles for my mascot as well as having one that is appropriate for all audiences.

The art style of the Firebug is effective and has a nice 3D look to it. but I am looking to create a mascot that has a range of available expressions and movements to bring character to the website. The website it's is not very interesting or nice to look at.

The mascot for Stickybeak is very fitting and has quite a cute art style which is very simplistic. This sort of art style is the sort of style that is close to my own. The color scheme of the website is a good set of colors but is too simple in it's design. 

The Gadget-O mascot is super cute and could have a few varying facial expressions but not as many as I would hope for. I like the website having a left hand navigation bar, allowing for the mascot to be a main feature of the bar.

YoDiw has a great idea using not only the mascot but themed objects for the buttons and other pages, this really ties the whole website together. The design side of the website isn't that interesting.

The Zaarly home page is beautiful and I would like to design a front page that is fully a themed image featuring my mascot. Mine will need buttons and such but this is a very nice design choice.

Friday, 3rd March

User Testing; 

Prototyping:

• Paper prototyping - Promotes discussion - Focus on layout, hierarchy

• Clickable prototyping (Adobe XD) - Tests UI

• HTML, CSS, Javascript prototypes 

• Participant - Interacts with the system

• Operator - Acts as the computer for paper prototypes

• Moderator - Responds to questions

• Observer - Takes note 

Scanned Paper Prototypes:

The aim of this paper prototype was to get the participant to find their way to the article on the review of the new nintendo switch console. 

Daily Futures:

Shorthand social is an immersive and social storyteller platform which combines twitter and creating your own news stories without the hard work of coding. The connection to twitter allows for the creator to share his/her real stories with their twitter followers and the wider world. Shorthand social has taken professional news and pulled it into a personal context, allowing for anyone to make their story heard.

When you create your own story, there is the feature of adding an image or youtube video to the page to emphasize the point your story is making. Shorthand social has divided the article creation into three parts; a text section, a text over media section, a image or video section. The text section is basis of any article, where the most important points are brought across. Text over media allows the user to overlay text over an image or video which perviously did not have any. The feature of adding an image or youtube video to the page is to emphasize the point your story is making.

Shorthand social then allows the user to publish their own created story to twitter along with customising their tweets which can be sent out at intervals.

Shorthand is currently working to make their product more accessible throughout the publishing process, a focus which has been informed by customer feedback and their self-professed main competitor: internal development teams. Because Shorthand works with the coding and technical aspects of digital storytelling, they are naturally in competition with developers already working at larger media organizations.

Personae Tasks:

• Haiyan Zhang - Wants the top world news that current day. Uses the world tag and then she goes for the top stories.
• Hemi Kamana - Wants to be able to find the most interesting news of the day fast. Scrolls through the "most popular" and "latest news headlines" sections and chooses the ones that pop out to him.
• Mike Richards - Wants to know the newest business news as it comes out. Refreshes the "business" and "money" pages regularly.
• Sarah Blake - Wants to read the opinion pieces. Searches through the "life & style" for articles that the body text starts with the title opinion.
• Andrea Pazmandi - Wants to know all the new sports news. Always uses the "sports" tag and flicks through the individual sports tags when she wants more.
• Barry Down - Wants all the political articles. Hard to find the "politics" tag to start with but now knows it's under the "national" tag, would like to have a world version of it though.

Breakdown of the Brief

Design to guide website specifications;

The website needs to consider:

• User needs
• Usability
• User testing
• Applying relevant style
• Functionality
• Current technology
• Enabling users to reach identified information

The website needs to emphasis on:

• Well-crafted communication
• Visual and user experience 

Prototype for desktop displays:

• Interactive prototype that demonstrates the concept of the website
• Two personaes to demonstrate the features of the website
• Has to have home, category, feature and default article pages

Prototype for mobile displays:

• Two different personaes to demonstrate the features of the mobile website
• At least one mobile version of the default article page

Coded article page:

• Responsive HTML and CSS coded feature article page

User journey:

• Documented wireframe user journey
• Annotated to clarify design intent

User testing report:

• One personae per illustrated interaction
• Navigation of display to achieve desired outcome
• 500 words in total

Concept rationale:

• 250 words in total 
• Outlining design concept, strategy and why

User experience and user interface specifications:

• Instructions describing aesthetic and functionality 

Speculative site map:

• Illustrate a diagram of the architecture of the website

Process blog:

• A biweekly updated blog
• Shows research, design processes and ongoing reflections

Tuesday, 28th February

Dominion Post Articles;

All the below articles are from the business section of the newspaper, the last two images are on the front page of the business section and the first one is on the back. 

Component 1 is the author for less important articles whereas component 3 has an image for the author. The large blue text in component 2 is to attract the eye to the article and is the most interesting part of the text. The image in component 4 does the same thing but means that it viewer doesn't need to read. 

http://www.stuff.co.nz/business/89858912/cas-carter-bank-call-centre-hell

This page has a version on stuff.com which has mostly the same information but is in a linear form with the title, author and image at the top to be eye catching so the user will want to carry on reading.

My user journey to reach this story is to go through the business tab on the stuff.com website and it is one of the top stories on it. 

The other two pages were impossible to find online even though I searched through the business tab and tried the search bar with keywords. 

Weekly;

I am at the information architecture stage where I am looking at other websites for inspiration for my own website as well as gathering my own ideas together about my website. 

Human Centred Design

1. Information architecture development:

• Structural organisation.
• Wireframes (within pages).
• Sitemaps (outside pages) - navigation - relationships between pages.
• Semantic tagging - applying HTML tags to parts of a wireframe.

2. User journeys:

• Describe the journey a user takes towards a goal.
• A persona includes name, age, gender, statement, role, occupation, lives, access, languages - choose a persona of the ones given.
• Show the user's journey in relation to the persona - may start outside the website - show where they click in screenshots of the website. 

3. Paper Prototypes:

• Iterate and test ideas quickly.

4. Clickable Prototypes:

• Invision.
• Both low and high quality.

5. Style Guides:

• Mood boards (colors, taupe faces etc).

6. Build:

• HTML, CSS and Javascript.

Weekly Exercises

Weekly exercises;

The daily futures:

• Find a current website 
• Write a half page report on why it was chosen.
• What the topic is? (cultural, civil society, social media etc)
• 1 - 3 slides of the website.
• The presentation has to be 3-4 minutes long.

Check my progress:

• The User Centred Web Design Process.
• Week By Week.