UI / UX Design Portfolio

Page 1


my greatest strength I feel, are my ability to grasp quickly the needs of clients, working style of an organization and my time management skills.

Hello!

I am Sanjana and I am all about design! I started my career a decade ago in India, and since then, I have also worked in the United States of America and Sweden.

Creating perfect experiences has always been a part of my work. The functionality that I strived to bring to physical buildings as an architect, I now bring to the screen in front of you.

I take pride in being able to create things that people can interact with and enjoy. Currently, I am open to taking on work and exploring the world of user experience professionally.

EXPERTISE

• UX Design

• User Interface Design

• Design Systems

EXPERIENCE

• Visual Design

• Atomic Design

• Information Architecture

ACADEMIC QUALIFICATIONS

SHORT COURSES

• Figma UI / UX Design Essentials

• User Experience Design Essentials - Adobe XD

• Webflow Essentials

Peckiiless, Göteborg, Sweden

UX & Graphic Design Intern

(May 2024 - Present)

Master of Science in Historic Preservation (MSHP)

University of Pennsylvania, Philadelphia, USA

August 2014 - May 2016

Kanozi Arkitekter, Göteborg, Sweden

Staff Architect (March 2022 - December 2022)

Atkin Olshin Schade Architects, Philadelphia, USA

Staff Architect (September 2017 - June 2020)

Bachelor or Architecture (B.Arch)

Mumbai University, Mumbai, India

August 2008- April 2013 SOFTWARE

ABHA Architects, Wilmington, USA

Staff Architect (August 2016 - September 2017)

Form Space and Design Architects, Mumbai, India

Staff Architect (January 2013 - January 2014)

• Figma

• Webflow

• Adobe XD

• Photoshop

• Illustrator

• InDesign

• Revit

• AutoCAD

• ArcGIS

C O N T E N T S

01 Field Team

Page 05

This project is an end-to-end application developed for creating and conducting highly customizable surveys. The application is designed for collaborative work and to be able to produce comparable results.

02 ArEx Laboratories

Page 17

This project is a redesign of the existing website for ArEx Laboratories, a pharmaceutical company. The new website aims to make information easily accessible to patients, their families and doctors.

03 Inventory & Recipes

Page 29

An end-to-end application that allows you to build an inventory of specifically all kitchen, cleaning, personal care items and frequently cooked recipes in your household. It automatically creates a grocery list that is sharable.

04 Boutique Honey

Page 41

I started this project as a personal case study. I set out to research the expectations of customers from a premium honey brand and then integrate those values into the visual design of the company’s mobile app.

FIELD TEAM

UI / UX DESIGN | RESEARCH | WIREFRAMING | PROTOTYPING

Software: Figma

BACKGROUND

The architecture firm I worked at had taken on an assignment from Lafayette College in Easton, Pennsylvania to conduct a Conditions Assessment Survey on the residential buildings they owned. These buildings were situated in the Historic District surrounding the college campus. The aim of this exercise was:

• to produce a report of the existing conditions of each building (a total of 136 properties),

• to provide guidelines to maintain consistent upkeep of the buildings so they retain their historic character,

• and to provide the college with an easy and efficient ‘do-it-yourself’ system so they can have their own contractors regularly and accurately update the database.

GOAL

This assignment got us thinking about creating a permanent solution for our survey needs. We decided to build an end-to-end application that will allow us to create customized surveys for a range of such projects.

PROBLEM

For an effective survey, not only is it important to ask the right questions but also make sure that individuals collecting the information take down consistent and comparable answers. So, the application has to be able to create surveys catered to individual projects. The app also needed a collaborative system for multiple users to be able to work at the same time.

MY IMPACT

For this project I first validated the need for the product, and then helped tweak its features based on my research and feedback from users.

RESEARCH

Goals

Below are the areas I explored during user research:

• The type of information that needs to be documented - text, measurements, photos, etc.

• What type of questions generate what type of responses. Areas that need objective / multiple choice questions as opposed to open ended subjective questions.

• The information and format of guidelines that ensures consistent response to maintenance issues.

Methodology

• Secondary research on survey making apps.

• Conducting surveys ourselves to compare results

• Conducting user interviews of contractors to validate our assumptions.

COMPETITIVE RESEARCH

For this stage our team tested out various survey making apps and noted useful features as well as features we thought would make our app more comprehensive. We discovered that most apps were built to gather basic feedback from users about a service or an establishment or even apps. We did not find a service that allowed collection of data through varied mediums, that instantly stored data on clouds and allowed for collaborative work.

