prototype 5

Deliverable 1: Wireframe your functional prototype (MVP)

Purpose: begin to develop a functional prototype of your ideas

Due: see Learnline

brief

Plan and begin to develop your digital product prototype · Create a home page and the beginnings of your interaction flows for your digital product and make it accessible on appropriate devices. · Ensure all team members share the same understandings of your product concept through the creation of three documents: Product canvas, proto-personas, and a context analysis.

The goal of the first deliverable is to make sure you understand the product concept, product users & context of use and basic technologies testing your program on an actual device and planning for the coming weeks.

mission: plan and begin to implement the development of your functional prototype

This is a team task. Team roles need to be clearly articulated in the implementation plan. NOTE: The plan developed this week will be used until the end of semester. (see example plan in assessment overview in Learnline) You can make your plan as flexible as needed

assignment

This assessment has 3 parts and requires considerable teamwork and organisation. The project coordinator for this week is responsible for managing all activities:

Part 1: develop the product canvas including proto-personas and the mobile context analysis (see details p.2)

Part 2: create a project implementation plan (see details p.4)

Part 3: begin coding a functional prototype MVP (see details p.5)

Steps to complete each part are outlined on the following pages

technologies

You are encouraged to use online and cloud technologies if you haven’t already begun:

PROJECT MANAGEMENT Implementation plans should be created in google sheets or a similar arrangement so that all members can collaborate. Other documentation can also be kept in a shared cloud (eg Product concept) document space.

