Rob Hart

Front-end Web Developer, UX & UI Designer

Rob Hart
Rob Hart profile picture

Hello and welcome! Based in Plymouth, UK, I’m currently employed as an eLearning Developer for TELMeD at University of Plymouth.

I specialise in front-end web and hybrid mobile development. With a focus on creating engaging, well crafted designs that users enjoy.

This site includes some freelance projects as well as some public facing projects developed at TELMeD.

Have a look around. If you like what you see and are interested in me working on similar projects for you, get in touch.

About Plymouth Clinical Manual

Developing eBooks is not something I’m super familiar with to be honest. But when I was asked to develop an eBook for someone that I’ve worked with on a number of other app based projects, I looked into it before deciding to give it my best go at it. I had to learn a few things on the fly including software used (Adobe InDesign), but overall I’m happy with how it looks. Even though its an eBook and mainly distributed online, the eBook was also printed and it looks great!

The book contains 343 pages within 19 sections so it was quite a sizeable project. I designed a template eBook with just a few pages of content per section and also tackled implementing the most challenging content early on (2 page landscape table and some complex diagrams). Once I got to grips with the essentials for InDesign, I found some of it quite easy to work with and to also make some substantial edits with minimal input which was nice.

I decided to give each section a unique colour palette so it stands out in its own right. But I made sure each section maintained a consistent feel and flow so it didn’t come across as disjointed. Actually, one fo the challenges for the project was that each sections content had a different author, so I had many differently formatted Word documents with content displayed in varying ways that I need to input into the eBook in a consistent way. I think I achieved it and the feedback from it has been very positive.

Skills used

Adobe InDesignAdobe Illustrator

Works on

iOS (books)Web (PDF)

About Globus Pharyngeus

This app came about to reduce time patients who had been diagnosed with Globus Pharyngeus, would need to spend at hospital appointments and consultations when there were no negative changes to their condition. I was asked to develop an app which patients could use to track how they felt each day over a period of 6 weeks. The app includes some important information about the condition as well as some helpful tips via text and videos for completing exercises and positive actions to take to prevent discomfort.

I needed to design and develop an app which functioned across web and mobile devices, was responsive and intuitive to new users. It also needed to be secure as patient data was to be stored and saved for future discussion with their consultant.

I went for quite a bold look to represent the app but kept to standard design conventions for things like button sizes and user input to allow the app to be used with ease. I also developed as many features as possible to function offline as I didn’t want this to become a bottleneck for use. Other important features include a calendar and daily questions for these to input as well as a customisable push notification time which reminds the user to input how they are progressing each day.

So far the feedback for the app has been very positive and well received. You can read more about the app via blog posts titled Globus Pharyngeus: the app idea and Globus Pharyngeus: app design.

Features
  • Push notifications (customisable)
  • User registration and login
  • Offline use (local storage)
  • Auto data synchronisation
  • Responsive to display on all screen sizes
  • Calendar display
  • Survey triggered upon completion for research
  • Success rate indication
  • Clearly displayed information about the condition
  • Video series embedded and watchable in app
  • Ability to update account information in app
Skills used

Agile KanbanAJAXGitHubHTML5JIRAJQueryMySQLPhoneGapPHP

Works on

AndroidiOSWeb

About iCARE

This project was one of my favourite projects to work on and was also very rewarding upon completion. The mission was to provide an engaging solution which tells the story of Ebola, as well as to try and debunk some misconceptions around the support and decisions which could ultimately make matters worse.

The project had many challenges from start to finish. Mainly because of the remote locations in Sierra Leone which the application was being used in. Things we needed to consider included how to distribute the app to the iPads, including app updates, and also, how to get the research data back from the devices to the researchers in the UK. I wrote a blog post about this in more detail titled iCARE - Testing and debugging locally from Africa.

As lead developer for this application, I worked closely with the script writer (Luke McGowan), illustrator (Lizzie Seymour) and sound engineer (Jamie Carmichael) to create the best application we could develop in the tight deadline we had.

