MVPWorkshop_CodeCamp 2023

2. Training Workshop
How to Design a Minimum Viable Product

3. Designing your
mobile
screens with
Figma
1
MVP
Toolkit
Designing your
mobile
screens with
Figma
2
Designing your
app
Designing your
mobile
screens with
Figma
3
Prototyping
your app
Designing your
mobile
screens with
Figma
4
Testing &
Deployment

4. MVP Tools in the market…

5. Tools available in the market…
• Photoshop
• Illustrator
• Canva
• Sketch
• Figma
• Adobe XD
• InVision
Wireframing
& Design
Frontend
Development
• HTML/CSS/JavaScript
• React.js
• Angular
• Vue.js
• Bootstrap
• Wix
Backend
Development
• Node.js
• Ruby on Rails
• Django (Python)
• Laravel (PHP)
• Express.js (Node.js
framework)
Database
Management
• PostgreSQL
• MySQL
• MongoDB (NoSQL)
• Firebase
• Amazon DynamoDB

6. 6
Figma
We will use Figma to
design our screens for
mobile and web
unDraw
Adding illustrations and
cool images to our app
Mockflow &
Siter.io
We will build our pages
and deploy our web app
through siter.io
Coolers
Will help us generate a
color palette for our UI
Our toolkit today…

7. Designing your app

8. 8
IMAGE
Call to Action
Splash Screen
Register
Registration Screen
Deot cleat ukase Tubergen,
nostril sea fronds tagmata
Sanctus Est Lorem ero suit
A CATCHY STATEMENT
Welcoming my Customer
Instructions on how to sign
up
Full name
Email
Password
Password Confirmation
Option to Login if a user has
an account
Sign in
Login Screen
Welcome back
Instructions on how to sign
up
Email
Password
Option to sign up in case
the user doesn’t have an
account
IMAGE
Forgot Password
Landing Page
Welcome my user by name
User
Image
Current
Time
(Clock)
Task 1
Task 2
Task 3
Task 4
Task 5
Add
Edit
Edit
Edit
Edit
Edit
Mobile app sketches…

9. 9
IMAGE
Register
Register
Welcoming my Customer
Instructions on how to sign up
Full name
Email
Password
Password Confirmation
Option to Login if a user has an account
Login
Web app sketches (1/3)

10. 10
IMAGE
Register Login
Sign in
Welcome back
Instructions on how to sign
up
Email
Password
Option to sign up in case the user doesn’t have an
account
IMAGE
Forgot Password
Web app sketches (2/3)

11. 11
Your scheduled tasks for today!
User
Image
Logout
Welcome my user by name
Current
Time
(Clock)
Task 1
Task 2
Task 3
Task 4
Task 5
Ad
d
Ed
it
Ed
it
Ed
it
Ed
it
Ed
it
Web app sketches (3/3)

12. 12
Moving to designs..

13. 13
1
Navigate to
www.figma.com
2
Create a new team,
project, design file
Create your Figma workspace…

14. 14
Tools menu
Canvas
Inspection Panel
Layers / Assets /
Pages
Main menu, Move tools, Region
tools, Shape tools, Drawing tools,
Text, Hand tool, Add comment
you will find every
element that you create.
Assets
Layers
Pages
Design, prototype, inspect
When you create a new
design file, the canvas will
appear. This is your full
workspace in Figma.
There is a limitation on
the number of pages
Design/Prototype
Setup Plugins
Preview/ Present
Getting familiar with the Figma interface

15. 15
1. Create two pages
(mobile & web)
2. Add the 4 frames
(iPhone 14)
3. Change the settings:
Size, Color, Scrolling
behavior
5. Preview/Present
4. Display grids
Exploring frames, pages, and previews

16. 16
Plugins and widgets…
1. Click on the puligns
2. Add Font Awesome
Icons
3. Select from a variety
of icons
4. You can also add
widgets…

17. 17
IMAGE
Call to Action
Splash Screen
Deot cleat ukase Tubergen,
nostril sea fronds tagmata
Sanctus Est Lorem ero suit
A CATCHY STATEMENT
1. Add and design the circles
2. Get an image from unDraw
3. Text (inspiration from Chat
GPT)
4. Create a button
Your first screen in 4 easy steps…

18. 18
Register
Registration
Screen
Welcoming my Customer
Instructions on how to sign
up
Full name
Email
Password
Password Confirmation
Option to Login if a user has
an account
Building your registration form…

19. 19
1. Design your input field
2. Add auto layout
3. Create a component
4. Create variants (with different styles,
inputs, ..)
5. Prototype
• Interactions
• On Tap: change variant
• On delay: show input
Exercise: Checkbox Variant (checked, unchecked, ..)
Exploring variants…

20. 20
Sign in
Login Screen
Welcome back
Instructions on how to sign
up
Email
Password
Option to sign up in case
the user doesn’t have an
account
IMAGE
Forgot Password
Building your login form reusing the components…

21. 21
Dashboard
Welcome my user by name
User
Image
Current
Time
(Clock)
Task 1
Task 2
Task 3
Task 4
Task 5
Ad
d
Ed
it
Ed
it
Ed
it
Ed
it
Ed
it
Building the checklist page…

22. 22
Let’s build the same app for a web
version…

23. Prototyping and user flows…

24. 24
Prototyping and user flows…

25. Testing & Deploying your app