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.

Week 9, NUDC: Preparing for prototype demonstration

Hello again,

This week we met with our client Tony, who reached out to us wanting an update on the project. We caught him up on our progress and gave him a rundown of our prototype, which was not completely ready for testing. He was very understanding of this and we felt like his input will help us improve our prototype even more for our next round of user testing with Ali, Ed and Sean. We would be testing their interaction with the user interface and ease of use, we’d only require devices such as an Ipad, a stable internet connection and a means of collecting data. One of the more important feedback inputs we got from Tony was that we should ask the user of our product to identify their age range and preferred mode of transport, this is because age and transportation will influence their responses.

We recorded notes on where Tony struggled to progress through our rough invision prototype and identified flaws with macro links. In addition, Tony didn’t properly read the text meaning he was unaware of the reward stickers and the progress bar, vital to incentivising our target audience. Henceforth, we plan to develop the design making the reward more obvious and include other improvements that attribute to the ease of use, such as zooming into the map so the user can see the proposed changes more clearly. We also discuss about implementing pop-up tips to make it clearer for our user. Our colour palette was very tertiary at first but we added bold pinks and blues to make the content more appealing and easier to read. Our ideal participants would be the younger demographic but are not exclusive to them, however it would be heavily influenced on the locations we would propose.

We also plan on asking Ali what the long term use of our project could be and if/how it may benefit them, if there is something we could include. We’ve decided to allocate ourselves roles where we’d split up into teams of two, one would interact with either Ali or Ed and the other record their progress. We also plan on conducting our prototype demos indoors in order to avoid any disruptions such as noise or bad weather. We plan on not providing them much help unless needed, and not give away too much information immediately as they wouldn’t be using it blind as our audience would.

9) We Love Bikes : Preparation for the user tests

At the moment we are writing this blog post, we still working on our prototype which will be completed by the end of the week. As we said before, we have chosen the Marvelapp website as a platform to build our prototype.

Meanwhile, we sent invitations to two of our stakeholders, Heather and Mark, to do the prototype demonstrations with them. We’ve agreed that these testings will take place on two different days, one day with Mark and another day with Heather, as our availabilities are not always compatible, and also that our group will be split for each interview as we don’t need to be all there, too many people can also make it difficult to conduct user interviews as the end user may feel uncomfortable if there are too many of us there. We think that the user will feel much more confident in this way, and it’s important to build a relationship of trust between us and the stakeholder.

So on Monday 4th December, Jordy and Isaac will have a meeting with Mark, and on Tuesday 5th December, Ellen and Aymeric will do the same with Heather. We still need to fix the time for each interview, knowing that we only can after 5 p.m on monday and after 3 p.m on tuesday.

Mark’s interview will surely be held in his office, just as we did when we first spoke to him, but the location of Heather’s prototype demonstration is still unknown. We don’t want to do the same mistake as go into a coffee shop to ask her some questions, as we did the first time we met her, because there were too much people and to much noise. So we are thinking on asking her to go at the university instead.  

The user interviews should help us to understand how well our designs perform in practice, the accessibility to the end user, and to get some fresh point of view about our project. This is very important for the end goal of our project as it needs to be easily useable. We also hope to answer the question of how effective our prototype is at displaying the accountability of the council when working on cycling projects. We will ask at the end of the interviews if the interviewee has any overall issues with the design and how we could correct them.

At the end of this process the two separate groups will come back together and discuss the feedback from the meetings. Using this information we would then address the major issues, which would most likely be the issues raised by both of the interviewees and add or remove these features to the design and correct them.

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

7) TRECC: prototyping.

This week we learnt the importance of prototyping, and the implications it has on our own project (DigiVox). It was interesting to learn and consider that a ‘prototype is a manifestation of a design that allows stakeholders to interact with it and to explore its suitability’. This manifestation has directed our design focus, a goal to create an efficient mobile application to improve community outreach between developers and residents and ultimately, our client’s needs.

Considering our story board, the area we want to prototype is the use of the app. With this in mind, our group has worked on designing and creating are first prototype this week. It was clear the process of a user using the app interface is the most important part of the storyboard to prototype because it is a radical innovation that has not been done before, so testing will be integral to meeting our goal. By doing this we can refine the application, and hopefully developing an ideal way to tackle community outreach between developers and the community.

Moreover, from this week’s lecture it was interesting to understand the broad scope to prototyping, especially with our own prototyping getting underway. With relevance to our own project, it was clear that our prototype has a fairly high level of fidelity. We knew early on that a mobile app was the way to answer our client’s needs, so after a only small amount of research by using other mobile apps, and a few sketches we were ready to create a digital version. By using MarvelApp to formulate our application we have been able to get as close to a final product as possible. This means we can test how easy the final interface is to use. The advantage to this is that we have the opportunity to get our stakeholders involved, and gain valuable feedback.

First use of MarvelApp

Sign Up page

Refined and Detailed version of our prototype (1)

Refined and Detailed version of our prototype (2)

The first use of MarvelApp was to get an understand to how the software works and ultimately organising the basics of our app.  We then added more detail in aesthetics and in the functionality of the app. By doing this there is more and more tweaking done to hopefully make the final product.