I worked closely and regularly with the team in Sierra Leone to support testing, use and then rollout of the app. The village that the team were based in Sierra Leone once had a major power outage resulting in no internet connectivity for a prolonged period. I put everything they required to update the app onto a DVD and we posted it out to them so they could continue their work! Because the app was developed with this potential in mind, it continued to capture data successfully before syncing to a server once the internet in the area was back online.

Once the app side of the project came to a close. The research side of the project requested a dashboard to be developed to aid their analysis. I developed this with various chart types as well as making it easy to use and engaging. You can see some of the dashboard in the YouTube video above as well as in this blog post titled iCARE: Show me the data!

Features
  • Over 30 scenes with many interactive (decision making) scenes.
  • Every interaction stored in the app to create a branching story, allowing for very different scene audio and visuals through to the end scene. E.g. many characters in the story will die if incorrect decisions were made.
  • 2.5D parallax animation between each scene using camera effects.
  • In app audio manager which allowed the user to alter the mix between background music, scene sound effects and narration.
  • Responsive app which worked on various mobile devices (without ratio issues) including tablets and smartphones.
  • Worked on iOS and Android.
  • Contained image library for various device screen densities.
  • Multi language support developed through selection of preferred language upon app load (English and Krio).
  • Fully functional offline.
  • Custom in app analytics capture for research project.
  • Automated data synchronisation of analytics data.
  • Backup data export option in event of complete failure of internet connectivity.

Unfortunately, this project was never made publicly available due to the project scope. Please view the video above as well as the blog posts for more information about the project.

Read more about this project via the TELMeD blog site. We also presented this project at the 2017 ALT Conference.

Skills used

ActionScript 3Adobe AIRAgile ScrumCitrus EngineFeathers UIGitHubMySQLPHPRedbooth & AsanaStarling

Worked on

AndroidiOS

About Interchange

I developed this game in a team during my final year degree way back in 2012. I’m keeping it in my list of projects here as I still see it as something to be proud of and something I’d like to do more of in future.

I was the lead developer for this project and I worked closely with two designers who created most of the graphics for it.

The game contains 6 levels of 2.5D (parallax) magnificence. With each level more challenging than the last, the game quickly tests your knowledge of the three available robots’ skills on offer. The aim of the game is to collect 3 hidden objects in each level before progressing as quickly as possibly to obtain the maximum score.

Each of the three playable robot characters have their own unique abilities. And each ability becomes more useful than others throughout the game.

There’s a variety of ways a robot can die: it can run out of battery power and slow to a halt making movement near impossible, it can be hit by an enemy robot or laser, or simply fall from the platform into a void of terror (shown off screen).

Another cool feature in the game is a list of achievements (click on the trophy icon in the games main menu). There’s three rows to complete, and each row offers a cheat that can be enabled to make the game easier for super high point scoring opportunities. I had a lot of fun building this in!

We did some video and screen recordings of some testers playing the game and understood where improvements could be made. One of which was the difficulty in knowing which robot did what at the start. Therefore, I developed a tutorial level which guides the player through the controls and each robots abilities.

Scores are saved to a database for all to compete and compare with. Once you’re happy with your score, you can Tweet it for bragging rights.

We got a high scoring first for this project. Which was a relief as I spent many late night/early morning shifts on it!

Note that the game is made using Adobe AIR and exported as an swf compiled file which was fine for Facebook and web use at the time (we also published on sites like Kongregate et al). Therefore you can only play this on a non mobile device with Flash player enabled.

Features
  • 6x 2.5D parallax levels.
  • Custom sounds and music.
  • Scores saved to a database and displayed on a ladder board for each level.
  • Three robots, each with their own unique abilities.
  • Various enemies.
  • Lasers and particles!
  • Achievements and cheats.
  • Some game data stored locally for continued gaming.
  • Checkpoints, collectable objects and challenging gameplay.
Skills used

