Visit the Running Prototype
See INSTALL.md for installation instructions
See Meducated Design Booklet for a detailed walkthrough of our design process
See Table of Contents for a listing of our design artifacts
Prototype is released under CC0 1.0 Universal
Upon receipt of the RFP, the Executive Sponsor met with potential team members internally to determine the appropriate Product Manager based on the requirements and subject matter. It was determined that the Product Manager with the best experience and passion for the project was Mike Behrmann. Mike assembled the team to help identify the types of information available via the FDA data source in an effort to select a target demographic that could benefit most from the data. After careful consideration and team member contributions, caregivers of the elderly and infirmed were chosen as our primary persona. Our product manager was then charged with providing the most value possible to our target group in the time allotted.
Our Agile Coach, with confirmation from the team, determined that daily sprints would be the best course of action to stay on track with the limited time frame. We used Jira to: track our issues, prioritize our backlog, plan our sprints, conduct our tests, and view our agile board (to conduct our morning rituals and standups). We then used HipChat for project-related communication and collaboration as we find it to work much more efficiently than e-mail.
Our Interaction Designer and Certified Usability Expert worked with the Product Manager to further refine the personas for the project and ideated useful features for the applications and website based on anticipated user needs. Once a list was defined, the features were entered into a card-sorting tool using Optimal Sort, and distributed to users to provide un-biased feedback on the expected organization and grouping (and demand) of the proposed features. Testing feedback provided information on what users felt were the most important features to include and what was low on the list in terms of priority. This information informed the team and served as the basis for starting the low fidelity wire-frames, which were developed initially by hand for the iOS mobile application. Once the team reviewed the proposed product and agreed on the direction, additional wireframes were developed using Axure RP 7.0 for our responsive website, native iOS, and native Android applications. In a parallel design effort, our Creative Team worked with the Product Manager to brainstorm ideas and came up with the "Meducated" name and crafted branding around the concept of becoming a "ninja" of medicine information! The colors were pulled from a hospital scrub clothing line. The branding was developed in the form of a hybrid moodboard/style guide was design document. From there, the creative juices flowed and provided the inspiration for the creation of the supportive assets for each product, which were passed along to the development team for immediate implementation.
The flow of the low fidelity wireframes was then transferred into full color prototypes using Adobe Illustrator. These prototypes were passed back to the development team to use as a reference material while compiling the features specific to each Sprint. Graphics and assets were then pulled from the prototypes and exported specifically for responsive Web, iOS and Android formats.
After a working prototype was released, styling was applied and visual affordance testing was conducted to ensure the design was not only aesthetically pleasing but also had clear messaging and calls to action. The team also conducted some task flow exercises for input on ease of use and to better understand user expectations when using the app. The feedback from the User Acceptance sessions were incorporated into updated design documents and results were shared with the team for future iterations.
The development team used a variety of open source libraries to implement the web and native-mobile applications. The Web app (built on Microsoft's .NET platform) used jQuery 2.1.3, Bootstrap 3.0, Autofac 3.5.2, and others. The iOS app, while built on Apple's proprietary platform, used various open source modules from github including MBProgressHUD, UIImage, and Reachability. The Android app used Retrofit, Picasso, EventBus, Timber, and many other open source libraries. Both native mobile apps used Crashlytics for beta deployment and monitoring. All three apps were built iteratively, based on user story prioritization in each sprint and using the design artifacts provided by our creative team. As the design evolved, the UI implementation was updated to match the new designs.