A miscellaneous collection of user interface design work. 

Context

During employment at Persistent Systems, India

Timeframe

1 day-2 weeks for each project (2016- 2017)

Tools

Sketch, Illustrator, Photoshop,

Invision

Role

Visual design, interaction design

About

This section includes some of the work I did as a UI Designer at Persistent Systems, India. I created visual systems and high fidelity screen designs from wireframes for digital platforms on different devices including desktop, mobile, and tablet. I created visual interactive touchpoints that would take the user through their journey as intuitively as possible.

 

 

I worked on defining the look and feel of products by creating a consistent design language and laying out visual elements according to it. My job was to visually communicate the path that the UX designer had laid out by creating a cohesive style guide that included the typography system, color palette, icon family and all the other interactive and aesthetic components. By using visual design principles like balance, contrast, emphasis, proximity, alignment I created designs that supported and enhanced the functional value of products while making them delightful to use. 

 

 

For some projects, I was involved in the UX design process as well. For others, I collaborated with experience designers to understand the product I was designing for. I tried to understand how it fits into a larger ecosystem while also learning about specific user motivations and goals that they would want to achieve by using the product. Once the high fidelity mockups were created, I passed them on to front-end developers along with the redlines and co-ordinated with them to ensure that the design was implemented correctly by them in code. In some instances, I created interactive prototypes to demonstrate the user flow and the different states of the interactive elements.

Data Management Application

A desktop application for data management in large organizations, that assists back-end users to manage and categorize information in a way that makes it easier for them to access and manage information whenever required.

The Challenge

To create a visual design concept for the existing dashboard; to add a ‘wow’ factor while maintaining the current functionality and ease of use. 

Old dashboard

The Solution

Redesigned dashboard

• The four sections were color-coded so as to easily distinguish them from each other while adding an aesthetic appeal. The color palette was made brighter while retaining the sophistication.  

Tints of the base color were used in gradation, inspired by current visual design trends.

• Icons were redesigned to make them more relevant. They were enlarged and cropped, used subtly in the background so as to make the typography the primary visual element.

• Large, light weights of the typeface were used to add a modern touch.

Business Messenger

A business messaging app primarily used for sending and scheduling messages and e-mails along with creating and managing contacts, groups, and chats.

The Challenge

To re-design the existing mobile application according to the latest visual design trends.

Old designs

The Solution

Redesigned visuals

As gradients have a better recall value than flat colors, and also because they are a current design trend, a custom gradient was used.

• Different levels of opacities were used in the hamburger menu to create a layered effect. The text was given a shadow for better readability.

Overlays were given a blurred, hazy treatment to give the content all the focus, a visual treatment inspired by common iOS design practices.

A full-blown image was used for the contact information screen and for the background of the hamburger menu to make the application visually appealing. 

Application for Property Evaluation

A desktop and iPad application that is to be used by employees with varied job roles and tasks in an organization that carries out property evaluation. 

The Challenge

To create different visual design approaches from the wireframes of the application by using the existing brand colors. For one chosen theme, create high fidelity visual design mockups for multiple desktop and iPad screens for different stakeholders using the same platform.

Wireframe

The Solution

Visual design approach-1

Visual design approach-2

Visual design approach-3

Visual design approach-4 (chosen approach)

Final Outcome

UI design /

Copyright © 2019 Khushi Shah