Design Detailing : Creating a Wireflow

After creating a system map and storyboards we focused on the wireflow that we created before. First it looked like this, only showing the steps of how a user would move through the app:

flow ekr

Here is the link for the pdf since in jpeg it’s quality is too low: street animal app-userflow with wireframe link

You can also see the interactive wireframe that we worked on which shows the actual pages that open up when you click on the different icons/pages of the app.

And than we continued with further detailing the app, adding colors and pictures for each page to be understood more clearly. We will present all of these design process (with the storyboards and the system maps) to people that we interviewed for the first stage, to get their feed back.  Here is how it looks right now (sorry some of the pages are the turkish version since we presented in turkish but i will add the english versions later):

Bu slayt gösterisi için JavaScript gerekir.

Yorum bırakın