Mark Humphreys' Portfolio

MH UX Design Ltd

Set up in 2021 as a UX/UI/Design house to enable me to contract, as well as provide web design services to small and medium sized businesses. MH UX Design Ltd offers an end-to-end service from initial conversations and workshops, through wireframes and designs, to implementations, testing and hosting.

We utilise a variety of technologies to achieve this - Adobe XD to build wireframes, Adobe Photoshop to create graphics and visual elements, VS code to build and deploy and GitHub and Microsoft Azure to source control and host.

Please contact me for any more details and screenshots on any of the projects on the upcoming slides, and click the arrow to the right when you're ready to look at some of our work.

Microsoft Azure GitHub FontAwesome VS Code Adobe XD Adobe Photoshop

The Wheeler Estate

A catering company based in Newdigate, Surrey, The Wheeler Estate is a successful business but with a web presence that was sorely lacking. From initial discussions with owner/manager Chris, it was agreed that the site was not showing the company in the light it should have.

Testimonials were not highlighted in the way they should be, the food imagery was poor, and there was no contact form to enable prospective customers to message the company easily. On top of this, the general design of the site was outdated and needed some serious TLC.

We created the designs in XD, and received feedback from the team at The Wheeler Estate. From this, the build was started and we used FormSpark to manage the submitting and management of the contact form. We've also leant heavily on google maps integration to show areas that are supported, and highlighted individuals in the fantastic team at the company.

We're currently going through the UAT process with The Wheeler Estate and hoping to go live soon!

All Round Gardening

A small landscape gardening company based in Effingham, Surrey, All Round Gardening previously had no web representation, and was running through a paper notebook and the owner's mobile phone number. They didn't even have a logo (something which has become important as they are currently planning to brand some work vans and produce some promotional materials).

Utilising Adobe XD to create some site designs and Adobe Illustrator to create logo designs, the project is still currently in the early stages (hence the temporary logo in the designs you can see here - the owner didn't want me to display the logo we're close to finalising with him on this site), we've also been advising the customer on how to set up businesses in google to show available work areas on a live map, and providing photography services to show the great job they do on customer gardens.

CAMUS Productions

A historic and well respected amateur dramatics group in Camberley, Surrey, CAMUS had no web presence outside of a Facebook group and a WhatsApp group, CAMUS needed a way to both promote their organisation to prospective members, display useful information (song/cast lists) to members, as well as Call To Actions to audience members to purchase tickets to their next shows.

It was immediately apparent that due to the nature of their work, there was a trove of excellent imagery to highlight in a large hero section. We also hand built a contact form in PHP to enable people to contact their management team, and highlighted their recent past shows to give an idea of the type of productions a user can either see or become a part of.

Go to site

Wedding Website

I got married in March 2022, and needed a way to display information about the day to our guests, along with providing a form for people to RSVP, so built this single-page-site.

