Cyclomedia

Street Smart

We want to replace our existing Adobe Flash-based product with HTML 5. We want to re-design our user interface in order to be able to add new functionality and in order to solve usability issues. Help us by designing this new product.

Do you have a similar case?

Contact us

Solution

Cyclomedia gathers and processes aerial photo’s and panorama imagery. Cyclomedia offers this to organizations who need this information for their services on infrastructural management, public spaces and real estate. The imagery can be used for accurate measurements and to determine locations.

The imagery can be unlocked and offered by plugins in GIS applications. Cyclomedia also has an online 360 degrees viewer called Globespotter. This viewer, in which it is possible to do measurements, was using Adobe Flash but is being re-built in HTML5. Cyclomedia asked Stroomt to design a new concept and a state of the art look and feel.

Stroomt used its 1-10-100 approach in this project. In the frist day (the 1 step) Stroomt gathered requirements in a workshop setting. Based on this information we designed the first iteration of the most important screens. We presented these screens to the stakeholders. In the 10 step Stroomt interviewed several users in order to validate the requirements we learned at Cyclomedia and of course also to gather user requirements. With this extra information we made the next iteration of the screens which eventually became a prototype. This prototype illustrated the new concept. In this 10 step Stroomt also designed the new visual style.

In the 100 step the product is realized by an agile approach. Stroomt was involved in a couple of sprints to design the interaction and the visuals for the most important screens. Stroomt advised the product-owner and the team during the build of the application. The 1.0 version of the product is recently launched under the name Street Smart.

Activities

  • Gathering requirements
  • Interaction design
  • Visual design
  • Front-end development

Deliverables

  • Wireframes
  • Styleboards
  • Visual design/style guide
  • HTML/CSS