The language used by contractors and architects for types of an element of a building such as a roof, are very different.

Users need specific instructions on how to fill out openended questions such as taking notes on the condition of an element of a building.

The app needs to be able to export information into a familiar format such as .csv

The app needs to be able to print out information.

Users need ease of switching between desktop and tablets to conduct prep work before venturing out in the field.

USER PERSONA

After compiling the outtakes from the research, we were able to create a persona that represents our main user group.

Jorge 38 - Male - Contractor

Jorge started his career working for other construction companies at the age of 21 when technology was just being introduced in construction work. He has risen up the ranks to where he now mostly manages projects. He is not involved in actual construction but prepares execution plans and schedules. His job is to conduct site visits before the start of a project, prepare estimates and supervise the completion of a project. Technology was introduced to him when he was still fairly young so he is not technologically challenged but he is not a natural with new software. However, he understands that technology can make construction projects more streamlined and efficient. He is open to learning about useful new software.

IDEATION

List of Features

• An interactive, drag-and-drop style, survey building mode.

• Dashboard to track several ongoing / completed projects.

• Activity tracker to show changes made by team members.

• An excel style list view of all survey entries in a project, a map view to show location of all properties to be surveyed.

• A split view of list and map that highlights the selected property on the map.

• Ability to take photos in the field or upload from a device.

• Save survey in the field on device without internet connection.

• Ability to sync the saved information with the main database once internet is available.

• Add multiple users to a particular project.

• Automatic sync if data connection is available in the field.

• Ability to sort surveys by complete / incomplete / new or not assessed.

“I would like something that makes my life easier but I don’t want to have to take a course to be able to use it”

INITIAL TASK FLOWS

After having defined the features of the app, I created flows for the main tasks.

User Flow: Launch the app to create a new survey. This user flow assumes that the user is using the app for the first time.

Task: Do a conditions assessment on a property in field.

Open the app Dashboard Tap the Survey

Want

Dashboard Leave app

Task: Take decisions on maintenenve work on roof of a property.

Open the app Dashboard

Tap Maintenence Guide under Menu

Navigate to Repair & Maintenence Guidelines, Subsection -Roofs Define architectural style & existing material of roof

Dashboard

Choose between preferred / better / acceptable methods of repair Need guidelines on anything else? Yes

Navigate to Repair & Maintenence Guidelines

Dashboard Leave app No

UI DESIGN KIT

I created the UI Design Kit that reflects the FIELD TEAM brand adjectives. The app is designed to have a clean and familiar look that would make a new user comfortable to interact with it.

BRAND ADJECTIVES

Simplified Organized Collaborative Portable Interavtive

LOGO ICONS

Home Maintenance Guide

COLOR PALETTE

PROTOTYPING & TESTING

Our team of architects first tested the product in the field and found it to work the way we expected it to. When we turned the product over to our target users they suggested the following issues to us:

• Users had trouble tracking who would survey which property.

FIX: We created a feature to assign properties to users for survey. The app would now pop up an alert if someone tried to survey a property that had been assigned to someone else.

• For the Lafayette project in particular, users wanted the guidelines booklet we created for them to be accessible in the field.

FIX: We created a field to upload reference material to projects in the survey building section of the app.

HI-FI PROTOTYPE

Go here to see the full hi-fi prototype.

AREX LABORATORIES

UI / UX DESIGN | RESEARCH | WIREFRAMING | PROTOTYPING

Software: Figma

BACKGROUND

ArEx Laboratories is a pharmaceutical company based in Mumbai, India. They conduct research and manufacture drugs for a number of ailments, their speciality being male and female infertility. The company’s current website was designed about thirteen years ago. They have now commissioned a redesign to achieve the goals stated below.

GOAL

ArEx Labs motivation for a redesign was to upgrade their website to make it easy to navigate and find relevant information primarily for patients, their families and doctors. They also expected the redesign to achieve some level of search engine optimization, mainly to make their company more discoverable for potential collaborators.

PROBLEM

This company was established in 1956 and has consistently been a key player in the pharmaceutical business in India. They have a recognizable brand image and the management was wary of deviating too far from it. In order to cater to regular patients and collaborators at once, the website language has to walk a tight rope between being simple and easy to understand as well as be industry specific.

RESEARCH

Goals

Below are the areas I explored during user research:

• What information are patients and doctors looking for on pharmaceutical websites?

• What kind of research do larger companies usually outsource?

Methodology