ActionScript 3Adobe AIRFlash BuilderFlixel

Works on

Web (Flash player required)

About Jumping Gene

I developed this 2D platform game in collaboration with a company that provided the graphics and content. The specification was to develop a branded 2D game for a company to use for an upcoming Facebook competition on their page.

The game contains 5 levels and plays in a similar fashion as the popular mobile app Doodle Jump. Except where Doodle jump is endless (as far as I’m aware - unless I was never very good at it!?) each level in this game has an end point.

Each level gets progressively more difficult and contains more enemies, less platforms to jump on and with bigger spaces between them.

The game is super simple to play, with just two buttons required, left and right on the keyboard is all you need to get going. The game contains power-ups as shown as coloured boxes - each offer a slightly different booster ability. To get maximum points, you not only need to reach the end of all 5 levels, but collect as much DNA and RNA as you can along the way. Its quite an addictive and challenging game, even though I developed it and should be a pro!

Note that the game is made using Adobe AIR and exported as an swf compiled file which was fine for Facebook at the time. Therefore you can only play this on a non mobile device with Flash player enabled.

Note 2.0: When you die or complete the game, it will simply display your final score in a new page. This was because it would have redirected you to the games competition entry page which no longer exists. Just click back and have another go!

Features
  • 5 levels, each becoming progressively more challenging
  • Multiple booster types
  • Different enemies
  • Collectable objects
  • Points scoring
  • Particles!
Skills used

ActionScript 3Adobe AIRFlash BuilderFlixel

Works on

Web (Flash player required)

About Nemonic

This was one of my first apps to go live and I learned so much working on it! Even though it was a while ago since I designed it, I still prefer its looks to some of the more recent projects I’ve worked on.

The project idea came about from a medical student (Alex Cripps) who I worked with to make the app a reality. His research project explored the potential for turning short term memories into long term memories through structured and timely learning recall methods.

I developed this app in a way to be super simple to use and meet this specific purpose. It encompassed a dedicated schedule and calendar of events. Where the user would input what they learned by providing a title along with some descriptive text. The text could be something detailed or as simple as a few bullet points simply to remind the user what to read through (e.g. their handwritten notes or pages from a particular textbook).

An important part of the app is to allow the user to set regular recall times. This takes the stress out of remembering to recall some important information later. When set, if using the mobile app version, the user will receive a push notification at that time (the app will remind the user daily at that time). If they requested email notifications instead (or as well!) then they will receive an email containing a list of recalls for that particular day (if any).

The app works from a specific recall schedule, so when a task has been input, the app will then use this schedule and know when to remind the user to recall the task. Once the recalls have been completed 5 times - the user has completed that task, and in theory, stand a better chance of being able to recall this information later on.

I added a few gamification elements to the app too. There’s a dedicated section which shows the user their progress through trophies. Some are easy to obtain and others will take some time to achieve. E.g. completing your first recall and using the app for 10 consecutive days. This also works as an on boarding experience to the user. It makes them aware of some important features in the app as well as a simple way to visualise their efforts.

Features
  • Push notifications (customisable)
  • Email notifications (customisable)
  • User registration and login
  • Responsive to display on all screen sizes
  • Calendar display showing upcoming recalls
  • Learning theory information
  • Create, edit, delete tasks to be recalled
  • Simple swipe to update recall
  • Ability to search all recalls
  • Gamified trophy section to completing set tasks in app
Skills used

Agile KanbanAJAXGitHubHTML5JIRAJQueryMySQLPhoneGapPHP

Works on

AndroidiOSWeb

About Peninsula Communication Skills

This app was one of the simpler apps I developed but is one of the ones that gets used the most! It contains a series of vignettes, each of which contains a few MCQs and videos showing bad and good practice relating to the subject (the good videos carry a serious message but some of the bad videos are quite comical and includes some fantastic acting, you just got to check them out!).