8) We love Bikes Prototyping and its challenges

Lecture​ ​8​ ​about​ ​prototyping​ ​was​ ​quite​ ​helpful​ ​because​ ​we​ ​saw​ ​why​ ​we​ ​need​ ​to​ ​do​ ​a prototype​ ​of​ ​our​ ​project​ ​and​ ​what​ ​different​ ​ways​ ​we​ ​could​ ​do​ ​it. Indeed,​ ​this​ ​activity​ ​must​ ​be​ ​taken​ ​seriously​ ​as,​ ​first,​ ​it​ ​allows​ ​us​ ​to​ ​see​ ​if​ ​this​ ​project can​ ​easily​ ​work​ ​when​ ​we​ ​trying​ ​to​ ​put​ ​it​ ​in​ ​a​ ​prototype​ ​and​ ​therefore​ ​meets​ ​our desired​ ​objectives​ ​for​ ​our​ ​project.​ ​Secondly,​ ​it​ ​is​ ​an​ ​interactive​ ​way​ ​to​ ​show​ ​how​ ​far we​ ​are​ ​in​ ​our​ ​work​ ​to​ ​our​ ​stakeholders​ ​and​ ​let​ ​them​ ​have​ ​their​ ​own​ ​point​ ​of​ ​view​ ​on the​ ​suitability​ ​of​ ​it.​ ​This​ ​interaction​ ​also​ ​is​ ​a​ ​test​ ​of​ ​our​ ​overall​ ​design​ ​of​ ​our​ ​prototype to​ ​see​ ​how​ ​easy​ ​it​ ​is​ ​for​ ​our​ ​stakeholders​ ​to​ ​use.​ ​This​ ​use​ ​test​ ​is​ ​important​ ​as​ ​before releasing​ ​the​ ​final​ ​version​ ​we​ ​want​ ​to​ ​be​ ​sure​ ​that​ ​the​ ​design​ ​is​ ​easy​ ​to​ ​navigate​ ​and not​ ​confusing​ ​for​ ​the​ ​end​ ​user.

Then,​ ​this​ ​session​ ​put​ ​the​ ​light​ ​on​ ​the​ ​concept​ ​of​ ​the​ ​prototype’s​ ​fidelity​ ​and​ ​more precisely​ ​the​ ​difference​ ​between​ ​the​ ​low​ ​fidelity​ ​and​ ​the​ ​high​ ​fidelity.​ ​Our​ ​focus​ ​on the​ ​high​ ​fidelity​ ​application​ ​is​ ​the​ ​progress​ ​bar​ ​which​ ​will​ ​show​ ​the​ ​accountability​ ​of the​ ​forum/council/webpage​ ​and​ ​it​ ​will​ ​be​ ​easy​ ​for​ ​the​ ​user​ ​to​ ​see​ ​at​ ​what​ ​stage​ ​of​ ​the progress​ ​the​ ​issue​ ​is​ ​at.​ ​To​ ​make​ ​it​ ​easier​ ​for​ ​the​ ​user​ ​to​ ​understand​ ​the​ ​different parts​ ​of​ ​the​ ​progress​ ​there​ ​will​ ​be​ ​different​ ​pages​ ​explaining​ ​the​ ​steps​ ​and​ ​allowing users​ ​to​ ​comment​ ​on​ ​each​ ​separate​ ​step​ ​to​ ​increase​ ​levels​ ​of​ ​accountability. Information​ ​that​ ​the​ ​council/forum​ ​can​ ​add​ ​to​ ​the​ ​different​ ​steps​ ​of​ ​the​ ​process​ ​and the​ ​users​ ​will​ ​also​ ​be​ ​able​ ​to​ ​add​ ​and​ ​read​ ​comments​ ​regarding​ ​the​ ​issue​ ​and​ ​the process.

In​ ​our​ ​opinion​ ​the​ ​hardest​ ​part​ ​to​ ​overcome​ ​during​ ​the​ ​prototyping​ ​stage​ ​will​ ​be creating​ ​an​ ​interactive​ ​and​ ​interesting​ ​way​ ​to​ ​show​ ​off​ ​the​ ​different​ ​reported​ ​issues and​ ​their​ ​progress.​ ​The​ ​most​ ​challenging​ ​part​ ​of​ ​this​ ​is​ ​designing​ ​the​ ​prototype​ ​to display​ ​all​ ​this​ ​information​ ​and​ ​the​ ​accountability​ ​of​ ​the​ ​council​ ​whilst​ ​still​ ​being​ ​easy for​ ​the​ ​end​ ​user​ ​to​ ​understand.​ ​We​ ​are​ ​attempting​ ​to​ ​overcome​ ​this​ ​challenge​ ​by​ ​not overloading​ ​the​ ​user​ ​with​ ​information​ ​they​ ​would​ ​have​ ​to​ ​click​ ​on​ ​a​ ​pin​ ​to​ ​reveal​ ​its information​ ​to​ ​avoid​ ​the​ ​screen​ ​from​ ​appearing​ ​cluttered.​ ​We​ ​will​ ​also​ ​use​ ​a​ ​colour scheme​ ​on​ ​the​ ​pins​ ​to​ ​illustrate​ ​the​ ​different​ ​stages​ ​of​ ​each​ ​project​ ​in​ ​a​ ​simplistic approach,​ ​with​ ​green​ ​showing​ ​the​ ​project​ ​being​ ​completed,​ ​orange​ ​illustrates​ ​the project​ ​is​ ​in​ ​progress​ ​and​ ​red​ ​means​ ​the​ ​projected​ ​hasn’t​ ​yet​ ​been​ ​started.

