User Experience Designer - Front-End Developer

Portfolio

UX Research and Design

Programming

About

I'm a UX designer with a M.S degree specializing in Human-Computer Interaction. I have an undergraduate degree in Computer Science Engineering. I am interested in UX research, design and development. I learn how human behavior can be applied in designing interactions to make experience simple, engaging and satisfying to users.

ARTECA Case Study

ARTECA is a platform for experimental publishing and a curated space for essential content linking the arts. science and technologies. ARTECA offers a wide range of resources including books, journals, podcast, video, grey
literature, multimodal resources, MOOC resources, and community and professional
development materials.

Problem

Users were less engaged with the website. Adaption and retention rate needed to be improved.

Discovery Phase

Usability Test

I have driven 6 usability tests and for every usability test I have a goal defined. I identify a set of tasks for users. These tasks help us get some insights about users experience with the website.
I learned to be curious and ask follow-up questions. I learned to ask participants unbiased questions on the go about their choices.

Analyzing data

Observations and Insights

Participants felt the website was simple and easy to use

"I like the yellow bar" - The yellow bar attracts users attention.

When I asked participants to register or login, most participants first explored on the top right region of navigation bar to find sign up option. This tells us about the users mental model

Some participants have hard time noticing the top navigation bar because of the font size - "Oh I did not see that (top navigation bar)"
Participants preferred to use search feature over browsing through the catalog

Face Reader

I studied the participants emotions using Noldus face reader software. This helped me understood what emotions participants felt while interacting with the website. Participant was angry 11% of the time while using the website and scared almost 6% of the time. This could mean that the user is not feeling happy or confident while using ARTECA.

Heuristic Evaluation

I followed Dr. David Travis’s 247 web usability guidelines.Out of 247, 42 guidelines did not apply to our website functionality. From the remaining 205 guidelines we identified 25 problems with respect to search feature, website navigation, forms, error handling and ARTECA homepage.

Accessibility Evaluation

I have evaluated the website with tota11y and JAWS tools, and I found 5 accessibility issues. It gave me an exposure to understand the difficulties visually challenged users face when the website is not well designed for them.

Define Phase

Affinity Diagram Workshop

Myself and 2 other team members participated in this workshop to identify pattern in our findings and define the problem.
Based on our findings, participants have hard time findings materials on ARTECA. One of the key findings was 67% of the participants found 'subscribe' and 'register' feature to be confusing. 83% of the participants couldn't locate login and register buttons easily.
This boils down to one problem - How can we improve discoverability of materials and features on ARTECA?

Design Phase

Prototyping Redesign

Deliver Phase

Based on our findings one of the changes made was with respect to the placement of login and register on navigation bar. Below is the new design that was implemented and delivered.

Google Analytics

From Google HEART metrics, I learned a lot about ARTECA user behavior. We saw an improvment in user engagement, and improvement in adaption and retention

User’s emotional satisfaction with ARTECA was increased by 14.8% in 9 months.

Percentage of returning users increased by 0.78% within 4months.

Login conversion rate shows that there has been an increase in number of login from 2.93% to 5.20% in February ‘17.

FoodBud App Design

FoodBud is a concept app that was designed to encourage healthy cooking to users who have busy schedule. Most people spend lot of time searching for the right recipe or the right recipe requires them to shop for ingredients. Foodbud app keeps track of items in the user's pantry and recommends recipe based on the ingredients available at home. This saves users time from browsing endless recipes and unfortunately end up eating processed food.

My role on the team

Identify the appropriate research method and come up with a research plan
Facilitate affinity diagram workshop
Assist team in definiting UI elements
Prototype mobile app screens
Drive usability study

Problem

How to encourage people to prepare healthy meal at home by providing a better cooking experience

Discovery Phase

Survey

Sent out a survey asking people about their cooking experience, how much time they spend cooking, what they do when they don't have necessary ingredients, what sources they use to learn new recipes and more.
Result:

68 people took the survey with 60% respondents being within the age group of 20-30 years.

Survey results showed that most people in this age group have intermediate cooking experience and some like to prepare new dishes.

When people don't know what to do with the ingredient they have, they refer social media and videos or call family and friends to ask for recipes.

Due to the difficulty of finding all the necessary ingredients when required, respondents said that they resort to buying packed food or order from restaurants.

Contextual Inquiry

I visited 5 participants home to observe their cooking process. This gave some unique insights into how people go about finding recipes and cooking meals for themselves. Some of the answers, like how important prep time was to users was further emphasized when hearing and seeing how they responded to the question.
Results:

