Category: Prototyping

Week 8 Log – NUTC

Log week 8

This week, we started to polish our prototype ideas and which softwares will we use to accomplish our prototype design. We decided to use Balsamiq, Invision, Photoshop, InDesign, Sketchapp and Powerpoint. We have interpreted an interactive prototype as something visual where the people themselves can follow the storyboard that we will present, compared to as if they would play a video or computer game.

For our prototype, we decided to do a scene presentation explaining how would it work from the drivers or pedestrians vision. We intend to create the signs design and to explain how would the entire process work. As we have explained on the previous logs, the prototype is a informative digital sign with a sensor, which the participant after reading a fact would respond with a thumbs up or down to then get a Twitter handle or another fact. On our presentation we hope to be able to show exactly what would be presented to the passers-by, and what their next move would be.

Our group is currently refining the final ideas and trying to get to a final key concept to present in the end of this module. We have divided the work by taking different roles, that is, maker, stitcher, writer, collector and interviewer. Although, we decided that the group will work together and be apart of any role, in order for everybody to be on the same page during the whole process. But we do keep in mind that some of us are more skilled in some of the roles, for instance Gabriela has created the latest visuals for the final presentation, while the others have been collecting information and researching facts about the benefits with cycling as a transportation mode. We have not yet decided who is going to be the interviewer during the final presentation, as well as who to invite for it (but we intend to make Ali, Mark and Julie part of this).

Next step is to continue further with the research about the sensors and how they would work for our interactive signs. We will also continue to read on the different example projects (Australia for Vote etc.) in order to be able to back up our project as well as possible during the final presentation.

These pictures below show the creative process of some of the visuals that we are planning to use for when presenting the final prototype. These were made on Balsamiq and Photoshop.

The visual part of our presentation will be composed by, besides an introduction of the project and example research, introductory scenes that shows the storyboard from different perspectives, for example Heaton Road looking from the “outside” and from a “car view”, signs, thumbs up and thumbs down, responses and a phone with the twitter hashtag #thumbsupheaton.

For the prototype completion we would need more pictures, and the final designs of the facts signs and the Twitter handle sign, in order to include the whole story board that we have created earlier. Combining the new examples and the further research with the prototype designs we believe the we would be able to start with the final presentation.

 

Week 8 Log – Greening Wingrove

Week 8 Log 

 

What is an interactive Prototype? 

Interactive prototypes aim to show how the interaction will work in practice. This is a much better way to evaluate design. Commercial prototyping software allows you to define clickable areas, transitions and events, in order to produce an interactive prototype that captures the user flow process and demonstrates interactivity, without having to write a single line of code. Basic programs such as PowerPoint and Keynote can be used to create such prototypes. You can use interactive prototypes in user tests before any code has been written. The whole point of having an interactive prototype, and prototypes in general is to ensure that the proposed design will work effectively in practice before spending money, time and effort developing code. 

Our Prototype  

This week we began to work on our prototypes for our Wingrove Community explorer application. The prototyping tools we have decided to use for this project are in a 2D digital format through the use of Microsoft PowerPoint. Our application has two primary uses for its user. The first is to easily and effectively communicate with other residents, which is achieved through the use of a contacts search bar whereby the user can message other people to organize community events and gatherings. It works the same way as your contacts on your phone. The application also includes a calendar to pin community events that are of interest to the user, which is followed by a map which shows the locations of various events organized by the Wingrove Community in the local area. In practice, the map will be interactive giving the user the ability to tap and select locations on the map that they wish to explore. Once a location has been selected the user will see a picture of the location on their screen, and from there, they will have the option to select and search for activities within that vicinity or building. This is where our idea then overlaps with the creation of an interactive form of leisure for the local community. We have done this by implementing an activity section whereby the user can take part by completing tasks designated to various locations e.g. taking a picture of a community landmark within a certain area to prove that it’s been visited, or carrying out some kind of community activity and evidencing it with a picture. Though this feature was designed with primary and secondary schoolchildren in mind, anyone can use it. The whole purpose of our application is to provide community information on the go in a compact and simplistic format, whilst giving the user ways of interacting with and contributing to the local area, or simply keeping in the loop with other residents in the area. In terms of what still needs to be done to complete the prototype, we just need to add some finishing touches that explain and display all the features we intend to include within the application, such as the treasure hunt game. Our idea is basically a social media app for the local community to increase the participation and awareness of local residents.  

 

Week 8 – Chase Park

This week we looked at prototyping and made a start on creating our own interactive prototype. An interactive prototype is something which is ‘real’ for the user to look at and use. For example, they would be able to navigate around an app clicking on buttons which then moved to a different page etc. so that it feels the functions are real.