7) We Love Bikes : Prototype activities and setting goals

With our last step of the storyboard, we wanted to show how easy it will be for everyone to give their opinion or to raise issues about cycling through the project we are working on. For the prototype demonstrations, we will try to achieve the same goal and make it as simple as possible to use the interactive map or to log in as a member of the forum in order to comment on each individual step of the process.

In order to test this prototype we are going to send invites to two of our stakeholders, Heather Evans and Mark Nelson. During the initial interview of Heather she seemed to be reluctant about bringing new technologies into the forum and didn’t want any changes, so this prototyping session could be a good way to try to change her mind with something easy to understand whilst also being respectful to her role in the forum.

Our stakeholders will be led through our platform and will be shown how we have structured in the minute of the forum and other interactive features. The Prototype will be a replica of our website that contains all the areas we plan to have on our final product. the user will be able to navigate these as they would a website. our first steps will be to design the first page where the idea behind our website is explained and also a section which contains the information on how to use the site to help the user navigate the site.

After that we arrive on the main page where the interactive map will be situated  in the center with all pins representing the issues marked, there will be a menu at its left and a “login section” in the top right corner, just like the picture below:

Through this main page we can access all the features so we will be able to clearly show  our stakeholders how to easily navigate the site including; creating a profile, how to access the notes and minutes of meetings and how to raise an issue on the map. the main section of our website will be the progress bar which show how the council is dealing with this problem and shows feedback from the users from the site, when the issue is resolved there will be a section where people can give their feedback on how the process went and an opportunity to add constructive criticism to the council

To build a convincing prototype, we are thinking about using the website Marvelapp. This tool is quite helpful for anyone who wants to create a “demo” of his project from pictures, draws or sketches. In this way, we can put together all we did as an interactive process and create a convincing prototype for our issues.

Week 7, NUDC: Prototype Planning

Hello again,

This week we started planning out our prototype. We aim to have a somewhat high fidelity design which should be able to be used in an interactive way, for this we plan on using the online tool ‘Invision’. We’ve reached out to our stakeholders and booked a meeting with them so they will have the opportunity to test our design first hand. We hope to discover if our design has an easy to understand and simple to use interface, is enticing and time efficient, relates information about the Streets for People program and the planned changes in a useful way and, lastly, collects feedback appropriately.

To do this we need to create pictures, or so called slides, depicting how the interface should look like. For example we need a welcome screen, a map over Jesmond showing where the locations are, a location slide with information and ways of feedback, a slide showing previous comments, and an ending slide providing the sticker. All of these will then be uploaded into Invision where they will be linked together so as the user could use it in an interactive way.

For our user testing we will divide the stakeholders to try out the prototype on individual screens, with each one of us as a personal guide assisting/monitoring their progress. We will after this ask some prepared questions one on one before joining together for a group discussion about the prototype and design. Hopefully they will give us an unique insight of how the design is perceived by a user.

6) TRECC- Storyboarding and Prototyping

Storyboarding and Prototype (1)

After the sketching stage, we created storyboards to illustrate the uses of our products in given contexts. We chose the digital intervention to come in the form of an app, available on the phone. This is because we want to create something new, that is easily accessible, with little effort.

Our concept focuses on encouraging engagement, which is why we choose features that simplify the process of engaging. QR codes will be a feature of the promotion, paired with advertisement and promotion.

As mentioned earlier, our target group is those who already have some interest, but who find the meeting times inconvenient, or find the current processes difficult/unsuitable. With that in mind, we focus on the feeling of uncertainty and hopefully turning it into action.

The promotion stage is therefore very important and one of the main ways to reach the audience will be through the City council. We hope they can promote our app on their webpage and incorporate It as a part of something bigger. From the Interview with Sheila, we have also noticed that community engagement is effective when promoted at community events.
So in addition to the councils website, we will promote It physically (flyers and posters) on notice boards and around the neighbourhood, promote it at events and have them on bus stops in the areas.

DigiVox- a platform for the community to engage with projects.
the storyboard illustrates how the user interacts with the app for the first time. It is a potential situation where the residents are waiting for the bus and will see the advertisement for the DigiVox APP. The QR code can be easily scanned by a smartphone which will then take you to the projects.

 

Prototyping part 1
So we decided to use Marvelapp for prototyping our app. It seems fairly straight-forward, and do not require specific skills in Adobe or programming.

We have assigned different roles:
Stitcher- Thomas (others can help)- keeping overview and piece together the
interfaces

Designers- Cindy (graphical components + Layouts)
Rory (Asset collector + Layout)
Ellie (text and communication + Layouts)

Writers- Cara (product assessment, description)