UX Portfolio by Sanil A. Patel

Sanil A. Patel | UX Portfolio

Hello I am Sanil Patel A great passion of mine is UX. It's what we need in our everyday lives and I feel I can make a real diďŹ&#x20AC;erence in the world. I want to continue developing my skills as UX designer and continuously absorb knowledge. I love spending time with family and friends, working on graphic design and making the most of my time. Moreover, I always look ahead to a personal goal. I completed a solo skydive jump and conquered Mount Everest Base Camp for the charity Help for Heroes, raising over ÂŁ3,500. Looking forward to what's next...

SketchTank

A new website based on UX Illustrations and visual thinking

The brief

Brainstorming session

Amberlight wanted to take their graphic facilitation and move it an independent brand which could bring in business from a non UX perspective. The task was to design a website solely focusing on illustrations and visual thinking.

With UX consultants and myself, we brainstormed some ideas and designs on the potential navigation, look and feel of SketchTank. We went through a process of looking at existing website and what they did well and implemented the logic into the design. Moreover, we did basic active testing with potential users and implemented the improvements.

(I was a part of creating iconography and branding).

The core of the website The design was aimed to be simple that conveyed visual information and a description for each service we provide. We split this into two categories; Communicating Visually & Visual Workshops.

Wireframes Some of the ďŹ nal wireframes are shown on the right. We went through an iterative process using Amberlight consultants to improve usability and accessibility.

Home SketchTank logo Menu bar Tag line Client logos

Animations and transitions To improve the human interaction, I added animations and transitions in areas where users would interact. These give better conďŹ rmation on what the user is browsing on the site.

Services logo and info

Hover animation Examples of work

Social media

As the user hovers over the image, a white translucent layer appears on the top (250ms transition) which indicates they can click on the image.

On click animation

Services

Sub service and info

When the image is clicked, a small indent will appear for one second to indicate the image has been clicked on, conďŹ rming the user is progressing on their journey.

A subtle fade transition would be used when the user moves onto a new page, giving a sense of ďŹ&#x201A;ow during navigation. These transitions were used sparingly as over usage would deter the user.

Final visuals

Check out the beta prototype built on Wix - www.sanil47.wix.com/beta

Mobile

‘Homepage’ VISUAL THINKING

COMMUNICATE VISUALLY

VISUAL WORKSHOPS

ABOUT US

BLOG

CONTACT

VISUAL THINKING

COMMUNICATE VISUALLY

VISUAL WORKSHOPS

ABOUT US

BLOG

CONTACT

Simplfy & Visualise complex information

Live

We use visual thinking, graphic facilitation and illustration to help you create, capture or convey ideas and information. A way to communicate in extraordinary and unforgettable ways.

Animated graphics

Business process maps

We can help you run more effective and engaging workshops by incorporating fun and visual thinking to unleash the participants’ creativity.

Personas

Posters and Rich pictures

Presentations

Standalone Illustrations

Storyboarding

We can help you run more effective and engaging workshops by incorporating fun and visual thinking to unleash the participants’ creativity.

Communicate visually

‘Communicate visually’

Customer experience journeys

Infographics

Live scribing

Simplfy & Visualise complex information We use visual thinking, graphic facilitation and illustration to help you create, capture or convey ideas and information. A way to communicate in extraordinary and unforgettable ways.

Visual workshops

We can help you run more effective and engaging workshops by incorporating fun and visual thinking to unleash the participants’ creativity.

Communicate visually Business process maps

VISUAL THINKING

COMMUNICATE VISUALLY

VISUAL WORKSHOPS

ABOUT US

BLOG

CONTACT

VISUAL THINKING

COMMUNICATE VISUALLY

VISUAL WORKSHOPS

ABOUT US

BLOG

CONTACT

Personas Personas are fictional characters created to represent the different user types. They are useful in considering the goals, desires, and limitations of users in order to help you to guide decisions about your service.

They provide tremendous structure and insight for your company. It will help you determine where to focus your time and allow for alignment across the organisation. As a result, not only would you be able to attract the most valuable customers, but also tailor you service to your target audience.

