Client approached us with idea for browser based data aggregation tool with specific interaction concept. For start they wanted to translate idea into workable proof of concept to validate idea. We kick off project with design solution that took into consideration basic approach they had in mind and on top of that provided solution with improved usability & ux though show-on-demand interaction patterns which simplified user interface & made necessary information available when needed.
Deliveries for kick-off phase were styleguide for UI components w/ interaction patterns, typography system, color scheme & basic brand’s look & feel. Next step was to translate design into working prototype. We used Bourbon css framework and jQuery.
For next phase client provided us with work in progress documentation outlining greater idea about desired product. Big picture idea was to provide users with central place where they can overview changes over their own data & data collections of interest, that can get insight over team’s collaborative effort, way to seamlessly upload & iterate data collections & manage users and teams with permissions for using data. Community features such as comments, voting etc.
Kick off was in form of product strategy that defined user roles, team types, collaboration process, use stories ...
For designing mid fidelity wireframes we used typical waterfall approach to get consistent information architecture & ux across multiple key screens. We used InVision tool for prototyping user flow and gathering feedback from stakeholders. After making needed tweaks and getting wireframes approved we’ve developed comprehensive html library of UI components and major layouts. And that concluded waterfall phase.
Long story short - design process focused on modular / atomic design approach that enabled us to move fast & don’t break stuff. That way we could focus on usability & ux, w/o need to design every & each screen separately.
Next phase used agile methodology with focusing on implementing design using Backbone.js for client side rendering & communication w/ Python backend. After implementing majority of features we used bi-weekly design sprint for specific features such as upload & import tools ...