FDA-GO is Concept Plus' working prototype submission in response to the 18F BPA for Agile Delivery Services for RFQ 4QTFHS150004
Project Links | URLs |
---|---|
Working Protoype | http://fdago-design.conceptplusllc.net |
Mock Prototype | http://invis.io/G23ERJCMY |
Design Style Guide | http://fdago-styleguide.conceptplusllc.net/ |
Upon receipt of the RFQ, Yazan Ramahi was appointed and authorized to put a multidisciplinary team together to collaboratively design, develop, and deploy a working protoype.
Team members consisted of:
- Product Manager: (Category 1) - Yazan Ramahi- Leader given authority, responsibility, and held accountable for the quality of the FDA-GO prototype.
- Interaction Designer/User Researcher/Usability Tester: (Cateogry 3) - Erica Jeffery
- Visual Designer: (Cateogry 4) - Melanie Logan
- Frontend Web Developer: (Category 6) - Ponnamy Kiep
The Concept Plus team held a workshop with "people" and worked together to design the initial FDA-GO prototype. During the workshop the team presented initial design ideas to "people" during a whiteboard session and "people" were asked for feedback and recommendations. Throughout the workshop the design was refined and initial designs were accepted by both "people" and the team.
Interviews were conducted with "people" at least two times throughout the life of the project. "People" were interviewed individually by the interaction designer and were asked to answer specific questions the team had put together. Feedback from interviews were captured through reports and used to enhance user experience.
The user interface design was developed through an iterative approach. The initial design was developed during the participatory design workshop. Paper wireframes were then created and "people" were asked to complete a series of tasks and provide feedback as well as accessing an interactive clickable prototype. The final mock-ups were developed to enhance the look and feel based on participant feedback captured during the wireframe and clickable prototype interviews.
To establish and retain the branding for FDA-GO a design style guide was created to ensure that branding assets and guidelines are followed. See the FDA-GO Design Style Guide for complete details.
The goal of the usability tests was to assess overall usability of FDA-GO during the design phase. The product team was interested in learning whether users could navigate the web-based application and understand the general workflow and content of the site.
- Conduct two rounds of usability testing
- Conduct Design Round 1 testing utilizing paper wireframes of initial designs
- Conduct Design Round 2 testing utilizing a clickable proto-type
- Collect participant feedback and provide recommendations to enhance user experience
- Three individuals participated in a usability test of FDA-GO
- Participants performed a series of 8 tasks and provided feedback
Participants were interviewed and observed during design phase round one testing and completed a series of seven tasks. During round one testing, participants were asked to complete tasks in a hypothetical manner using paper wireframes and provide additional feedback and observations.
The same participants were used during round two, however they were provided with a link to an interactive clickable proto-type and asked to complete the questionnaire and provide feedback and observations.
Data collected includes the paths participants used to complete tasks, paths selected, task completion rates, and verbal feedback. Click here to see all test scenarios used and results.
Keeping in mind the short timeframe, we created a prototype that worked on multiple devices while satisfying all of the criterias for this challenge. The FDA-GO application will consume the OpenFDA APIs. This was achieved with using many modern and open source technologies.
- NodeJS - Cross-platform runtime environment
- AngularJS - Front-end framework
- Bootstrap - Front-end UI framework
- Datatables.net - Advanced jQuery tables
- GruntJS - Javascript task runner
- Jasny Bootstrap - Enhanced Bootstrap utilities
- Yeoman - Enhanced Bootstrap utilities
See the FDA-GO Local Deployment Guide
FDA-GO is licensed under the MIT license. For full details see the LICENSE on github.
Please refer to the "docs" folder.