• Secondary research on top pharmaceutical company websites to note information provided for patients and doctors.

• Research on comparable companies that provide research services to larger companiesspecifically language used on their website.

COMPETITIVE RESEARCH

In this project, competitive research helped me understand the pharmaceutical industry better. I took advantage of being a lay person and studied comparable company websites to note insights in the following areas:

• The quality and content of material conveyed.

• How tools like language, images, interactive elements were used to simplify the information presented.

• Design techniques to make the website easy to navigate for different types of users.

Clear logical headings make it easy for various user to navigate and reach desired information.

Users may be concerned about data privacy and transparency should be key.

Simple language makes it easier for a lay person to understand complicated procedures and information on diseases.

Patients expect accurate information and empathy. Chat bots may not be the ideal solution for service.

When users are able to understand the information presented, there is a higher chance of participation in clinical trials.

USER PERSONA 1

After compiling the outtakes from the research, we were able to create a persona that represents our main user group.

Latisha

38 - Female - Teacher

Latisha is 38, a teacher and has been married to her husband for almost nine years. They have been trying to get pregnant for more than five years, and have already tried a number of medications and treatments. She is always trying to read as much as she can about her condition but often gets overwhelmed by the language and the description of side effects spikes her anxiety. She feels like she has lost control over her body and has to just follow what her doctors tell her without fully understanding it. She wants to find a resource that simply explains to her what her body is going through. A community of relatable experiences will help her keep the hope alive.

USER PERSONA 2

Apart from patients there is another distinct group this website seeks to serve. It was therefore important to define this persona as well.

Austin

33 - Male - R & D Coordinator

Austin, 33, is a corporate employee of a large biopharmaceutical company. The company runs hundreds of research projects at a time and has to extremely efficient in terms of the order of priorities of their experiments, who gets to use the equipment available at their labs, etc. Most of these experiments are time sensitive. Austin’s job is to make sure that these experiments run smoothly and results are not affected due to scheduling conflicts. Thus, sometimes it is in the interest of this company to outsource some of the research. They have to make sure that the company they are outsourcing to has reliable technicians, lab equipment and protocols. Austin is always on the look out for such companies to collaborate with.

“Doctors tell me the chances of a treatment working in percentages, but I can’t interpret what that means for my case. I am not trying to out-doctor the doctor, but it’s hard to go through this not fully understanding what to expect.”

“We make life saving medication here. It is too important to be jeopardized due to faulty equipment in a third party company. I have to make sure we work with reliable people.”

| AREX LABORATORIES |

IDEATION

List of Features

Homepage - The existing homepage seems to throw a lot of information at the user in the form of animated images, text and colors all competing for the user’s attention. Even so, the page doesn’t offer any direct, concise bit of information.

Solution:

• I decided to strip the homepage of all the fancy animations and make it seemingly bland. In this case, the blandness is meant to serve the user by focussing their attention in a singular direction.

• The blandness also serves the company’s marketing strategy by placing their most important products and area of research front and center.

User Centered Focus - When I as a lay person tried to navigate through the original website I was unsure of what headings like ‘Formulations’ or ‘APIs’ meant. Formulations lead me to a list of products but did not offer any information further than the brand name, image and the category of treatment.

Solution:

• For users to effectively navigate and be able to predict location of certain information, I created a logical heading structure.

• I tried to anticipate the information that patients and doctors would look for - information to better understand their condition, products related to their treatment and in depth information about those individual products.

• Similarly, I made sure collaborators could either access the same information or entirely bypass it to reach information like the distribution network, research opportunities and contact information to reach out to with enquires.

• Data privacy is an important issue, especially when it comes to information regarding our health. This lead to including the company’s privacy policy on the footer of every page.

• Currently, even though AI is changing our methods of communication and customer service drastically, I deliberately decided to leave out Chat Bots from the website. The dangers of misinformation in this case out-weighed the convenience of AI managed customer service.

• Future development - the aim is to create responsive design that is optimized for various devices and allows seamless transition between desktops, tablets and mobile phones.

| AREX LABORATORIES |

INITIAL TASK FLOWS

After having defined the features of the website, I created flows for the main tasks.

User Flow: Launch the website to look for information about a product. This user flow assumes that the user is using the app for the first time.

Task: Find information on the company’s distribution network.

PROTOTYPING & TESTING

The website has so far only been tested by the company’s management team. Below are some of my thoughts and concerns at this stage:

• The language needs to be developed to optimize for search engines.

