OVERVIEW

// A PROJECT FOR THE STRATEGY + INNOVATION OFFICE 

TASK: Working with researchers at the Child Family Research Institute, we designed and developed a Wordpress website, as well as taught the management of the content management system (CMS)  to the researchers along with thorough documentation and support. 

RESULTS: Produced a website that exceeded client expectations and maintained the level of quality expected of the Strategy + Innovation Office. The tutorial was a success, with easy to understand instructions and concise, to the point documentation. 

YEAR: 2016 

CLIENT: Marianna Brussoni // Head Researcher at the Child Family Research Institute (CFRI at BC Children's Hospital) 

ROLE: UX/UI Designer, Wordpress Developer, Development of Content, Workflow Manager, Google Analytics Tracking

TOOLS: Adobe Illustrator, InvisionApp, Wordpress, Localhost on MAMP, Adobe Photoshop. 

CHALLENGES: Managing schedule with tight deadlines and non-design savvy researchers. Understanding the Wordpress CMS and its nuances. 

WORKING WITH CLIENTS + DESIGNING AND PRESENTING WIREFRAMES

// WORKING WITH CLIENTS 

Working with clients such as researchers posed a challenge right off the bat. As a designer there is a certain lingo we speak with that is often misinterpreted by others who aren't as design savvy. However, the opposite is just as true. As researchers, the clients communication of ideas was often difficult to interpret and execute upon. The solution was a scheduling of many face-to-face discussions that involved explaining my designs and the accompanying justification in a way that was easily interpreted. This allowed both parties to move forward and work on achieving a design that was excellent.  In the initial meets with the clients, they presented other websites that executed well on certain features, and had a desirable look and feel. The clients had inspiration they wanted to use for their own website, as such we considered the components of those websites that worked and iterated on them to fit the clients needs. 

// DESIGNING AND PRESENTING WIREFRAMES

The initial wireframes were done using simple pen and paper. Pen and paper allowed for quick iterations and establishing a baseline "look and feel" that allowed both parties to agree on a direction. Following the pen and paper wireframes, higher fidelity wireframes were made using Adobe Illustrator and asset packs. The Illustrator wireframes were then moved into InvisionApp, a collaborative design tool that allows interactivity in wireframes. 

WORKING WITH WORDPRESS

Working with Wordpress was a new experience for me. Prior to my work placement with the Strategy + Innovation Office, I have never directly worked with Wordpress's CMS. Using various resources and with mentorship from my peers and supervisor I learned the Wordpress CMS effectively to quickly develop the wireframes that were being iterated on. Learning Wordpress began by downloading and installing MAMP, a localhost software that allowed Wordpress to run locally on my machine (Apple Macbook Air). To update the live site, I used a tool called "dbreplace" to replace the live sites MySQL database with the updated localhost MySQL database. This was completely unique and new to me, and as such was a challenge to understand in the beginning, but as I continually worked on the website, I better understood the MySQL database replacement. 

Through working with Wordpress, I also better understood analytic tracking by implementing Google Analytics to track how many views the website is getting, what pages users are landing on, how they are being referred to the website and more. I also improved my CSS understanding as I was frequently required to apply custom CSS to built in elements of the theme. 

TEACHING THE CMS + FINAL THOUGHTS

// teaching the cms

Teaching the CMS to the clients was a rewarding and valuable experience that was unique to the project. The first component involved building a document that had a set of instructions on how to update certain content sections and how to update images. After creating the document, the next step was to have a sit down with the client to walk them through an example scenario of updating content. This involved teaching them how to login, navigate the CMS, use the visual composer tool to change content and more. The client left feeling confident and was pleased by the level of professionalism. 

// Final Thoughts 

Working on the BrussoniLab website was both exciting as I had was given full reign of the process from design to development as well as being challenging and a great learning experience. I better understood the full potential of Adobe Illustrator as well as learning to use new collaborative tools, in this case InvisionApp. Working with Wordpress was something new and exciting that I enjoyed which also taught me how to manage and update MySQL databases and incorporating Google Analytics. Google Analytics involved putting the code into the HTML of the Wordpress theme as well as creating the document that is sent once a month to all involved parties. Teaching the CMS to the researchers was also an incredibly valuable experience, as it often meant translating terminology into easier to digest points. Managing communication and workflow via DaPulse - a workflow management tool - was great as well which involved staying updated on deadlines and communication channels.