One of the most challenging projects I worked on whilst at Contactually was the complete redesign of the application's central hub - the Dashboard.
It's the first part of the product a new user sees after signing up, and one of the most important in the day to day use of the application. I set upon completely reworking the interface and adding in new functionality that would make the product feel more intuitive and easier to use.
The main goal of the project was to bring the interface up to date whilst simplifying the consumption of the vast amount of information displayed.
This screen shows three states of the same prompt. The idea was to allow the user to quickly add notes, tasks and previous interactions directly from the dashboard.
Upon clicking the 'Snooze' option on a follow up prompt, the user is shown several options regarding the length of time they want to snooze the prompt for. This was achieved with a subtle fade animation over the existing prompt.
Composer & Magic Snippets
As part of the Dashboard redesign, I was also tasked with improving the flow between a user being presented with a follow up to complete, and actually getting the user to write that message. I redesigned the composer from the ground up with custom iconography and the inclusion of the universal contact sidebar. The sidebar was accessible whenever a user needed to compose a new message. It gave them insight into their relationship with that contact and access to the contact's information. I also built out design for 'Magic Snippets' that would suggest to the user good ways of opening communication with their contact.
During my time at Contactually, one of my main accomplishments was redesigning their iOS application. Although they had an existing one, it was missing a bunch of features, was difficult to use and due to the fact it was comprised mainly of out-of-the-box Apple Developer elements, it was visually, very different than it's desktop version.
The main goal of the redesign was to create an application that would better compliment the desktop product and allow our users to take their contact database and information on the road with them.
I started with simple wireframes outlining the basic functions that we wanted the application to support. I ended up creating a 'Newsfeed' approach that showed our users their daily tasks, and the people they needed to contact that day. Combined with simple, well-established interactions it became a powerful, fun-way of using Contactually, and one with the flexibility to support future dashboard items moving forward.
Being able to impact so many users' day to day lives in such a positive way is by far my biggest achievement in my career. I was delighted to see this project through from start to finish. (It's never finished, we know that, but you get my drift!) I was responsible for all design work including the UX Design, UI Design, Iconography within the application and the iOS Application icon itself.
A view of the main Dashboard, an easy way for users to check their daily tasks (top) and their follow up reminders.
A global, omnipresent 'Add' feature that I built out, to allow users to quickly add contacts, tasks, notes and interactions to their account.
The contact profile screen allows a user to view all contact information relating to the selected contact, including recent activity (emails, sms, phonecalls), notes and tasks.
A series of illustrated steps I created to help walk users through the 'How it works' of the app, and the main features it has.
Distromatic is a company based in the US. They approached me early in 2013 to help with the branding and creation of a one-page website. Not only was I responsible for designing the visual elements of the site and creating their brand, I also handed coded the design into a fully responsive, retina-ready webpage. The site is coded using HTML5, CSS3 & jQuery.
Distromatic is an agency that specialises in browser extension development and distribution. Their small yet diverse team has helped major internet brands for nearly a decade to create better browser experiences and reach over 100M internet users around the globe.
Website designed using Photoshop CC and Illustrator CC. Hand-coded using HTML5, CSS3 and jQuery. The page is fully responsive, retina-ready and uses a scrolling-navigation jQuery plugin.
Distromatic.com - Amazon Case Study
Different section of the web page. All Illustrations on this page hand-drawn in Illustrator CC.
Completely bespoke Illustration, designed from concept to completion using sketch work and Illustrator CC.
Logo created in Illustrator CC and Photoshop CC.
I started work for the guys at Socialite towards the end of 2012 when they first joined Techtopia. They needed my help sculpting their new brand and iOS Application.
Socialite revolutionises the way users keep track of events. Be it Sport, Music, Television, Films or Games, Socialite organises every event into a simple, clean, Twitter-like Newsfeed. It ensures that users never miss out on anything, by adding new events and updating dates and times automatically.
Socialite has been by far, my favourite project to date. I was involved from the very start of the project, helping plan the User Experience, designing the iOS icon, producing the User Interface and creating the website.
This is the main section of the App where all of the events the user has subscribed to, will appear. The screen was created using Photoshop CC and the icons were hand drawn in Illustrator CC.
Expanded Event, Sidebar & Welcome Screen
These are 3 more screens from the Application. Created using Photoshop CC and Illustrator CC.
Live version of the Interest Catalogue where the user can subscribe to a range of events, from categories such as Sport, Films, Television, Gaming and Music.
Official Logo for Socialite, custom typeface designed in Illustrator CC.
How it started...
As soon as I discovered Bark.com, I was instantly impressed with what they had created and I continued to follow their progress for a number of months. When I heard they were looking for an overhaul of their User Interface in late 2013, I jumped at the chance to create some mockups for them.
Whatever the user needs, Bark finds and contacts companies who can help them. The user creates a 'Bark' to describe what they want, the team at Bark then finds and contacts suitable companies based on the user's request. The user is then able to browse a number of companies directly from their Bark account. It's then simply a case of choosing which company they want to use.
All content for these mockups came directly from Bark and was used on a previous iteration of the homepage. I simply took the content they had and created two mockup pages for them, as well as a refined Logo.
Website designed using Photoshop CC and Illustrator CC. Content provided by Bark.
Barks just posted.
Close up of 'Barks just posted' on the homepage mockup. This section shows the latest 'Barks' created by the users, along with location, budget and timescale.
Bark.com - Logo
A refinement of the company's existing logo. The work was produced using Illustrator CC.
CopyPress approached me towards the end of 2013 to help with the creation of their brand new landing page. The new page was to be accompanied by several web banners that matched the style, and narrative of their new marketing concept.
CopyPress is an all-in-one solution for Content Marketing Management. It allows users to view metrics for their domains and competitors, and manage digital media and content creation. Within the neatly packaged web application users are also able to build valuable connections with publishers, and curate content to increase it's reach and efficiency, all with the end goal of converting readers into potential clients/customers.
I was fortunate enough to work with a great Copywriter and a well-prepared brief that gave me lots of ideas that enhanced my creative license. As well as adding my own concepts to the project, I also created a refined version of their company logo.
The mockup was created using Photoshop CC. All Icons and Illustrations were hand-drawn in Illustrator CC.
Close up of Walkthrough Videos
This is a close up of the 'Live/Recorded Walkthroughs' section on the new Landing Page. I wanted to move away from the seemingly standard method of embedding each video next to one another, and therefore created a 'Windows 8' inspired module arrangement. Upon clicking one of the videos, the modules would scatter to the side allowing playback to take place in the centre of the screen.
Twitter feed/Sign-Up form
The last few sections on the Landing Page. Custom Twitter feed with background image made up of Followers. All designed in Photoshop CC.
My re-work of the CopyPress logo created using Illustrator CC.
Safer Technologies approached me to help with the branding and web design for two of their latest products.
Safer Browser is a browser based on the Chromium platform that is jam-packed with features to help the user surf the internet with peace of mind. The ‘safer’ technology will alert the user when visiting unsafe websites and ensure that their computer encrypts their internet connection whenever possible. Combined with advanced Parental Controls and Web Of Trust integration, Safer Browser is the fastest, most secure browser on the market.
Safer Wifi is a robust VPN Client that alerts users connecting to potentially insecure Wifi networks and provides a free and fast VPN connection to increase security and privacy.
I was lucky enough to work on the creation of both product icons, as well as the Safer Technologies website, and product pages. I was also responsible for the UX and UI design of the Safer Wifi VPN Client.