OVERVIEW
// A PROJECT FOR THE STRATEGY + INNOVATION OFFICE
TASK: Working with the Pediatrics Residency Education team, our office designed and developed a secure dashboard for staff to track resident information, including all four residency years, exam scores, and uploaded documents.
RESULTS: Produced an unique dashboard system that was easy to use, intuitive, and fit the needs of the educational team in full.
YEAR: 2016
CLIENT: University of British Columbia Paediatrics Residency Education Team
ROLE: UX/UI Designer, Requirements Gathering, Scaffolding of HTML and initial CSS
TOOLS: Axure, Adobe Illustrator, HTML + CSS, Laravel Framework (Basic)
CHALLENGES: Designing a web application that was easy to use and intuitive, learning the Laravel framework.
REQUIREMENTS GATHERING
The first step in designing and developing this web application was to speak with the clients and determine what the exact requirements for success would be. This included things such as: exam scores, cross-resident comparisons, inputting new information, uploading documents and other common tasks.
WIREFRAMING
After determining the requirements for success, the team began designing wireframes. The first set of wireframes were done on a whiteboard and included the entire team to brainstorm. Following this, I was tasked with designing presentable wireframes that included aspects of the teams brainstorming session and my own UX and UI experience. The tool of choice was Adobe Illustrator. The wireframes were created to a high fidelity and included annotations as they were to be presented to the broader stakeholder audience.
The wireframes were taken to another tool; Axure flesh out the remainder of the views and include interaction. This allowed the development team a better understanding of the relations between various pages, functionality and other intricacies such as pop-up menus.
DEVELOPMENT
Upon approval of wireframes by stakeholders, and an internal team meet, development was started. First came installing and managing the local environment using Vagrant, Homestead and Laravel. The three tools combined, allowed powerful functionality including passing data from a MySQL database to output in views. I first began by creating a base HTML layout that included the navigation menu on the side, and a default resident portal. After establishing a scaffold, a senior team member and my direct mentor stepped in and completed development of the web application.
Challenges and final thoughts
Overall I am pleased with the outcome of the project and my own personal development. I learned a great deal about designing user interfaces that are more practical in purpose, and learned about powerful frameworks that are being utilized by the industry such as Laravel. However, I struggled greatly with fully understanding the potential of Laravel. Installing Homestead and Vagrant using the command line was difficult and something I was not accustomed to. In turn, I learned a great deal about the command line tool and its functionality. I improved my experience with tools such as the popular wire framing software Axure, designing with Adobe Illustrator and my front-end knowledge with HTML, CSS and now Laravel (to a lesser degree).
