MCI visualization

Design philosophy

• I believe in doing immersive user experiences that are delightful to the audience.
• Code art - from design, to transitions/animations - require polishing time to achieve quality. I will always push for quality.
• A lot of the cost for a well-designed data visualization is front-ended, i.e. once it is in place modifying it is a lot less work.

Scope of work

• Based on MCI's design ideas for a self-submitted data flower to run for potentially multiple workshop events in the future.
• The visualization is a tool used for storytelling workshops, which means user experience is the key criteria.

Data flower ideas 1

Start screen is just the data flower.

Data flower ideas 2

Input screen ideas

Data flower ideas 3

• Although the input screen can be separate survey links via a 3rd party tool, I feel that integrating everything makes for a better user experience.
• The visualization and the data input is all integrated together in one thought-through user experience package, and you can design UI that gives immediate feedback.
• You can't do this easily with 3rd party components, and you still have to integrate with them on the backend.
• After thinking through, I think customization is the way to go.

Data flower ideas 3

• Although the input screen can be separate survey links via a 3rd party tool, I feel that integrating everything makes for a better user experience.
• The visualization and the data input is all integrated together in one thought-through user experience package, and you can design UI that gives immediate feedback.
• You can't do this easily with 3rd party components, and you still have to integrate with them on the backend.
• After thinking through, I think customization is the way to go.

Animation and polishing

• Everything will have some sort of animation /transition, especially for the main screen. Rough idea: To show the flower "blooming".
• This makes the piece visually stand out as a piece of code art.
• UI for the data input screen to show feedback immediately (i.e. animating the petal dimensions due to input).

Browser, hosting and domain name

• Web-based piece, will work with modern browsers.
• Modern browser list: latest Chrome (preferred), Firefox, IE Edge, Safari for Mac, iOS Safari, Chrome Android.
• Older browsers (especially IE11 and below, anything that is not Edge, which is 13 and above) will be discussed separately. Similarly Android mobile browsers that are not Chrome will be discussed separately.
• Will optimize visualization to run decently on desktop / mobiles.
• We will host the visualization on V/R's serves, and will also consider getting a domain name for this. Security certificates for SSL will be required.

User considerations

• There are no permissions for users for now, meaning anybody can update and change the data for each of the flower petals.
• Users are allowed to go back and change data parameters (for now).
• Each data flower visualization will be given a unique link (e.g. domain name + hash), so any future data flowers will be a different link.
• Updates to the visualization, colours, categories, animations, etc. will require custom updates for now. Once the base piece is up, it will be easier to modify though.
• This link can serve as a permanent take-home report that will always be there for the users to access if needed.

Future work

• Add in UI interfaces such that event moderators (not the end users) can create custom data flowers - categories, etc. within specified parameters.
• Reporting for event moderators. Track even more data across different events. I suspect this is interesting, given previous work done for prior clients before.
• Administrative tools: login, password change, details, etc. if this is to become a broad-based app that more people can use.
• I am obviously interested in the idea of a platform, but let's only go with this after this project is over and we see if it makes sense to work together.

Costing

• Estimated costs are based on man day rates at S$600 per day across all functions - design, technical, client management.
• All cost expenses will be broken down into itemized timesheets during the project schedule so costing is transparent.
• We can do something less polished (UX wise) that will cost less in terms of animation/feedback, but I am of the opinion that for projects like this, the bling is the point.
• All code base is owned by MCI. You are free to do whatever you want with the code once it has been delivered.

Estimated breakdown by mandays

We do not make from 3rd party external infrastructure costs.

Sample timeframe milestones

Frontend and backend work will be worked on concurrently by various people. Delivery will be in 5 weeks.

Client management

• Please note that the costs stated are just estimates based on scope. If more scope is added (e.g. more data and another data viz to put in), we will revise.
• In general though, once the architecture scaffolding is up, less work is required to put the pieces together.
• Client management reviews will be done weekly / fortnightly, and V/R will update and send out updates (via our staging servers) for you to try out the latest iteration of the code.
• For example: Sample client management update/changelog.

Payment terms / Future updates

• For projects above S$5K, we tend to ask for payment to be split into 2 tranches.
• Half of the payment is delivered upfront, and the other half is paid upon delivery of the project.
• Future data flowers should cost you at about 1-2 (S$600 to S$1,200) man days for updates if there is no major revision.
• Basically theming, or changing the data field values / number of segments (between some pre-agreed range) for a new data flower is reasonably easy - fonts, colors, text, etc.
• If it is a structural change - e.g. the 1 level data flower with 2 dimensions suddenly have more levels and dimensions - then it is not a trivial change as need to design how the interaction works. This will be a different scope.

Team / Portfolio

• V/R(www.vslashr.com) is an interactive digital agency that has been around for 5 years.
• We have a track record in the explorable and visualization space and have done dozens of projects. Clients include folks like Temasek, Fortinet, BASF, etc.
• We also have done fullstack work to build enterprise apps, so have skillsets in that area.
• We are a technical crew that has depth in frontend work. That is why clients buy us and stay with us in the first place.
• Do visit our site or come talk to us!

Questions?

chiloong@vslashr.com

+65 94355224