Google Drive link: ow.ly/t2CT302JaFJ The stages of prototyping interfaces at Nimax with artifacts examples: from first interview with a client to design and UI guidelines.

1. Prototyping
interfaces
How it is done
Digital
Agency nimax.pro

2. 00. Table of contents
01.
02.
03.
04.
05.
06.
07.
08.
09.
Nimax Digital Agency Prototyping web interfaces May 2016
What can be prototyped?
Stage 1. Getting to know you
Stage 2. Research part
Stage 3. Information architecture
Stage 4. First prototypes
Stage 5. Design concept
Stage 6. Hardcore prototyping
Stage 7. Testing prototypes
Stage 8. Design and UI guidelines

3. 01. What can be prototyped?
Nimax Digital Agency Prototyping web interfaces May 2016
● Web services
● Corporate portals
● Online configurators
● File storage systems
● E-commerce solutions
● Mobile applications
Take a look at our portfolio on nimax.pro or behance.net.

4. The main question will be: “Why?”.
Before starting anything we spend
time talking about the subject, diving
into things and trying to figure out
the best way to implement your goal.
Stage 1. Getting to know you
Nimax Digital Agency Prototyping web interfaces May 2016
● Reasons, problems, wishes.
● Company, product, services.
● Audience, market, competitors.
● Processes behind the scenes.
● Launch and promotion plan.
● Technical requirements.

5. Stage 2. Research part
Nimax Digital Agency Prototyping web interfaces May 2016
There are always things to double-
check and gaps to fill in. If anything
is not obvious, we would start with
specifying user needs, processes
behind the interface, and its functions.
● Surveys.
● Website audit.
● User interview.
● Product testing.
● Content analysis.
● Web analytics.

6. Stage 3. Information architecture
Nimax Digital Agency Prototyping web interfaces May 2016
Here all the magic happens. At this
stage we define project future, its
organization and main functions. We
describe next steps thoroughly, so you
know what to expect after that.
● User scenarios.
● Structure and functions.
● Navigation system.
● Content organization.
● Iterative development plan.

7. IA examples
Nimax Digital Agency Prototyping web interfaces May 2016
User scenarios for “Senta” car insurance
aggregator
User needs for “Alliance” windows ordering
service

8. Stage 4. First prototypes
Nimax Digital Agency Prototyping web interfaces May 2016
Combining all the data found
on previous steps into pages. Usually
you get a home page and one inner
page. All based on a real content.
● Two black-and white pages.
● Very neat, close to future colored mock-ups.
● Worded idea of the service or product.
● Descriptions of icons, illustrations, photos
or videos needed.

9. First prototypes examples
Nimax Digital Agency Prototyping web interfaces May 2016
“Yarmonka” online food market, category“Yarmonka” online food market, home page

10. Stage 5. Design concept
Nimax Digital Agency Prototyping web interfaces May 2016
Adopting corporate style given
or creating one by ourselves. Considering
how it may look on mobile screens. Always
making it unique and flawless.
● How do elements interact.
● Typefaces, colours and graphics.
● Elements animation when needed.

11. Design concept examples
Nimax Digital Agency Prototyping web interfaces May 2016
“Senta” car insurance aggregator “Yarmonka” online food market

12. Design concept examples
Nimax Digital Agency Prototyping web interfaces May 2016
“Bilet Online” flights booking service “YotaHub” second screen configurator

13. Stage 6. Hardcore prototyping
Nimax Digital Agency Prototyping web interfaces May 2016
Making all the pages and functions
usable. In the end of the stage you
get fully functioning interactive
prototype of your future product.
Ready to be discussed and tested.
● Every single detail thought out.
● All the hypotheses applied.
● All the texts written.
● Place for future iterations left.

14. Big prototypes examples
Nimax Digital Agency Prototyping web interfaces May 2016
“Yarmonka” online food market, full versionfull “Senta” car insurance aggregator, prototype

15. Stage 7. Testing
Nimax Digital Agency Prototyping web interfaces May 2016
This is the first moment of truth:
we have done a lot already, now it is
time to find out how we did. The proto
can be tested among the team (yours
and ours) or we can invite potential
users. The format depends on a project.
● Things to fix right away.
● Things to be proud of right away.
● Tricky functions or descriptions.
● Ideas for future development.

16. Stage 8. Design and UI guidelines
Nimax Digital Agency Prototyping web interfaces May 2016
This is what is coupled with frontend
stage. Usually design happens slightly
before or simultaneously with frontend
development.
● Style guides done.
● All the resolutions designed.
● Page building principals defined.

17. UI guidelines example
Nimax Digital Agency Prototyping web interfaces May 2016
UI guidelines for “Dikom” online store

18. Digital
Agency