user flow

USER FLOWS

User flows were very helpful for the whole team to understand requirements.

Why: Requirements used to change very quickly whilst developing the MVP so it was very important to keep the user flows updated with the current state.

Evolution: The whole team would go through the user flow and change it if we agreed on it. After those meetings the design team could follow the user flow to generate wireframes. They were also very helpful for the developers, product owners, testers, etc.

USER FLOW AXURE TEAM DISCUSSION MVP

wireframes

WIREFRAMES

Since the first requirements we started wireframing in Axure what it could be the portal UI.

Why: Although we knew the look would end up being different we started putting together all requirements following the user flow and do a interactive wireframe.

Evolution: Team discussions, usability testing, different copy, etc. The interactive wireframes made in Axure allowed us to quickly update them.

AXURE WIREFRAME INTERACTIVE

visual design

VISUAL DESIGN

By first sketching some ideas in Illustrator and Photoshop, we started coding and designing directly in the browser.

Why: In the design team we coded all the front end so designing in the browser since an early stage was easy for us and allowed us to quickly test and update the code.

Evolution: The UI continually changed based on regular user testing feedback. Because we were working on the final code it was very easy to make changes and test again. We also created a style guide that was changing at the same time as the project.

STYLE GUIDE UI BROWSER DESIGN BOOTSTRAP HTML SASS

Finished project

END OF PROJECT

Although we had a tight deadline we managed to deliver an MVP fully working on time.

How: By following agile and lean methodologies, pair programing and pair designing, doing internal and guerrilla usability testing.

Awards: Thunderstorm just won an award as the most innovative product in Cinemacon 2016, Las Vegas.

AGILE PAIR PROGRAMMING AWARD LEAN GUERRILLA