Each vignette contains randomised answers so the user doesn’t simply remember A, B, C etc as the correct answer. Each question might have more than one correct answer and the user must achieve 100% success in the vignette in order to complete it. Its actually quite challenging! Each successful vignette will be displayed with a green tick icon overlaying it. Once all vignettes have been completed, the user will be able to input their name and download an individualised certificate of completion that they can print and frame, tweet, or just keep it on their phone for future bragging rights.

The app is responsive and designed and developed to function across all resolutions. Unlike most of the other apps I’ve worked on, this one didn’t require user registration of login functionality. It uses local storage in the app to track progress and includes some custom Google Analytic events to track particular events such as completion rate, time in each vignette and certificate downloads.

Features
  • Responsive design.
  • Customised and exportable certificate of completion.
  • Vignette series including videos and MCQs.
  • Offline use with prompts to user when requiring to be online to watch videos.
  • Custom Google Analytic tracking.
  • Video look and functionality customised via the YouTube API.
  • In app completion tracking.
Skills used

Agile KanbanGitHubGoogle AnalyticsHTML5JIRAJQueryPhoneGapYouTube API

Works on

AndroidiOSWeb

Peninsula Professionalism Rating screenshot
About Peninsula Professionalism Rating

The brief for this app was to provide a simple and effective way for students on the Physician Associate course at Plymouth Medical School to be able to provide professionalism rating for each other.

The app needed to be quick and easy to see with minimal learning curve to get up and running using it. The data needed to be secure and anonymised as well as function offline as much as possible as it will be used in some locations that don’t have good or reliable internet connectivity.

I went for use of two bold colours for the design of this app and I really like how it worked out. I even hear people talking about the ‘yellow and purple app’ and I know they’re talking about this one! I’d also like to add that from a UX point of view, I wouldn’t normally create a slider with no value or title along with it like this app doesn’t have - there’s a specific reason for this from the project leads so I developed the slider to their requirements.

Whilst the app itself looks super simple (and it is), most of the complicated coding under the hood stores data for input and also anything the user creates until it can be synced later if no immediate internet connection was available. It makes use of this auto sync function two ways: it will check for new content to load into the app such as timetabled session information and will also send professionalism ratings written by the student to the server.

Some other cool things it does to speed things up is when a student opens the app, it will automatically display the most recent timetabled session in the user input as this is the most likely session the user will want to provide a rating from. Otherwise they can write their own or pick from a list as they type.

Features
  • Responsive design.
  • Offline use.
  • Two way auto sync.
  • User registration and login.
  • Ability to update user information.
  • Automated session information input.
  • Information displayed about creating professionalism ratings.
Skills used

Adobe XDAdobe IllustratorAgile KanbanAJAXGitHubHTML5JIRAJQueryMySQLPhoneGapPHPSASS

Works on

AndroidiOSWeb

About QuizIt Champion

QuizIt Champion was my first mobile app (released in 2015) made available for public use, and it has a crazy number of features which gamifies the app. It started as a small idea I had which led me to submitting an application for funding with the Higher Education Academy which I was successful in obtaining!

I had the idea as speaking with students - they’re a competitive bunch, and they like MCQs and using apps. So I figured why not put all this together!

I wanted to offer a platform where students could create their own questions, adding their own answers, feedback and keywords. I didn’t want the app to just be another curated list of questions that are interesting but not quite specific to what students are actually learning. So this app was designed to allow students to write questions about what they’re learning/studying as they go for others to answer and do the same.

I also knew that the app would need to automatically handle this content and try and display to the user questions based on their interests but importantly, it also needed to filter out questions flagged as inaccurate or generally bad.

I developed an algorithm which did all this but also figure out the difficulty of each question after it has been answered a sufficient number of times so the user knew how difficult the question might be. Another reason the difficulty is important is due to gamification in the app…