We have decided to use PowerPoint for our prototype of our app. PowerPoint is a simple tool for creating a prototype, but it is a tool which we are most familiar with and think it will be able to perform all the necessary functions that we need on our app. We will show our prototype by getting people to go through the prototype app on the PowerPoint by simply beginning the slide show and then the user can click on the buttons, such as a ‘main menu’ button or a ‘home button’ to go back to the main menu, these will be linked with a hyperlink which will make it interactive and give it a feeling of ‘realness’ because things will happen depending on which icon or button you select. We still need to complete a few more interfaces of different pages to the app before it is complete, but below are a few pictures of what our current prototype looks like.

 

SIA Storyboard (Extra)

This one is the extra post of SIA’s storyboard blog and this is Zhaodong. This is the storyboard of the Greening Wingrove Community App and it is a little bit late to post it to the blog because of my personal issues so very sorry about that.

Basically the idea of the App is to provide a stronger connection between the community and one of our previous ideas was to make a treasure hunter game within the community and now we put the idea into the App which let it become a part of the App.  Apart from the front page the App has four basic functions: Chatting, Calendar/Activities, Local Map and ‘My Account’. On the front page you can see the local temperature and weather today as well as the news and announcements within the community. The treasure hunter game is set as the latest news here and can be clicked for mor info. and we made some analysis on it (you can open the picture attached and have a look). The chatting function is similar to the iMessage but apart them a new function is designed called ‘Moments’. You can share your own special events happen around you here and let your friends to look and make comments. Calendar/Activities function looks like the calendar on your phone but also shows the activities that will take place as well as the activities that you will attend and show you the location of the activities. For the Local Map function, the location with schemed activities will be marked and able to be clicked and you can see different activities within the area and these are related to the Calendar/Activities function. ‘My Account’ is very easy to understand: manage your personal account, make self-introduction to others, add more friends and precious pictures into your album. More infomation of the App can be seen in the picture attached within this post.

BLOG 7 – Preparing to Prototype

Leading on from last weeks extended storyboarding/sketching session, this seminar we worked on improving our location-based game idea and expanding the interface to include a map of Wingrove in which users could click on certain ‘hot spots’ and find activities or local information. We wanted to broaden the initial GPS game into something more tangible in which implementations to the local context could be made.

We began brainstorming some ideas for what could be included in the digital game/interface as we did not want to overcompensate and flood the interface with options. We narrowed in to focus on exploration activities and interactive digital inclusions such as camera options that would prompt digital probes in order to gain wider opinions on the local area and Greening Wingrove activities. We wanted to preserve the idea of having a treasure hunt feature, furthering this to think about engaging with the idea of including schools or families, to tackle the safe-guarding/ethical implications a location-based game may have.

For our initial plan, we thought about having a map as the home screen and placing pointers which the user could click on to participate in different activity options. Such as history tours or nature walks. Including options such as these it begins to broaden the location-based games into potentially becoming part of both youthful and family livelihoods, as it could be something that families want to use together to explore their area and get outside. This gives users a broadened scope of activities they could engage with whilst using the service as, although we are mainly focusing on a younger target market, the wider aim of social cohesion can only be met with a developed broadened user base. Our new refined storyboard will be uploaded in a separate blog post as we wanted to ensure it portrayed our ideas seamlessly.

Our idea of location and mapping is key in driving our aim of social cohesion, nationwide there is a lack of children playing outside, we feel that by having this game/app which enforces people to go outside and explore, with the win-win potential of gaining free or discounted activity incentives, it is responding to and tackling this urban issue on a local level. Organisations such as Playing Out address this, by attempting to ‘activate street play in neighbourhoods’.

In response to the digital interface’s unique aspects, the app is a personalised social media space for the residents of Wingrove, from our user research we found out that the Facebook pages are scattered and become very inactive shortly after starting up. Bringing all these pages together into one system would refine the area’s digital platform voice and provide a space for local events to be promoted and spoken about.

 

Moving forward, we would still like to begin to prototype the locational game based idea, focusing on the youth of the area as that group was at the forefront from the opinions of the participants of our user research. Our demo activity for the prototype may simply be a piece of paper with instructions, questions and locations on and then using google maps to travel around the map to complete the treasure hunt quest, or using development software to create and interactive prototype.

In terms of promoting and gaining further user research from our prototype, a youth workshop would have to take place, perhaps linking in with the primary schools or the Nuns Moor centre.

Our next steps are, to further develop and refine the technicalities of: 1) user narrative, 2) the information architecture and data of the interface and 3) initial design views of the interface. We want the product to be focused on the map idea, therefore having the design be centred around the map of Wingrove.

Week 7 Log -NUTC

Log week 7

Sketch and Explanation of Prototype

