Coding Bootcamp€¦ · The Minimum Viable Product (MVP) is the first shippable version, containing...
Transcript of Coding Bootcamp€¦ · The Minimum Viable Product (MVP) is the first shippable version, containing...
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