The app has gamification elements everywhere! Simply creating and answering questions gives you QuizPoints, but also rating a question with a thumbs up or down or following other users in the app provides points too. QuizPoints are weighted depending on difficulty too and when answering questions in the QuizMix section of the app, the user can gamble points earned if they’re feeling confident in answering correctly. There’s also leaderboards for action undertaken in the app such as questions created, answered etc. These are shown globally as an individual but also in your institution. E.g. in the app you can input a team name, and if others are in the same team then all your points get tallied up and shown in the leaderboard. This offers some seriously competitive competitiveness in the app amongst students between groups but also between universities!

I had a lot of fun developing this app and would like to enhance it further given the time.

To read more about the project, check out some of my blog posts:

QuizIt - How to find a question and how keywords/tagging works

QuizIt - Push notifications... sort of

QuizIt - Rating a question good or bad

QuizIt - Question rankings and how they work

QuizIt - Life and death of a question

QuizIt - Gamification rules! Here’s what QuizIt has to offer

Features
  • User registration and login.
  • Push notifications.
  • Ability to create questions.
  • Ability to answer questions.
  • QuizMix section specific for earning points quickly.
  • Sections for answering rated and unrated (new) questions.
  • Global and institutional leaderboards.
  • Auto filtered questions based on responses (e.g. negative rated questions - on average must be edited before going public again).
  • QuizPoints tracked and earned throughout the app.
  • Searchable questions from keywords and #’s used.
  • Ability to block users.
  • Ability to follow other users.
  • Ability to rate and comment on a question for feedback.
Skills used

Adobe IllustratorAgile KanbanAJAXGitHubHTML5JQueryMySQLPhoneGapPHPRedbooth & JIRA

Works on

AndroidiOSWeb

Checkout some of my projects below

globus

This app has a bold design and is simple to use. It offers patients with Globus Pharyngeus the opportunity to track their progress to discuss later with their consultant.

The app revolves around a bespoke calendar for tracking and inputting progress and will notify and remind users to not forget to do this regularly.

Globus Pharyngeus phone and tablet image
nemonic

Mobile app which takes the stress out of revision by utilising a specific learning theory technique to remind the user at optimum intervals to recall a task they previously input into the app.

The app makes use of push and email notifications to remind users to recall a task. The app also includes a light sprinkle of gamification to help a user learn how to use the app and bragging rights among their peers.

Nemonic phone image
QuizIt

This app contains lots of gamification throughout! Users can create their own questions for others to answer, as well as answer and rate other questions for QuizPoints.

The app uses its own method of showing the most relevant and highest rated questions, as well as displaying leaderboards for individuals and teams to compete with.

QuizIt Champion phone image
comm skills

This light but influential mobile app offers 6 vignettes with content consisting of videos showing good and bad practice as well as MCQs the user must get 100% correct in order to achieve a customised certificate.

This app has become popular amongst medical students not only for its content, but for its ease of use and pick up and play that it provides.

Peninsula Communication Skills phone image
iCARE

2D interactive comic book style game with an engaging and branching storyline.

Developed for a unique project distributed in Sierra Leone, this project provided many challenges and rewards from start to finish.

iCare tablet image
jumping gene

This engaging 2D platform game contains 5 levels and was designed and developed for a company hosting a competition on their Facebook page.

The game is pick up and play but gets progressively difficult quite quickly. The challenging nature of the game is what also drives its appeal to play again.

Jumping Gene screenshot
pro rating

This app is specifically built for the Physician Associate course at Plymouth Medical School, and offers them the ability to provide each other with anonymous professionalism ratings.

Its ease of use and auto data synchronisation makes it a simple tool for gathering feedback.

Professionalism Rating phone and tablet image
interchange

This game was developed for a game design module during my degree. It includes 6 levels and allows the player to switch between three robot characters that each have unique abilities that make certain actions in the game easier (or harder).

Interchange screenshot
eBook

This eBook contains 343 pages of content with 19 sections - each with a different author, making it a challenge to develop a consistent theme and style.

This book is version two of an existing publication which contains some important updates, additions and visual appeal for distribution on high resolution screens.

Plymouth Clinical Manual eBook screenshot