Designed in XD, built in VS code and deployed to Azure, it included a large Google Maps embed to show the location of the venue, along with a live count down to show how many days to go, and a simple RSVP form (with some snazzy custom radio button styling to allow people to say they can/cannot attend. Also some simple animations (using CSS transitions and waypoints.js) and some stunning photography (thanks to Caan at Defining Moments Photography).

Go to site

Silverbear Ltd

A market-leading membership management software company based in Guildford, Surrey, I was head of UX at Silverbear Ltd for 11 years. In this time, I was soleley responsible for all the look and feel across both the main product and all of our customer portals and events management booking journeys.

As every single customer portal (built using the DotNetNuke CMS and evocos events management software) was custom styled in such a way as to provide an experience that is as seamless as possible coming from their main website, this required both juggling of many active projects at any given time, as well as a full end-to-end service dealing with the customer and their requirements through workshops, through to providing wireframes and designs, considering and implementing feedback, building, and then UAT-ing and bug fixing.

Often we had to hit strict accessibility guidelines so I'm also very comfortable working towards WCAG guidelines.

On top of the customer portals, I also worked closely with the large development team at Silverbear to implement new tools and administrative features to enable our customers to get the most out of their CMS-driven portals, along with the back end of Microsoft Dynamics CRM.

During my time at Silverbear I implemented over 100 different projects and associated portals (and probably millions of lines of SCSS/JS/HTML!), along with a few customers who felt we worked so well together that they chose Silverbear and DotNetNuke to provide their main websites on top of their member portals.

DotNetNuke Microsoft Dynamics Microsoft Azure VS Code Adobe Photoshop FontAwesome

Silverbear.com

I was responsible for the design and implementation of the main silverbear.com website, along with providing the tools and assistance for our marketing department to update it. As the membership sector can be quite dry and stuffy (think old men in cigar-smoke-filled-rooms and you're not far off), we went for a light and playful design for the site. Lots of rounded corners, whites, light greys, and some bright colours to highlight areas. As the site covers so many areas (from our technology to our management team to news and updates to a selection of our customers), I gave particular attention to the sitemap and navigation so it's hopefully impossible to get lost down many layers of pages.

On top of this, I also implemented a members area, enabling our customers to log in and view training materials and guidance on how to use the product, along with easy access to the support system and a guide to upcoming features in future versions of the product.

Go to site

Silverbear.com Redesign

After a few years of use, we all felt that the old silverbear.com site didn't really reflect the company that we'd grown into, so I spent a lot of time designing and constructing a replacement. We employed an external marketing agency to come up with some new copy/taglines (empowered association), and decided to go with a more mature and upmarket feel to show the company we'd become, and the client list we now had. We'd also now been bought out by a parent company, meaning there were now many more layers of management and sign off needed, therefore although the site was up on a UAT environment and had been filled with content, it didn't manage to go live before I left the company, and they still haven't pushed it live as of April 2023.

FormBuilder

During my time at Silverbear, we developed many tools, both internal and customer-facing. One of the most powerful was Formbuilder - a powerful tool which allowed an administrator to set up a public-facing form for the end user to be able to submit data back to their record in CRM. It utilised a typeahead search and drag and drop functionality to add fields into the forms.

The tool consisted of 3 views:

  • Form management: (listing out all the formbuilder forms in the CMS), allowing the user to create, edit, copy, export (into a .CSV file) and delete these forms.
  • Form edit: (clicking into a particular form), allowing the adding/deleting of fields from CRM, along with setting them as hidden, mandatory and create/update.
  • Field edit: (as a modal popup window), allowing advanced functionality such as auto-completion, REGEX validation and pattern matching.

This was mocked up in Balsamiq following an information gathering process with our customers and built using HTML/CSS/JS before the development team implemented the back end.

Dublin Chamber of Commerce

A B2B networking and lobbying membership organisation representing over 1,300 businesses in Dublin, Dublin Chamber of Commerce were initially a customer of Silverbear solely for the self-service member's area of their offering, but the project went so seamlessly that they came back to us and asked for us to take control of their whole site.

This led to a complete redesign of their sitemap, a rethink of the different site journeys and Calls to Action, and a facelift of the look and feel. Due to the nature of their business, we heavily promoted their events and customised our evocos events management system.

Countryside and Landowners Association

A more typical Silverbear customer, Countryside and Landowners Association used our self-service member's area and evocos events management system to allow their members to book onto events, update their CRM record and apply for membership to the CLA. Happening at the same time as they employed an external design agency to redesign their main website, I designed and build a member's area/events layout in the CMS and styled the events listing and description to fit with the new brand guidelines.

Microsoft Dynamics CRM

As previously mentioned, at Silverbear we used Microsoft Dynamics CRM for a backed for our customers' (and their members') data. Often these views utilised out of the box styling, but for certain aspects of the business, we had to create and style custom tools for additional functionality.

A large part of this was the evocos events management system - an incredibly powerful piece of software to enable our customers to create, update, manage and promote events that they are putting on. Historically this was an entirely separate site, but we wanted to bring this inside CRM to make it easier for our customers. However, the codebase was incredibly long in the tooth, and so changing anything would have horrendous knock on effects on functionality so I had to write a huge amount of custom CSS and JS to enable styling it to fit in with the Microsoft Unified Common Interface (UCI) design language.