Meal prep seemed very crucial to these participants, as most of them said that they don't have enough time to prepare meal.

Finding ingredients is another task which is most time consuming.

When they don't get time to prepare, participants said they buy packed food or order meal.

I noticed that 3 of the 5 participants had stacked up canned food or ready-to-eat packs.

When it comes to cooking process, one participant was looking at the recipe on his phone and they had a hard time using the touch screen while preparing.

Empathy Map

Based on all the findings we created an empathy map to understand what goes on in their environment

Define Phase

Affinity Diagramming

Gathered data from contextual inquiry and survey, and spread out each point on whiteboard using sticky notes. This activity reinforced our initial idea and expanded our view to additional problems like hygiene factor. On completing this activity we restated our problem statement - "How to provide recipes based on ingredients available in users inventory while taking diet/ hygiene into account?"

Persona

From the survey results and contextual inquiry data, we made analysis to form three personas based on different age group, cooking experience, cooking habits, number of times they cook in a week, value for family and relation. Based on the survey results we framed their skills, goals, frustrations.

User Journey Map

This journey map followed how a current users might go about researching recipes to cook from and the processes of cooking the food while following a recipe. The map took into account Kimberly's (on of the persona) busy schedule and the fact that she had to cook for the family as well. How she might have initial feelings of happiness or enjoyment from doing a certain task that then quickly turns to frustration or anger when that task starts to take more time than initially anticipated because she couldn't find a recipe that fits her inventory. Overall the user journey map has helped identify some potential issues a user might run into currently when trying to research new recipes to cook from.

Design Phase

UI Kit

Exploring Android design guidelines, Apple design guidelines and few competitor's app design, my team and I formulated a design language and created a UI kit

Prototyping

With this design language, I did a combination of exploratory and rapid prototyping to design the mobile interface. I translated the low fidelity designs to high fidelity using Adobe Illustrator and marvel app. Click on the links to view the prototype and app video

Deliver Phase

Usability Testing

I conducted usability testing with four participants and saw relatively similar results with all participants. Users saw the value that FoodBud could bring to them. Test participants could see themselves using FoodBud on a regular basis and they liked the inventory tracking feature. Though they did have some issues with the design language, all four users gave positive feedback on the overall look and feel. Over all FoodBud was acceptable to the participants.

Disclaimer - This was a school project and I was part of a team of three. I led the user research for this project and created mobile interface prototypes by following the design language and UI kit standards my other two teammates designed.

ArtSide Design Workshop

My Role on the team

I have been working as a UX researcher with Kuo-Wei Lee on his thesis project ArtSide. ArtSide is an app where public can network and share about their experience with public art.

Problem

Journal is an app feature where user can write about their experience with public art, add images/videos and share it with others. This feature was designed in a conventional way how most social media platforms provide. We want to come out of this conventional way of hash tagging, image gallery and selfies. We want to build a space where sharing their experience with public art itself becomes an experience and an opportunity to think and write creatively.

Possible Solution

One of the ideas was to use visual poetry as a way for users to express their experience, emotions and involvement with public art.

Design Workshop

Kuo-Wei Lee, Yusra Khan and I hosted a design workshop at RAW conference in 2018. The goal of the workshop was to ideate and discuss with people interested in arts, on how we can improve the experience of using ArtSide and test the concept of visual poetry in ArtSide.

Outcome

​Participants came up with creative ideas. Visual poetry concept was well received by the participants and we received great feedback on how we can improve the design. I got a sense of how people would want to write about their experiences when they wear their creative hats on.

What did I learn?

I am improving my skills and practicing better ways to conduct design / research workshops. I have conducted 3 workshops and they have been a great source of learning.

1. It is important to plan, prepare and rehearse ahead of time.
2. Conduct at least one pilot run before the day of workshop. ​
3. Review your content with people who are not involved in planning the workshop.
4. It is especially important to not bombard participants with lots of information.
5. Be loud and clear. Order of delivery of information is the key.
6. Give the summary of instructions as a handout/ make a slide about it and leave it up on screen while participants are doing the activity.
7. Be prepared with guidelines if participants run out of thoughts / the group discussion deviates from the topic.
8. Give enough time for participants to discuss and reflect on their solutions.
9. Conclude the workshop. This helps participants to understand how their contribution would become part of the solution.

Yahoo! Fantasy Football Redesign

Yahoo! Fantasy Football is a game where you compete against other players to win prizes based on your skill in assembling and managing a fantasy Football teams.

My role on the team

