Wednesday, 22 March 2017

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:


Monday, 20 March 2017

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, 14 March 2017

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, 10 March 2017

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, 7 March 2017

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, 3 March 2017

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.

Wednesday, 1 March 2017

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