This week, we began to prototype our design. From our storyboard we decided to visualize the interactive screens. The plan is to place them on traffic lights so that both pedestrians and car-users will be able to get involved with this project. Our prototype illustrates how a participant approaches one of a number of signs, that will be placed along Heaton Road. As mentioned in last week’s log the signs will display facts or tweets advocating cycling as a mode of transportation. The participant would then make a thumbs up or down, depending whether the participant likes the text that is being shown on the sign or not. Sensors on the sign would then register the thumbs up or down through Infrared & Motion Sensors and then, depending on whether the participant responses with a thumbs up or down, will lead to the #thumbsupheaton hashtag or a different cycle fact.

Extended research

This week we also looked further into research relating to our project. We wanted to find some examples that we could directly get information from. We looked into the Australian vote with your feet project, which helped us to think more about the type of interaction with the public we will have. We have found many different projects that use the same type of sensory technology although not as many that focus on the thumbs approach.

https://www.dezeen.com/2015/06/02/google-project-soli-interaction-sensor-radar-hand-gestures-digital-control-electronic-devices/

This example uses hand gestures to control electronic devices, we partially can take inspiration from this as we need to the hand gestures to be able to read and control our signposts.

Cycle facts

These are some of the facts we plan to use on our sign posts:

Environment

Traffic congestion

Health

Economy

  • The average cost to drive a car in the UK is £3500 a year, a bike can be as little as £100

Safety

What we will use to prototype our sign-posts

  • Pen and paper – early stages
  • Research & findings
  • Inspiration from previously created websites e.g.
  • Potentially we will use Balsamiq
  • Slideshow
  • Motion and infrared sensor technology

Next week’s aims

  • To carry on with our prototyping ideas and to hopefully begin to give roles within the group for prototyping so our tasks are all organised
  • For our storyboarding to all be completed
  • To have clear target users
  • To get our drawings into one big concept which will be our final digital concept

Blog 8 — North Tyneside

Reflecting on our design going into the the prototyping stages, it is evident that we may have overestimated how technical we could make our website. Originally we were looking at having an interactive game where you can scroll around the North Tyneside area and play along with in game challenges – it is now clear that we will not be able to design and create such a complex website. From this we have learned that design isn’t just a good idea, but also being able to fulfil. Now we are focusing on keeping the core principles of our design but making it more feasible and less design heavy. By doing this we should be able to have a sharper end product with less hiccups which should in turn create a better output for the end user. One thing that we have decided to stick with however is the website, as we can link it through the school as previously stated. We believe that this gives us the best approach to creating the most convenient and suitable channel to reach the young people and build a clear point of reference for where our digital prototype may sit. For us as a group digital civics has allowed us to from a new mindset in terms of planning and how we can use platforms to make a change on a more modern level that engages with a younger generation – something that is currently fundamental as we see a lack in interest from younger people with regards to their community. In addition digital civics has given us an opportunity to engage with stakeholders which is something new to all of us, and has therefore given us a new insight into something that we will come across in our planning careers. If were were to have had more time during the process of our project I think it would’ve been very beneficial to meet up with the stakeholders on a more frequent basis. Although this may be difficult, we believe that this would have provided a larger insight into what exactly our stakeholders want and in turn improve our final design. Finally another possibility with additional time would’ve been a more complex final output, and even though we still have time to do this, with an additional few weeks (like anything) we could’ve provided something that perhaps tackled more environmental problems within the Tyneside areas.

Week 7 – Prototype Planning

The practical prototyping activity that took place during the lecture this week was helpful with the further development of our own prototyping. Being able to create a basic prototype such as making a pair of glasses out of paper, allowed us to see that prototyping really doesn’t have to be a perfect example of the final product that is produced. As long as the prototype demonstrates to the client how it will work and gives them an alternative means of understanding of the proposed product, as an alternative to a basic explanation in words. From this, we felt more confident in beginning the prototyping for our product. We were now aware that if we could get an outlined product we would be okay, even if it possibly wasn’t perfect by the time it came to the initial review of the prototype with the client. So, this gave us confidence in moving forward.

Therefore, in terms of our project this week we have been using Marvel, an online prototyping tool. However, we realised that we were better off drawing out how our product would work on paper as a large step by step flow diagram, before going on to creating it using the online software. This is because we began to put our ideas onto Marvel first, but this proved difficult to do without a proper plan on paper. Creating a storyboard was very helpful in coming up with the concept for our game because it gave us more of an idea as to what the game would consist of. Also mapping out how the prototype would work on paper was similar to the storyboard we created but the storyboard didn’t include the added pages we would need to include within the prototype. This is especially important  when it comes to the questions asked in the game that have multiple choice answers which will make the user go back to select an alternative answer if they choose a wrong answer to begin with. Therefore we need to create copies of certain pages with minor alterations for the different possible variations of the ways in which a user could select their choice of answer, when it comes to the multiple choice questions.

