Wednesday, 13 April 2016

OUGD503 / STUDIO BRIEF 02 / WIREFRAMES

Wireframes are a way of communicating an idea before mocking them up digitally. It allows us to experiment with layout and see what works. They are also useful when presenting ideas to clients or peers to show what the general idea is first.

These are the final wireframes which we also submitted as supporting material. I drew the diagrams whilst Jack annotated. It shows how we organically developed our concept from pencil to digital and a display of teamwork:


Starting out with the article page, here is a diagram of how it will look digitally. The page is split between areas of text and widgets which can be customised as shown on the second wireframe. Whent the widget toolbar is selected, areas of blank space will open up, guiding the user on areas which they can place widgets by holding and dragging the icons. As explained on the diagram, the cards are interactive, so they can be 'flicked' to see other information without leaving the page. This is an effective element as it avoids the user having to scroll more than they have to. 


These diagrams showcase the category choosing pages. Users can swipe left or right to pass or save a category, or, if more suitable for them use the visable cross and tick to achieve the same thing. The category name will be visable, alongside a colour to represent that category. 

On the homepage, there will be the user's personalised news stories for that day, which can be previewed before they read it by dragging down or clicking the arrow. A preview allows users to see if they are interested in the story before committing to the full article; reinforcing the effortless user experience me and Jack are trying to achieve. 

There is also a wireframe of the navigation. The navigation burger bar is available to quickly access different parts of the app with ease. To make it more interesting and interactive, me and Jack came up with Telegraph's Response of the Day. This is a response picked by the Telegraph which is exceptional. Having this here on the navigation should inspire others to create excellent responses and engage with the app, as they will often be seeing this as it is on the navigation area. It also builds a relationship between the user and the Telegraph as a trusted and interactive brand.  



Wireframes of the Response feature. We thought that users may benefit from having the option to submit a response at any time by using the movable button, taking inspiration from android user's facebook chat bubbles. This gives them easy access to all three types of responses, video, audio and text. After submitting a response the user is greeted by a large tick and the options to share their response on social media to get their views and follows going up. 

The user can view their response and customise how it looks, just like an article page, by moving widgets about. This gives them the tools to create a response exactly how they want.

The profile page is a social hub for the user again customisable to let them create it exactly their way. It can show their  news feed, saved stack, follower feed, pinned response and top categories. Users can follow other members with similar interests and interact with each other. They can pin responses that interest them, similar to Twitter's pinned feature. This ensures other users will see this response. 

The next stage is to gain feedback from these wireframes and begin to translate them digitally. 

No comments:

Post a Comment