Coding BootcampPrototyping & Product Management

Hussam Mohsineh

Outline

- Finding Great Ideas

- Defining the MVP

- User stories & Personas

- Tech stacks and PWA

- Creating wireframes

- Atomic Design Principles

- Building a functional prototype

- Managing Software Development Projects

Great things startwith an idea

Tell us your team idea in less than 1 mins

What users decide to do ..

Some ideas are bad

1. Reflect on yourself

2. Look outwards

3. Find a market

“scary outfit.” There’s a spike in search popularity every year around October—i.e., Halloween.

4. Listen to feedback

Your skills + real passion

+ real problem + market

= great business idea

What’s an MVP?

The Minimum Viable Product (MVP) is the first shippable version, containing core feature to test release and generate useful feedback. The MVP is used to prove the most essential hypothesis and satisfy early adopters.

Main benefits:

- Test a product hypothesis with minimal resources

- Get the product to early customers as soon as possible

- Accelerate learning and the feedback loop process

- Reduce wasted engineering hours

- Base for other products

- Present it to investors and stakeholders to secure funding

Jobs to be Done

Jobs to be Done

Defining Personas

User stories

As a (User), I want a (feature) so that I can (satisfy a need)

As a (User), I want to (search available homes) so that I can

(move near x : work/jbr)

Example: Property Finder

User stories

Practice2 personas for your project (minimum)

10 user stories for each persona

Detailed Example of Persona

User journey example

Prior to MVP

- Find a primary value proposition for a single type of audience

- Review, again and again the value proposition (what are you offering)

- If you’re not solving a REAL problem, then find one!

- Viable doesn’t always mean valuable

Evaluate

The Product Market fit

Lean startup thinking

After all, this might be your MVP!

The Product Market fit

Choosing the right tech

Mobile apps

Mobile apps

● Native Mobile Applications (Swift, Java, Kotlin .. )

● Hybrid Mobile Applications (Dart, React Native ..)

● Web-based Mobile Applications (WebApps)

Progressive Web Apps (PWA)

If keep it simple PWA is ordinary site with 3 additional features:

responsive design - site should look well on all devices

manifest.json - site must have general description about itself stored in manifest.json

caching - site must work offline

PWA use service workers to provide some functionality offline

Wireframing and Prototyping

Wireframing and Prototyping

Wireframe (UX) - sketch of each page/screen in an app or website. It can be done on something like a poster board.

Prototyping (UI/UX)- Workable dummy output. Prototyping is where you can get to present your idea and it’s workflow.

Tools:

Ninjamock (ninjamock.com)

Balsamiq (webdemo.balsamiq.com)

Sketch (sketchapp.com)

Figma (figma.com)

InVision (invisionapp.com)

Marvel App (marvelapp.com)

Wireframing and Prototyping

Wireframing and Prototyping

Paper Prototyping

Paper Prototyping

Inspiration Boards

atomic design

Project screens

ElementProperties

UI Elements

Storyboard example

Exercise

• Go to “ninjamock.com”

• Create a free new account

• Create a new project (select web/mobile)

• Create the flow based on the earlier user journey you did

• Add all relevant UI Elements

• Setup linking between pages once a button is clicked

Example

Example

Exercise

• Go to Sketchapp.com or figma.com

• Setup your account & project space

• Create new artboards

• Add UI Elements

Collaboration on invisionapp

Export Sketch to HTML

Old Approach

The Lean Startups

Managing Software Development

Managing Software Development

In the SCRUM methodology, a Sprint is the basic unit of development. Each Sprint starts with a planning meeting, where the tasks for the sprint are identified and an estimated commitment for the sprint goal is made. A Sprint ends with a review or retrospective meeting where the progress is reviewed and lessons for the next sprint are identified. During each Sprint, the team creates finished portions of a Product.

In the Agile methods each iteration involves a team working through a full software development cycle, including planning, requirements analysis, design, coding, unit testing, and acceptance testing when a working product is demonstrated to stakeholders.

if in a SCRUM Sprint you perform all the development phases (from requirement analysis to acceptance testing), then SCRUM Sprints correspond to AGILE Iterations.

Managing Software Development

https://trello.com/b/h1PduuYW/scrum-board

http://trello.com/inspiration

Homework

- Wireframe and Prototype your project idea- Submit the Prototype before next Saturday

- Explore available plugins that can make life easy :- https://animaapp.github.io/docs/v1/launchpad- https://medium.com/sketch-app-sources/how-to-create-a-

responsive-landing-page-with-sketch-af8c8785ae0b - https://medium.com/sketch-app-sources/how-to-export-sk

etch-to-html-65c427b3aa3a

Using Version Control with sketch

Generate pretty diffs so that everybody knows what are the changes

https://github.com/mathieudutour/git-sketch-plugin