Ultimately, we want to aim for our product to be of a medium to high fidelity and our main goal is for the client to use the prototype for exploration. However when creating the prototype for initial user testing we can afford to keep some aspects of the game to a lower fidelity such as the map showing where you can fill up your water bottle, as we wont have the time nor expertise to input a move-able map such as that of the level of Google Maps. Yet there are aspects of the prototype that we can produce with a higher fidelity i.e. no matter which answer the user chooses during the multiple choice questions, they will be able to go back to have another go at choosing another answer, with the first ‘wrong’ answer they chose having disappeared seamlessly so that they eventually get to the correct answer to move onto the next stage of the game. By creating the more fundamental aspects of the game to a higher fidelity, this will let the client pick up on more of the other things that could be improved without worrying about the mechanics of the game itself, they can focus on more of the content and visual aspects of the game.

Therefore, when it comes to the client testing the initial prototype, we can make note of what they like, dislike and if there are any improvements they suggest we make to the prototype. Whilst our intentions are that the prototype will look very similar to the final product, we don’t know that the visual imagery of the game will be up to the standard of the final product. This is because the process of creating our product on Marvel can’t be predicted as it could take a longer or shorter period of time than we expect it to. Therefore, the initial prototype that we will use for our user testing with the client may not look identical to what we hope the final product will look like. The purpose of prototyping our product is see how the client uses it and whether it actually works as it should. It is an experimental stage in development as we are testing out a number of different ways in which the product will work and look, to end up with the best product possible for the client to test at this stage. Our intention is to gain a valuable insight into the possible improvements we could make to develop the prototype further from the client during user testing. Furthermore, we don’t believe that our prototype will be at the stage that it’ll be testing for technical issues as it will not be in the format of an actual website. We believe this will be the most beneficial step, as when we present our prototype to the client, the product will still be used through Marvel.

8) TRECC: Prototyping detailed

Blog 8- Prototyping detailed

Level of fidelity
It is fair to say that our product has a middle to high level of fidelity. It is relatively high as we have refined our design, layout and pathways to make sure the app can run smoothly during prototype demonstration. Even though we started off with low fidelity, we quickly realized that it would be ideal for a higher level of fidelity to make the prototyping as realistic as possible, but also to ease the processes and tasks of prototype demonstration. Therefore we increased the level of fidelity , but not to the point of programming the product.

 

Design
The visual style of the prototype is essential in the prototyping as it becomes a tool for enchancing readability and communication. We have decided to use a Green theme combined with neutral blacks and whites, and the font roboto for the design. By limiting the color choices, we also simplify the design. Our icons and buttons are made to be as universal as possible. They all reoccur in the same format to simplify the navigation and communicate familiarity.

Pathways
As our main goal is to increase community engagement in the society, one the most important feature of this platform was the comment section. This became one of the pathways to test the user on, in the form of a task, where they had to post a comment about a development. The other important pathway is the designer’s pathway to editing and interact with the project.

 

Goals for the prototyping demonstration
 Our main goal for the prototyping demonstration is to gain an insight into the interaction between product and user. We want to understand the products use in a context and see what areas the product lacks in. Our goals will therefore be: -To see the pathway to finding or completing our tasks such as commenting and checking their  engagement level.
-To understand the main weaknesses of the product
-To understand the readability of the product and the challenges of navigating through the app.

 

Prototype demonstration and User testing
We have generated a list of interview questions as well as a sheet for user testing. The sheet for user testing will largely focus on the pathways and tasks, while the set of interview questions are more for the overall feedback.

6) North Tyneside Youth Council (week 6 blog)

DISCUSS AND DESCRIBE WHAT USERS CAN DO WITHYOUR PROTOTYPE

Users will be able to engage actively with a game component of a website. It will include improving the environmental problems in North Tyneside throughout the game. The player can only achieve this by answering the correct questions that either directly relate to North Tyne side or globally. The website will also have areas such a blog space. Where people can post thoughts about the community and areas of concern. These will be viewed by the youth council and can become a platform for many people to post thoughts. Additionally, there would be are of the website that includes all upcoming community events that engage the youth directly such as clean ups in the area including time, location etc.

Our main goal is to create a digital method that is educational and will create long term change in North Tyneside. With particular emphasis on schools and the learning program as the students are the next generation and have a platform to create change.

Long term goals can also include the possibility for the website to cover other issues potential planning and developments in the area that the council wants feedback on.

CONSIDER HOWYOU WILL CREATEYOUR PROTOTYPE

  • Marvel
  • Indesign/photoshop
  • Invision