Study Yahoo! history
Understand design principles and identify design flaws
Redesign Yahoo! Fantasy Football page
Collaborate with my team and obtain feedback from other teams about the design choices

Problem

Identify where design fails the basic principles and make the design more engaging and satisfying to users.

Discovery Phase

Background Research

We conducted a brief research on Yahoo! company history to understand how the company evolved over a decade. In this research we found that Yahoo! Fantasy Football stands third in fantasy game and users still prefer using Yahoo! for this purpose. This helped us to narrow down our focus to one of Yahoo!'s popular offering and re-design the website to keep it consistent and improve entry point to the site.

Design Review

Based on the design principles explained in the Universal Principles of Design by William Lidwell, I identified 25 design violations on Yahoo! Fantasy Football site.

Design Phase

Rapid Prototyping

Prototypes were designed by following 10-plus-10 rule. I improved the design in every iteration by considering the feedback given by other teams.

Delivery Phase

Original design - There is too much negative space and the entry point does not nudge the user to join.
It does not give much information to users about the website or why one should invest time and money on Yahoo! fantasy football

New design - The home page before user login, is made more inviting to users. With the image of football ground, it gives context to users and their tag line "There can only be one champion" establishes trust in users.

Original design - NFL headlines sections adds cognitive load on users. It is not consistent with Yahoo! news section on Sports page and homepage. Different kinds of news is spread across various parts on fantasy football homepage.

New design - Using picture superiority effect, consistency, highlight principles and using color for hyperlinks, reduces cognitive load on users and the news section was made much easier to scan.

Gmail Redesign

I worked with 2 other graduate students to evaluate desktop version of the Gmail inbox. We conducted user research to understand the problems and redesign the inbox to tackle the key issues.

From our research and findings, we defined a problem statement - how to improve user experience with Gmail web app to make it easier to learn and effectively use the features Gmail offers?

My role on the team

I conduct user research and document the findings

I prototype re-design based on research findings

I conduct usability test to validate our re-design

Discover Phase

Ethnography

I interviewed 3 Gmail users to talk to them about their usage pattern, painpoints while using Gmail web app. We found that most users knew well to use the basic features gmail offers. When it comes to tasks like archieving and creating labels, people were hesitant. Some people even complained they don't understand where their archives go to.

Heuristic Evaluation

I used Nielsen Heuristics heuristic evaluation guideline and identified 9 problems with Gmail web app interface. One of the problems I noticed was that the archieve feature was not in match with users mental model.
I identified 2 high and 4 medium severity problems from heuristic evaluation, of which 4 issues was reproducible during usability study.

Define Phase

Persona

We identified 3 types of target users based on our research and created personas - casual users, moderate users, extensive users.
They can also be classified as business users and personal account users

User Matrix

We created a matrix to identify task frequency among all 3 types of users - casual, moderate and extensive users

Design Phase

Protoyping

Each member of the group came up with one design. After evaluating we selected one design and created a hi-fidelity prototype of that.

Delivery Phase

Usability Testing

We tested our new design and I proctored 2 usability tests out of 4. We discovered 7 key issues with our design.

Users had difficulty using some of the common features Gmail offers like creating new label, ability to customize inbox view, archive and retrieve emails.

Sabre UX designer intern

I worked as a UX designer summer intern at Sabre Corporation, a travel technology company. I worked as a UX researcher and designer on 5 different projects from 3 business units. I worked closely with UX experts to conduct ethnography and business origami workshop with two fortune 500 companies and I helped them redefine persona. I worked with UI developer to prototype UI designs. I conducted usability tests for hospitality check-in workflow and documented the findings. I identified usability issues with flight booking.
I was part of intern case competition and my team was one of the finalists. I conducted interviews with SMEs to build traveler persona, designed mobile app to manage travel itinerary and I conducted usability testing with six participants.
This experience taught me to collaborate and work with clients, make critical decisions and to prioritize redesigns. Working with experts I also learned more on ways to conduct usability testing, workshops, identify and build persona.

For more information about my work at Sabre Corporation, please feel free to contact me.

Game Development

Gold Digger is a 2 player game that is meant to be left running. Gold digger collects gold where as his robo-pet is his radar. The view follows one player, robo-pet. The 2 players should work cooperatively to complete the game. Players lose the game if robo-pet runs out of battery.

Graphic Package

​“Let’s Paint” is a 2D graphical editor package - developed using C language - which facilitates the user to draw simple geometric shapes. The user interface is easy to use, thus making the experience of painting fun.

This was an independent project developed by me. I have implemented basic graphic algorithms to draw 2 dimensional shapes.