Dylan Smart
Dylan Smart
These case studies will give you a good overview of my design and development processes and how I approach certain tasks. I appreciate you taking the time to check them out!
Turning a paper recorder into an interactive application This project was introduced to me through the Durham College C.A.F.E where I was a work-study student during the summer of 2018.
The reason this application was to be created was due to the inconvenience that a physical plaque recorder caused.
The Durham College dental clinic students had to first look into the patient’s mouth, take a look at the areas containing plaque, take off their gloves, fill in those areas, and then put their gloves back on.
Then continue that process until they evaluate the patient’s full mouth. Once they are finished, they would calculate the percentage of plaque that the patient carries in their mouth.
The physical paper recorder given as a project brief, with notes from the faculty member My task was to develop an application that can remove this inconvenience facing the students. That main inconvenience being the fact that they had to take off their gloves, which is too time consuming.
Using an application would solve this issue, because the students can use a mouse with a mouse-guard to track the patient’s plaque, which allows for the gloves to remain on.
I took the initial plaque recorder, as seen in the image above, and I created a rough design of how I wanted the project to look, as can be seen below.
Design to be used as a guideline for this project From the above design, I went into development. Initially, I attempted the project in Articulate Storyline.
I found that I had a minimal amount of knowledge in articulate and my time could be better used developing the application how I knew I could. In HTML, CSS, and jQuery.
Building it in HTML, CSS, and jQuery, I found myself being consistently challenged to find new solutions to problems I had never faced before.
It was a fantastic learning experience that came out with me being more confident in my own development skills and the Durham College dental clinic having a new application to enhance their learning experience!
Durham College dental clinic plaque control record - Version 1 Now, even though this application was sufficient for the student’s experience. It wasn’t quite sufficient.
Yes, it took away the need to remove their gloves, but it just wasn’t an optimal application.
The drop down menu for selecting a tooth quadrant was not user-friendly and it was not what you’d want a digital Plaque Control Record to be.
The reason for this was because I had knowledge based limitations and could not conceive a way to effectively select a tooth’s quadrant without causing issues in the application as a whole.
As should be standard in development, feedback is always a welcome sight.
So the C.A.F.E suggested that it would be nice to receive some feedback from the users in the Dental Clinic, which would be the dental students in this case.
Unexpectedly, we received feedback in spades.
Feedback provided by Durham College dental students Students in their 2nd and 6th semester of dental programs provided us with feedback, with a majority of them commenting on the tediousness of the drop-down menu.
Agreeing with their feedback and having the knowledge to solve the issue, development of version 2 was initiated!
Version 2 was created with the feedback from the users taken directly into consideration!
Now it is a more user-friendly application that is simple and efficient to use.
No more drop down menu and even tool-tips were added on hover of certain elements!
Application in use by the Durham College dental students This application is currently being used by the Durham College dental students as their primary manner of getting a patient’s Plaque percentage! Isn’t that so cool!
I encourage you to check out this project I got the opportunity to develop!
Thumbnail and starting screen for the “How To Write an Email” Video This project was introduced to me through the Durham College C.A.F.E where I was a work-study student during the school year of 2018 - 2019.
The reason this video was to be created was due to the high amount of unprofessional and blatantly disrespectful emails that teachers were receiving from their students.
They wanted a “how-to” video to show students how they should form their emails being sent to professors or even future bosses!
I was tasked, along with two other work-study students, to create an animated video that fulfills the needs of the teachers, while maintaining a point of view of a student.
Brainstorming the script and video’s animations We began to brainstorm the script and animations!
Initially, we came up with the idea to use a metaphor to deliver our message.
We ended up coming up with the idea of comparing the way you build a sandwich to the way you would form an email, it has structure and should always follow a certain structure to make a good sandwich(email).
We hit the ground running with this idea and the script was approved by our team manager and the academic vice president(VPA) of Durham College(DC)!
The storyboard that we planned out for our graphics and animations We went ahead and created a storyboard of our animation ideas and how we wanted to approach our graphics with the script that we created.
This helped us illustrate how we would begin to plan out the video!
From there, we made a quick proof-of-concept video(as seen above) to showcase the tone and how that pairs with visuals, so that we can continue to showcase our progress to our manager and the VPA of DC.
Once they had a chance to look that over, the graphics developers began to develop our static graphics that were to be taken into After Effects and animated!
Static Graphics developed to be taken into After Effects and animated As a breakdown of the roles, we had:
Dylan Smart (Myself)
- Project Manager and Motion Graphics Artist
- Graphics Developer and Motion Graphics Artist
Logan Joudrey
- Graphics Developer
Using continuous communication with the two graphics developers, I collaborated with Gabrielle to animate the video!
We used Adobe’s “Team Project” feature. It was really interesting to collaborate on an After Effects file like that!
We had continuous communication and kept our work organized due to a shared project file!
Gabrielle was in charge of the Cinema 4D (3D portions of the video) graphics and I was in charge of animating all of the other graphics that were developed (2D portions of the video).
We then created our first draft of the video! Once that first draft was revised and edits were requested, we continued to revise until everything was greenlit by our Team Manager and the VPA of DC!
Following our approvals, we launched the video! This video is currently live on the Durham College C.A.F.E’s YouTube channel!
With my voice as well! It’s so awesome and it was so much fun!
This video was a lot of fun to make! It was really nice to work on a team where everybody was engaged and really passionate about their work!
The professor’s from the college were also quite pleased with the fact that their concerns were addressed in an engaging and appropriate way for the students.
The opportunity to work collaboratively was a great experience and I’m sure it will be a project I look back on and am proud of the work I put into it.
Thank you for taking the time to read my case study! :)
The logo for the company, Nielsen, my client for this photoshoot. At Nielsen, every year, there is a photo session available to all Nielsen Staff. This photo session is used as a manner to promote the sponsor, Women in Nielsen(WIN), and provide professional development opportunities for the attendees.
WIN is a diversity group that is featured in the umbrella of Nielsen’s Employee Resource Groups. It’s a group that was formed to create an environment where employees feel they can be themselves, particularly in support of women. You are not required to be a member of this minority to be included in the diversity group. It’s a pretty awesome group!
The annual photo session is organized to provide staff members with the opportunity to have professional headshots taken of them for their use on professional mediums (LinkedIn, Google Plus, Etc.), and to encourage them to sign up to become a part of Women in Nielsen.
My role in this photo session was as the photographer. The session was to take place on Friday, April 26th, 2019, at 1pm and last for 3 hours at the most, with an hour of time prior to the start of the session to set everything up. Each individual would get enough time for 3 photos; one photo from three different angles.
The actual duration of the session came out to roughly 2 hours. Within 2 hours, with the assistance of 3 individuals from WIN, I was able to keep up with the flow of attendees and take (at a minimum) 3 images of 57 individuals. Things wouldn’t have gone so smoothly if they weren’t there to help organize attendees!
Following the photo session, my delivery of fully edited photos was provided to my client in a manner of roughly 4 days! I really enjoy editing photos and I had so many different individuals thanks to this photo session, it was time well spent on these photos, I am quite proud of them!
Furthermore, those 3 previously mentioned individuals helped me with something that they did not even need to! My media consent form! See image(s) below.
The media consent form that I developed, to be used for this event. All images are different aspects that went into creating the full media consent form experience Now, I would like to introduce to you: My Media Consent Form(see image above)! I personally developed this using Vanilla Javascript, HTML, CSS and PHP! It was a lot of fun to figure all of these different aspects out in the code.
There are three different “main aspects” to this media consent form:
The full media consent form, to be completed by the attendees immediately before their photo gets taken The media consent form: Features basic information fields and a signature field, which takes the HTML canvas data and converts it into a png file using PHP 64-bit encode.
The list of all the individuals who signed up, fields from left-to-right: names(redacted), emails(redacted), approval status, and sign-up time The sign up database: It is a page where I pull information from my own personal server using PHP and Javascript and display it for a preview of the attendees status of consent (whether or not I may use their image on my portfolio).
The confirmation email sent to each individual, to confirm their sign up to have their photo taken and their consent approval status. The confirmation email. Sent using the PHP mail() function, I utilize the fields they fill out for me to send them confirmation directly to their email as a way for both parties to have this confirmation on hand.
Now, in a way, I am legally protected and legally approved to use the photos of these individuals on my site. Thanks to the media consent form, and of course, a huge thanks to every individual that approved of their photo’s use, I am able to share with you, all of these photos!
It was a wonderful experience to have all of these different aspects of a photo session running all at once. A lot to keep track of and a lot of fun. Now I know what to continue to expect in the future haha!
Please, click the link below to check photos out!