• The management insisted on using the existing logo and colors. I checked the colors for an accessibility test and the results were not perfect. For now, my solution is to make sure that the font is large enough and have as much contrast with the background image as possible to make the blue text readable. The green text reads better against the back background. However, changing the shades of the colors would be a better solution.

HI-FI PROTOTYPE

Go here to see the full hi-fi prototype.

| AREX LABORATORIES |

UI DESIGN KIT

The website has been redesigned for the user to comfortably and efficiently navigate it. Although I have expressed some concerns with the color palette, below mentions are also other elements of the UI kit that I used to try and mitigate its shortcomings.

LOGO BUTTONS

HOME HOME HOME HOME

COLOR PALETTE FONTS

Primary Secondary Tertiary Accent

Tertiary 1 Tertiary 2 Accent 1 Accent 2

INVENTORY & RECIPES

UI / UX DESIGN | BRANDING | RESEARCH | WIREFRAMING | PROTOTYPING

Software: Adobe XD, Illustrator

BACKGROUND

The idea of this app came up when my husband and I came back from the grocery store and realized that we had forgotten to get some items. On top of that, a couple of items that we were planning to use that day had already expired. We needed something to help us be more efficient at keeping track of what we needed around the house.

GOAL

Building an end-to-end application that allows you to build an inventory of specifically all kitchen, cleaning, personal care items and frequently cooked recipes in your household. It allows you to quickly update quantities of items or automatically updates based on data in your recipes. It automatically places an item in your grocery list when a product has expired or its remaining quantity has dropped below 25% of its total quantity. The grocery list is updated in real time for all family members.

PROBLEM

We started with several ideas such as sticking a whiteboard on our fridge and writing things on it as soon as we thought of them. But often we would forget to click a picture before we left the house and the list remained on the fridge. We tried several apps, but they all require you to create a grocery list. They rely on your memory to either remember what you have run out of or at least remember to put the item that is out of stock into your virtual grocery bag. We needed something that automated the process.

PROJECT 3 OF 4

RESEARCH

Goals

Below are the areas I explored during user research:

• Are people already using other such apps to keep track of not just their grocery list but their kitchen inventory?

• What are the main hurdles of keeping an up-todate inventory?

• How much work is worth putting into this task?

COMPETITIVE RESEARCH

Methodology

• Secondary research on top products related to grocery lists, and managing meals to determine the gap in the market.

• In depth user interviews with households with 1 or 2 full-time employed adults to determine if they have faced similar issues with managing their kitchen inventories and validate my assumptions on inventory management.

For this part of the project I decided to research top rated apps for inventory and meal management and compare the issues they addressed. I discovered that:

• There is a set of apps that help you make a grocery list and automate ordering groceries from stores near you.

• There are also apps that help manage your kitchen inventory but do not automatically create a grocery list.

• Then there is a set of apps that allow you to plan your meals and manage calorie intake.

• There is also a set of apps that allow you to store all your recipes, allow you to import recipes from websites and plan your meals.

However,

• I could not find an app that automatically created a grocery list for you.

• Some of the kitchen inventory apps had poor visual design, some were poorly built, and some were overly complex.

• I could not find an app that performed the exact features that my husband and I had envisioned. PROJECT 3 OF

The generation aged 45 and up are not inclined to use this app.

Users look for inventory management apps, use them for a few weeks and fall back to their old ways.

Most users between the ages of 25 - 45 have racked their brains in a grocery store trying to think of items they need to buy.

Most users don’t know what it is, their management system is missing. They want a one stop shop but don’t know which app would be it.

Users feel a sense of calm when their kitchen is running like a well oiled machine.

USER PERSONA

After compiling the outtakes from the research, we were able to create a persona that represents our main user group.

Jessica 32 - Female - Architect

Jessica is 32, married and mother of a 3 year old. She is an architect working full-time. Her husband is also employed full-time as an engineer. Between work and taking care of their child, the couple do not have time to think about what to make for dinner everyday and end up spontaneously deciding something and buying ingredients to make dinner for 2 or 3 days at a time. Jessica thrives on keeping her home organized and not having time for it is making her feel stressed out all the time. She needs a system so she does not have to spend energy remembering what needs to be replaced in her pantry. She wants her husband to automatically have access to their grocery list so he does not have to call her to ask what to buy.

“It would be way easier to just feed into my phone what I used today, rather than go through my fridge and pantry to check what I am out of every week.”

IDEATION List of Features

• A complete list of inventory and status of each item at a glance.