What is it? The method of using images as tools for communication in order to create discussion, recall memories, find solutions and visualise connections and ideas, is widely known as ‘visual thinking’.

info@email.com 0123 456 7890

Graphic Facilitation Whilst visual thinking is the method, ‘Graphic Facilitation’ is the process of taking information from a meeting, conference or workshop and transforming it into something visual, organised and memorable.

info@email.com 0123 456 7890

Illustrations As a creative discipline, illustration is a unique art form defined by purpose and context, not media. Whether digitally or by hand, an illustration can be both a work of art and a practical business application.

Content and Copy The content was written by myself and a illustrator who worked on majority of the projects used on the website. Together, we were able to create friendly content which enticed potential customers and clients by showing the beneﬁts of communicating visually.

Amberlight Website Redesign

A responsive re-design of the Amberlight website

Moving forward with the project

The brief The current Amberlight website is dated and they wanted to new image to refresh themselves. Moreover, this meant new services were going to be added and a new perspective for the website needs to be considered. Problems The overall design is dated with the shapes being rounded oﬀ and not keeping a family set of icons. It instantly gave a ‘Year 2000’ vibe. Navigation The navigation was too complex and the information presented was overwhelming. The information can be condensed and some instances, information can be removed. Content The content was too technical for someone who didn’t understand UX principles. This was designed by a UX consultant therefore it lost the element of an outsiders perspective meaning users would feel lost when looking for information or a particular service.

“It needs to be responsive” -everybody in the project

We agreed to hold a workshop with the CEO, the UX principle consultant and the illustration team to create low ﬁdelity wirefames to understand the new navigation system and how we are going to present the information. Using the ‘Mobile First’ approach, we came up with some concepts.

Wireframes and development Home

Sub service

The homepage has direct access to all the services and links you to more information Amberlight upon arrival.

The services are split down and iconised to understand the UX terminology better.

The maps are customised to the Amberlight brand and the details are overlaid to direct the user easier.

The labs and mobile labs show images of what they can oďŹ&#x20AC;er and downloadables are available on more information.

Team

Team (within)

Blogs

The photos of the employees are bright and distributed with space so all the photos do not become overwhelming to the users eye.

When clicked on an employee, a large, detailed image shows with a small friendly bio, humanising the company.

The blog is more visual showing the related image the same size as the information.

SketchTank

A sub website (SketchTank) is shown on the page with a few examples, drawing the attention and making the user want to visit the page.

Labs

Our clients

The clients show Amberlight are serious about their work. International capabilities are also shown by a infographic. Blogs (within)

Within the blog, the search bar is easy to locate and sections are divided better for optimum searches for blogs.

Final visuals The designs were prepared for the developers (to their format). We created duplicate pages which included any animation/interactions we speciﬁcally wanted.

Home

Services

Clients

Team

Blog

Contact

Home

Services

Clients

Team

Blog

Contact

How can we help you optimise?

We help you understand your customers & design great experiences

We help you Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut

We deliver insights & advice at every stage of the product/service life cycle

understand your customers & design great experiences

There was conversations over Skype about design choices but all this was communicated over the designs and annotations created.

We deliver insights & advice at every stage of the product/service life cycle

and eﬀective

Understand what your customers are looking at, to ﬁnd areas that need to be optimised

We deliver insights & advice at every stage of the product/service life cycle

Blog

UX & Accessibility audits

The great and amazing blog titles goes here

We help identify actionable takeaways and a plan for

Joe Bloggs 25/09/15

improving your product and ultimately, increase conversion

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

Web analytics

eiusmod tempor incididunt ut labore

and many more...

Understand the behaviour of your visitors to assess and improve the eﬀectiveness of your service

What we do

Social media analysis A way of capturing insight into how consumers view a product or brand and how this may change over time

Innovate

Design

Optimise

Discover products and

Design products and services

Understand how customers

services your customers

that are easy and more

use your products and

really want with research

delightful

maximise ROI