You may want to trial ClickUp.com ( https://clickup.com/ ) to manage your work – check the free license terms.

PROTOTYPING

OPTION 1: You can build your prototype using HTML5 CSS3 and Javascript (Libraries and/or frameworks)

OPTION 2: You can use online prototyping tools -CHECK HOW LONG THE FREE VERSION IS AVAILABLE.

https://proto.io/

https://www.invisionapp.com/

https://marvelapp.com/

https://www.adobe.com/au/products/xd/prototyping-tool.html

OTHER Online diagramming and prototyping tools can also be used:

http://creately.com/ : collaborative diagramming

http://foundation.zurb.com/sites.html : online prototyping tool

http://www.goodbarber.com/ : online app building tool (30 day free trial)

If you find others – let me know

submit via Discussion board – TBA Week 7 @ Midnight

This assignment will be submitted as a team. The project co-ordinator is responsible for submission.

One document is required for submission:

Document 1 should include:

· Part 1Product Canvas, Proto-personas & mobile context analysis

· Part 2 Implementation Plan: a link with access details for your Google spreadsheet or other documentation.

· Part 3: Functional Prototype: a URL link to your functional prototype and a site map of your App

in the workshop (F2F or Online)

Your group should be prepared to give a 1 minute high level presentation of your product concept including the sitemap/interaction flows and how this relates to work structures in your implementation plan.

PART 1: Develop your product canvas

Step 1: Decide the product you are going to construct

Decide on the prototype your team is going to explore further

· Review the data analysis received from the Heuristic Evaluations of your paper prototypes. Your product could be one of the three or more ideas tested in your paper prototypes or a combination of all your ideas.

· Think about what worked, and how to improve what didn't (if necessary) in your paper prototypes.

· Review the high level need the team developed.

· Ask yourself - does this solution already exist – how is our idea different to what’s already available? (see Step2)

· Take the time you need for the whole team to get on board. This is what you will be working on for the rest of the semester, so make sure you are all invested in it.

· Develop a name for the product concept

Step 2: Feasibility –does this concept already exist?

Now it’s time consider the feasibility of your ideas. There is no point wasting your time on a product that is already available and better than yours.

· Not all products out there are perfect.

· Your product may be an improvement or amalgamation of existing ideas (that was what the IPhone was).

· As a group, provide evidence to show how your product is not ‘reinventing the wheel’

· Show & explain how all members were involved in this process

Step 3: Product Canvas, Users & Context – detail the product concept

1. Define the product concept & context:

· Complete the Mobile Context Analysis, answer all questions as a team

· Provide a name for your mobile product

· Outline the context in which it will be used and how this relates to the project briefs.

· Relate your concept back to your need finding research. Ensure you specifically nominate the need being addressed .

1. Identify the target user group for this product.

· Review the audience information you identified in the Mobile Context Analysis above for

· Use this information and the questions listed below to define the main target groups for your product

· Using this information create at least 3 proto-personas (these can be hand drawn – see example below)

Audience	Interests Motivations	Technical Considerations
Gender: male/ female? Age: How old are they? Location: Where do they live? Family: Do they have children? Are they married? Occupation: What do they do? Context: Where are they when they use the app? How does your idea resonate with your audience on an emotional level? Do you need to break your target up into niches?	Do they love a competitive app? Why? What do they have in common? Why are they interested in the topic? Who are they trying to impress? Who impresses them? What are their biggest fears? What are their biggest hopes? What drives my target to make decisions?	What digital technologies do they use most every day? What digital technologies do they not use ever? Access: can they afford my app? Can I reach them with my app? Are they accessible? Are there enough people in your target to be profitable?

3. Explain how the heuristic evaluation feedback was used (or not) in your decision making.

· Outline a list of changes you have made to your paper prototype as a result of your decision-making processes and HE feedback.

4. Complete the Product Canvas using the evidence from pracs, and feedback to date.

· Show/include evidence of your searching and group processes.

Sample proto personas

Source: http://blog.mural.co/2016/05/06/boost-empathy-quickly-with-proto-personas

Source: http://www.startupequation.com/building-proto-personas/

PART 2: Implementation Plan

Step 1: Use your project management skills

· Create a detailed and comprehensive implementation plan for how your interactive prototype development

· The implementation plan will guide your work for the next 7 weeks (from week 7, break, 8 – 12).

Step 2: Include

· All components of your prototype [interaction flows] and who will co-ordinate each part.

· View a component as a programming chunk that has a person responsible for it and a deadline for when it should be done.

· The ‘chunks’ should be something concrete enough to assess if it has been completed. eg "Set up database" is NOT concrete. "Query database for train times and successfully display on results page" is. Detail is very important in the plan.

· Thoughtfully structured deadlines-- don't have everything due Sunday night every week

· All project deliverables over the next 6 weeks should be included in this plan – use the Assessment overview page

· Include other team commitments (assessments in other units; work times etc) to keep the plan grounded in your reality!

Step 3: Documentation & sharing

· Use a Google sheet (or similar where the plan can be shared) for your implementation plan.

· Adapt the template provided for your team plan.

· Your implementation plan should clearly show:

· what needs to be done,

· who is doing it, and

· when it will be done.

· when its complete

· Be sure to plan so that the prototype is complete in time for user testing. This is in week 10.

PART 3: Coding: creating a wireframe prototype - MVP

Step 1: Home Screen & landing pages

Create a home screen and add links that lead to the major screens.

· It's okay if the screens are placeholders.

· The goal is to get a navigational skeleton up that you can flesh out later.

· This is a minimal requirement for the programming part of the assignment. You are encouraged to go beyond if time constraints permit.

Step 2 Server Space

Where will your prototype be hosted? Spinetail? Or Github?

Project coordinator needs to let me know by COB week 6 if server space if required

Step 3 Product structure

Create a structure for your product that shows the various parts you intend to build.

· This should be included with your team documents and submitted as part of the documentation.

· This can be as detailed as you want and show not only interfaces but also who is doing what.

· This diagram should be consistent with your plan and product concept

· This should match the summary in your Product Canvas

Step 4 Code choices

You should build your app using JavaScript, HTML, CSS (and PHP if needed). There are three reasons for this:

· These are the technologies taught in this unit prerequisites, and it is assumed that all your team can help code

· This approach is easier, come test time. Later in the semester, you will need to test your app with real users. Trying to deploy a native app to different people is a real pain.

· It's easier to revise or deploy a web app rather than a native app.

For students with limited coding skills: discuss options with the lecturer. There are a range of prototyping programs now available with free versions that can be used (see p 1) .