• Ability to filter inventory by categories like dairy, meat and eggs, cleaners, etc.

• Automate generation of grocery list -

» When item has expired

» When the remaining quantity of item has dropped below 25% of total quantity.

• Quick view pop-up to add / update items in inventory.

• Quick view pop-up to add recipes.

• Ability to sort recipes by cuisine.

• Ability to proportionally increase or decrease quantity of ingredients based on number of servings.

• Ability to automatically decrease the quantity of ingredients used in a recipe from the main inventory.

• Ability to suggest “what can I make today?” based on items from inventory.

• Quick view of ingredients needed for a recipe.

• Ability to reorder items in the grocery list.

PROJECT 3 OF 4

INITIAL TASK FLOWS

After having defined the features of the app, I created flows for the main tasks.

User Flow: Launch the app to create the inventory and recipe list. This user flow assumes that the user is using the app for the first time.

UI DESIGN KIT

I created the UI Design Kit that reflects the INVENTORY & RECIPES brand adjectives. The app design aims to simplify the complex goals the app wants to achieve. The colors are inspired from previous research on what works for this category of apps but with a twist that makes the app look more sofisticated.

BRAND ADJECTIVES

Inventory & Recipes

PROTOTYPING & TESTING

So far we have only asked our friends and colleagues to test the app. Most of them have tried to use some form of inventory management for their homes. Here is some of the feedback:

• We have received good reviews for the design style of the app.

• They appreciated that users don’t have to go through to many steps to populate the inventory and recipes.

• They liked the idea that the shopping list is not only automated but also updates in real time, so any member of the family is always viewing an updated list.

They also expressed the following concerns:

• The app demands devoting a chunk of time to creating the whole inventory list to even begin using the app.

FIX: This is something that had crossed our minds as well. But at least for now we are going to continue to ask our users to put in some time at the start. We are however, exploring if we can add a scanning feature. This may make it easier to add some items to the inventory quicker.

• Users have to be regular in updating the lists.

FIX: This is another time concern some users expressed. In this case, we are maintaining that ‘a stitch in time saves nine’. We have reason to believe that majority of users would rather devote 2 mins to updating what they have used today than be left wondering what they need to buy in the shopping asile.

Go here to see the full hi-fi prototype.

BOUTIQUE HONEY

UI / UX DESIGN | BRANDING | WIREFRAMING | PROTOTYPING

Software: Figma, Photoshop

BACKGROUND

I started this project as a personal case study. I set out to research the expectations of customers from a premium honey brand and then integrate those values into the visual design of the company’s mobile app.

GOAL

Designing the homepage, features page, products page, checkout system and confirmation page for the mobile app of a premium honey brand.

PROBLEM

There are several premium honey brands in the market. The problem in this case specifically was to highlight the values this company has brought to beekeeping without taking away from the luxurious feel of their product.

USER PERSONA

Tyla 44 - Male - Works part time

My ideal customer is named Tayla. Tayla is in their mid 40’s and lives with their partner. They are a high school graduate and work part time. Tayla lives in Gothenburg, is somewhat familiar with the product and is willing to pay a premium price for a premium product.

“My partner and I are definitely boujee but when it comes to honey, it’s more about a sustainable bee keeping process.” PROJECT 4 OF 4

INITIAL TASK FLOWS

After having defined the features of the app, I created flows for the main tasks.

User Flow: Launch the app to create an account. This user flow assumes that the user is using the app for the first time.

Task: Check out features and add product to cart.

Task: Check out products in your cart.

PROTOTYPING & TESTING

Since this was a personal case study, I tested the app on myself first and then some of my friends. Below is some of my own feedback and some from my friends:

• Most users appreciated the style choices and mood of the app.

• They thought that the color schemes and images effectively communicated the brand values.

• They found the app to be uncomplicated and easy flowing.

The following were some concerns I found:

• Some of the button and font sizes needed adjustment.

FIX: I researched about standard button dimensions for mobile apps and also went back and forth between Figma and Figma Mirror to adjust button sizes.

• The newsletter pop up on the Homepage feels annoying if it pops up every time you nanigate to the home page.

FIX: I revised it so the pop up would appear only when the user first opens the app. I added a button in the Menu to navigate to the Newsletter and sign up for it. HI-FI PROTOTYPE

UI DESIGN KIT

I created the UI Design Kit that reflects the Boutiqur Honeybrand adjectives. The app design makes sure it reflects the product itself, that is, honey, as well as its premium quality.

ADJECTIVES

Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.