Work
Selected Projects
Selected Projects
I'm a passionate Visual/UI designer with 12 years’ experience designing for web and digital. I specialise in ecommerce, producing visually beautiful, usable design work with a strong appreciation of customer/user journeys, UX, typography and layout, iconography, illustration, motion, branding, wireframing.
I am dynamic, collaborative, a good listener and excellent team player who enjoys pitching ideas and concepts, iterating designs and inspiring others working on a project. I’m currently open to fresh opportunities in UI/UX design to continue my growth in this area.
A complete microsite serving the primary school sector, marketing I.T. solutions and classroom improvements. Includes case studies of schools that have benefitted from bespoke classroom I.T. solutions by PC World Business / Dixons Carphone support network. Designed 'mobile-first' to be scalable as it grows over time, and easy to use on different devices.
The user/customer experience was defined in the flow from page to page, and also through on-page navigation.
I wanted to clearly guide the target end-user in such a way that they wouldn't hit any stumbling blocks or complexity while digesting so much technical information.
The microsite helps primary school teachers to decide on what technologies to equip the classroom with - for example tablets and apps, smart tables
From a business perspective the site was more about generating enquiry and trust, bringing on new customers through guidance and a little persuasion rather than hard-selling. To achieve this I ensured that a method of enquiry was always there on the page, and that sub sections were interlinked to simplify the experience and remove possible confusion with other sections.
Several interface solutions were employed to help sidestep any pain points associated with displaying lengthy technical jargon. These kept the final design simple, navigable and visually pleasing - and included accordions, video windows, section-specific navigation/dropdown menus and contact forms that were easy to find and generate enquiries from.
A promotional hub on Currys and PC World that served as a starting point for shopping the full range of Canon digital cameras, camcorders lenses and printers.
PC World Business and Lenovo have a strong relationship and needed a brand shop for business customers to learn about the extensive range of Lenovo laptops, desktops and all-in-ones/convertibles.
I worked with Lenovo's representitives to identify any changes in brand and put together a shopping journey on PC World Business which faithfully represented the Lenovo product family.
I gave design guidance on layout, navigation and usability best practice to all parties involved. This helped to keep things simple - such as suggesting to reduce the amount of copy and using visual cues to guide users down the screen. I then formulated a template that included Lenovo branding along each step of the user journey up until the product detail screens. This included a home screen, landing screens for desktops or laptops and listings results screens which included navigation to the previous steps. There has been a continuous uplift in Lenovo computing sales a year on since the microsite launched and Business advisers have used the tool successfully to pitch bulk Lenovo sales to its SME business customers.
I managed the layout of the homepage for 3 years, testing layout changes and new interface elements to enhance the overall shopping experience.
In the above iteration I implemented a new set of brand guidelines from an external branding agency, without losing much of the existing layout. The new guidelines included a change in the tone of voice, putting the customer right at the heart of each message.
Technically this page consists of a very basic slider which doesn't slide uncontrollably, and a grid layout of proposition-led marketing banners linking to microsites and other sections of the site which I designed or managed the design of.
Product listing with quick view
One of the pain points along the user journey - reported by a significant proportion of business users - was the previous signup/registration process. There had been a copious number of fields to fill in, marketing tickboxes, jargon etc, which was off-putting for new and existing customers, and causing drop-off rates - not to mention loss of sales.
I worked with the wider UX team to find a solution that would simplify the process and de-clutter the forms to make them more user-centric. After gathering research I created a simple presentation outlining the key concerns of users and how I would improve this area of the website, then created lo-fi wireframes (using Balsmiq Mockups) to visualize the new flow. I researched best practices for ease-of-use and accessibility.
The decision to implement a mega navigation system was based on an understanding that multiple-level dropdown menus on desktop are a known frustration. They are historically hard to use especially if deep subcategorization is present, and might challenge accessibility in some cases.
From a technical viewpoint I looked into hover menu best practices, ran a competitor analysis and documented what I'd discovered on the subject so it could be passed around to various stakeholders.
I picked up various tricks from the likes of Amazon and even the original Apple Mac (solution discovered 30+ years ago). From these learnings I was able to recommended the use of JQuery 'HoverIntent' to handle a specific user interaction quibble - users will mouse across a menu bar en-route to somewhere else, but won't necessarily want to open a large mega menu - so we tested out a 0.5sec delay which mimics the user's intention - only opening the menu if they're expecting it to do so, based on cognition.
When testing it without a delay, the menu became a source of frustration because it would fly open without warning. This cornered users, forcing them to make much larger mouse gestures in order to get out of such a large panel. I have found this to be a fairly common mistake in mega menu implementation which may fail to deliver improved UX unless done correctly.
Post-launch there were still contextual issues and work to be done on the IA side of things - which was more associated with the platform and categories than the front-end. The main snag was when some categories had fewer subcategories than others, leaving pockets of empty space to be filled - although only a cosmetic issue, not a showstopper.
In addition to being more structural, mega menus create plenty of room for banner advertising - with proven click through on 'feature' type small banners, which I positioned in their own column to the right in the designs.
When I was first brought onto this project I hit an initial snag: no documentation, no CMS, no in-house
developer to explain how any of it worked. Written in a completely unheard of programming language - the only person with any basic knowledge was one of the previous senior designers who had passed it over to me within half a day or so and said to contact the original developer for more info. When I did, they said there was no documentation as such.
This sparked something in me - how many times do we enter a new system (be it company or commercial software) and have to pick it up without any instruction? I knew for a fact this wasn't my first time. So from then on I began to consider User Experience Design/UCD in a different light - not just that of a product end user, but that of someone trying to get their job done efficiently in order to produce quality experiences for the end user.
After several months of struggle and learning piecemeal from a remote backend developer, I started documenting every little tip I'd picked up and compiled these into a handbook. Because the language was so unusual I found it really helpful having a set of pages aimed at stamping out known usability issues with the website backend (or lack of). It was a proven success - even if only on a very small team level, colleagues said it was very easy to understand and pick up in the event of an emergency, even though none of it fell into their usual daily work remit.
Since I wrote much of the design specification for the new (responsive) website, following its relaunch I decided now would be a good time to publish the handover internally. The documentation consisted of essentials such as how to get started from scratch via GIT repositories and SFTP; to simple instructions on understanding the unusual programming language in which the site was built, setting up and reusing UI templates, project code and imagery/typography.
I also considered the environment and saving paper, so I packaged it up in the form of a portable microsite on the company's network drive. This was far more beneficial for any new developers as they could copy and paste valuable snippets of code and other unique info from the guide into their own projects, thus future proofing the website while passing along important intellectual property.
A full-cycle, end-to-end project. PC World Business required a new website to meet the increasing demand from its mobile and tablet B2B users. Also of high importance was maintaining a consistent user experience for new business customers coming in from Currys and PC World's responsive websites.
The existing desktop-only website had poor conversion and user experience on mobile/tablet devices. Shopping the website on mobile was a sluggish and left business users with only one option - to pinch-and-zoom, and likely give up in the process. I worked with the ecommerce team to consult on UX design issues and helped to put together a business case for a responsive shopping site.
I redesigned the UI so it was 'mobile first', cleaning up the customer journey with particular attention to the registration, basket and checkout areas - known areas where conversion might have been suffering due to underlying user experience issues.
I achieved this by communicating clearly with stakeholders and developers, written documentation and by helping to organise a schedule with any additional resource needed to deliver on time.
