After graduating with a degree in computer engineering, I knew two things: 1. I wanted to use technology to help people; 2. I wanted to pursue my dream in a country where my gender wasn't a barrier. I put myself through one of the US's top HCI master's programs so I could apply user-centered designs to create life-changing experiences.
With a master's degree in HCI I have thoroughly studied and used many research techniques. I am committed to crafting accessible designs and evaluating their usability in an objective matter.
From consulting at a travel startup to working for a large SaaS company and different roles in between, I've had plenty of firsthand experience working with design tools across the gamut.
My background in computer engineering and tutoring undergrads in HTML & CSS has provided me with the technical understanding to effectively communicate with development teams.
Provided tutoring services in HTML, CSS and jQuery for graduate and undergraduate students.
High fidelity Prototypes
As a side project, I designed a trip planning app that enables users to either create their own guides for their upcoming trips or use app-generated guides for their trip. User is able to get information about certain attractions in a city or country, view the map and get trip ideas on each continent. Below are some of the screenshots of the prototype that I created. To view all the screens of the prototype click on the link below.
ParkWhiz is a startup that helps drivers have an easier and better experience in finding parking. Our goal was to research users experience with ParkWhiz and its competitors’ websites and implement design solutions. Working in agile environment, I performed several methods to identify issues and validate the design decisions.
I conducted several unmoderated usability evaluations on the website and evaluated both quantitative and qualitative data to pull insights and themes.
Some users assumed that the red pin was either their current location or a parking spot.
Most users did not notice the distance and they selected a location based on price.
On average most users identified address, price and distance as the most important information when choosing a location.
First I created content inventories on ParkWhize’s iOS and Android apps in order to determine what the apps currently contain. Then I created two separate sitemaps for iOS and Android to visualize the site’s navigation, sort the website’s contents and clarify information hierarchy of the apps.
ParkWhiz was considering to improve the flow and design of its signup and login as well as reset password process. After researching on some of best practices for Signup and Login, I created several flow diagrams on the current website and app as well as the ideal one.
After establishing a plan on how to test our mobile platforms and deciding over available usability tools based on our budget and project timeline, I conducted 10 unmoderated usability evaluations on each iOS and Android platforms.
The goal was to identify and communicate issues that may negatively impact the user experience and share design ideas to solve the issues.
Users login by clicking on the Booking button. However, some users look for login option in hamburger menu.
Most participants used date picker to change the date and time rather than slider.
Users expect to scan the barcode on the pass to enter and exit the parking.
Get Direction link on the pass is important to the users.
Most users login by clicking on the Booking button. The same as iOS, some look for login option in hamburger menu on Android.
Users do not notice the existing and new account options and they fill out their info in the wrong section.
Users had different approaches to change the date and time. Currently there are 3 ways to set the date and time. It needs to be consistent.
Users may wonder which of their action is being applied since there is more than one way to do this action. User needs to take necessary steps to change the time if they initially use the slider.
Time extension is confusing to the users.
ParkWhiz was considering to change its current flow and design of account page. The followings a few pages of account setting.
Hope After Project is a non-profit organization that strives to help people coping with grief around North America connect with their loved ones who have passed away thru celebrating their life by giving back to the community. One of the issues that the organization was facing was not clearly portraying the objective of the organization. Another issue was giving people an adequate resource to reach out to the organization. For this project, our team provided consulting for our client, Hope After Project non-profit, to address the client's business goals including making the human story more of the experience of interacting with the organization, extending client's volunteer network and informing the digital experience.
We conducted 6 exploratory interviews with potential recipients and 6 with both volunteers and recipients of the organization to learn more about the organization. the followings are key findings:
We conducted a hueristic review on client's website to find potential usability issues. Followings are recommendations for the key findings of reviewing the website and comparing it against accepted usability principles:
We performed a review of some non-profit websites to discover the strengths and weaknesses of competing designs, find opportunities and generate ideas. The major findings from competitive analysis include:
We sketch our empathy map based on our exploratory interview data to get more insights into our users. Empathy map helped us to understand recipient emotions when coming to Hope After Project and enabled us to empathize with them. We used this to make our website to evoke the feeling of hope. With that we organized our information that helped us to brainstorm our research questions for our future interviews and further studies.
We created “ideal” Journey map to understand what exactly our target user’s needs are and how they achieve their goals.It includes the steps that recipient take before, during and after receiving the project. The journey map helped us to identify more opportunities during our process and inspect the areas that need to be worked on and make the experience better on those parts.
Based on our interview findings we created two types of persona to represent our major user group and stay focused on the expectations and needs of our target users. Personas helped us with developing information architecture of the wireframes based on users' behavior as well as the overall look and feel of the website.
We conducted usability evaluations with 8 participants to obtain both quantitative data and qualitative feedback. The usability test helped us to identify the problems while interacting with the website. We asked participants to read about the organization and explore the website then we gave them some general tasks such as signing up for a service or finding out about the projects process. Finally, we asked them to rate their overall experience of navigation and their level of satisfaction on each task.
To convey our results from our research and categorize them, we created a feature matrix. Feature matrix helped us to stay focused on our findings and the areas we needed to work on.
After peforming open card sorting to organized the website content, we started off providing solutions by implementing our findings into low-fidelity wireframes for both mobile and desktop screens.
To Validate our design, we conducted usability evaluations with 10 participants who were unfamiliar with Hope After and its website. We divided them into 2 groups so half of them tested the mobile version and the other half tested desktop version. we asked them to give us their first impression of the site, to find the history of the website, and to attempt to sign up as either a recipient or a volunteer.
The chart shows participants rating for the difficulty level in understanding the goals of the organization, the signup process, project process, and roles of the organization. The results show 65% increase in users' satisfaction in comparison to the old website.
Usability test takeaways:
We created a style guide to identify the website’s brand identity through colors, font, buttons, and visuals.
Primary colors: Blue and Orange
Blue: Calm color that evokes the feeling of trust and hope.
Orange: Elicits the feeling of comfort and happiness
We translated most of our ideas to this high-fidelity prototype using Wix. The following pictures are some screenshots of the high-fidelity prototypes for both mobile and desktop.
The followings are recommendations from our findings that because of time constraint we were not able to implement, but would be beneficial.
Wix allows you to add a GoFundMe widget to your website, if you have an account with them. This widget would keep traffic on your page and allow you to display all the different projects that people can donate to in one place.
As projects happen in more locations, add pins to the map to show where you’ve been. This shows reach and gives the impression that projects can happen anywhere.
For this project my team and I designed a fashion application -PermuStyle- that allows users the control they need, while keeping the app simple and easy to use. We had two main goals for PermuStyle Mobile App:
|Method||Tools||What we did|
|Competitive Analysis||Google Sheets||Analyzed 5 different fashion mobile apps that are available today.|
|Interviews||Google Doc/Sheets||Interviewed a total of 8 participants via face-toface dialogue.|
|Affinity Diagram||Google Sheets/ Stormboard||Compiled and organized interview reponses.|
|Personas||Xtensio||Created 2 personas.|
|Card Sort (Hybrid)||OptimalSort||Recruited 10 participants.|
|Flow Diagram||Draw.io||Created 2 main navigation paths.|
|Site Map||Draw.io||Defined page definitions and created information architecture.|
|Prototypes||Drawing/ Axure||Created sketches, lo-fi abd hi-fi prototypes.|
|Usability Evaluation||Google Doc/Sheets||Recruited 10 participants (6 moderated, 4 unmoderated)|
After our team interviewed seven participants, we started to collect and compile all the answers into a spreadsheet. We then used the organizational tool Stormboard to create our affinity diagrams.
We first determined the two main personality types of our target audience based on our interviews and affinity diagram. Some of the common themes we encountered throughout the interviews included thrift, bargain-hunting, the need for recommendations and time-saving convenience factors.
The site map helped us in visualizing what we had learned about how users would navigate our app. We identified where the content would sit and the relationships between different pages.
Our first iteration was our low fidelity prototype which we tested moderated and remotely.Below are some of the screens of our low fidelity prototype.
To confirm our application's navigational path we had participates complete two tasks using our low fidelity prototype. Six participants were moderated by our team, and four participants completed the tasks remotely. Below is the summary of our findings on our low fidelity prototype.
Prior to updating our High-Fidelity prototype, we created a Style Tile to determine our typeface, fonts, and color schemes. We also collected groups of different images including individual clothing items and accessories, different styles of outfits, and clothing items that are on models.
The followings are some of the screens of our prototype for PermuStyle App.
Based on the feedback from our Lo-Fi usability testing, we edited and added necessary elements in order to fix the navigational issues found in our usability testing. Click on the link below to view the app:PermuStyle Fashion App
Divvy bikes provide people with both a fun activity ,as well as a transportation option. In this project, our team developed the whole UX journey from observation, interview to the interface design and user interaction for mobile application. Our target audience were users who had used bike share programs. After analyzing the results we created a mobile product that would enhance the biking experience. Our application, Devvign, allows the user to engage in all three phases of the activity curve:
Anticipation and Research
Reflection & Reminiscence
1. We created system concept statement to help our team focus during diverse activities. Our concept statement answered to the following questions:
2. We carried out contextual inquiry to observe potential users of the product they perform related task supported by Divvy bikes. Some of our Contextual inquiry findings include:
3. To specify what the app should do we established a baseline set of requirements for Divvy Bikes.
4. We created flow Diagram to illustrate the flow of information between user and other people and artifacts of Divvign app.
5. Concept map was created for Divvign domain to represents the concepts and relationships amoung them.
7. Our team identified interaction types for the app to model how the user interacts with the interface metaphors.
8. Open card sort was performed on the application content to group and categorize the contents and based on the result of card sorting we Created a site Map to clarify information hierarchy and prepare to create wireframes.
9. We created lo-fi wireframes using MyBalsamiq and tested in order to make changes and improve the design.
Created several wireframes considering the unique capabilities and constraints of mobile platforms. This helped me to learn more about design strategies and patterns within a mobile context to create useful, usable and enjoyable experiences.
I started my designs by sketching and putting my ideas on the paper first, then I designed low-fi wireframes using UXpin and Moqups.
Smartphone wireframe for this Sears.com product page
For the Mobile Wireframe, I tried to include the most important features and “hide” the features that take lots of space because of the limit of space in mobile size screens. I used several expandable features to show the “hidden” information. However, I did not want the expandable features, add length to my page so that the user have to scroll down. I decided to make the features that are being able to be swapped to the left so the information appears.
Tablet wireframe for this Sears.com product page
For the Tablet Wireframe, I decided to add some of the information that was hidden on mobile wireframe. Therefore some part of the information for Description is visible by default, but users have the option of expanding it by tapping on “Full Description”. I also created tabs for Descriptions, reviews and other features so that users can see all these features at once instead of scrolling down to get to a specific feature. They only need to tap on the tabs in order to see the related text. (For example, if the user taps on Review, the Review section takes the place of Description).
Mobile web home screen wireframe for the cityofchicago.org website
For redesign of City of Chicago mobile website I used Scrolling tabs as a primary navigation. The reason that I opt for Scrolling tab was the number of navigation items. There are plenty of nav bar items which do not fit on the screen so it should be scrollable. Another approach could be removing some unimportant items from nav bar from mobile screens. I included "City Services in Side Drawer (hamburger menu) so that users can have a quick access to services.
Low, mid and high fidelity Prototypes
As a team project, we created a resposive prototype for a cleaning service website and application. After creating the storyboard and sketches, we conducted value test to get some insights for the early stage of the design of our app. We gathered and synthesized the data from value testing into insights. After some design revisions, conducting uasability evaluation helped to make a right design decision. I find prototyping fascinating because it starts from general ideas and after several iterations these abstract ideas change to a concrete design.
Mountainproject.com is as an online resource for climbers seeking information for their trips or days on the rock. The site contains thousands of pages for climbing and route information alone. Content is user-generated on Mountain Project, and because it has reached critical mass, many people in the climbing community depend on it for up-to-date information. Navigation on Mountain Project, especially the homepage, is cumbersome and quickly becomes overwhelming. In this project, we designed a new navigational structure and optimized task flow on pages.
Our main goals for the redesign were:
Because the information on Mountain Project is climbing focused, the content inventory began with an accelerated introduction to the language of rock climbing. Next, we turned to experienced climbers for information through the use of a free-listing activity, which helped to build an initial list of content. Finally, we created an inventory of the most prominent areas of the website and organized them by webpage name.This exercise not only gave us a good base for creating the card sort cards, but also helped to explore and become more familiar with the website.
Mountain Project consists mainly of data that can be organized either alphabetically or by location(i.e. alphabetical lists of gear and locations of climbing routes). However, locating this organized data using either the current homepage or global navigation is difficult. In order to accomplish our second goal of creating an experience that allows users to quickly find the content they need, we decided to conduct a card sort to determine where the users expect to find the information they are seeking. By drilling down into the details of the content inventory, 83 cards were created, and an open card sort was conducted, which allowed the participants to create their own category names.
Based on the results of 13 participants, the categories that emerged were:
We created a sitemap using the Participant-centric Analysis (PCA) feature of OptimalSort, which shows the most commonly grouped items. After determining which groups most participants had created, the content was split into logical pages within the site structure. This created four flows: Homepage, Destinations (to Climbing Area to Getting Ready), Climbing 101, and Community. The first four columns show the way that users will find information about their routes for the day, while the other two are completely separate flows.
After finalizing the site map, we created pen and paper sketches using the 3 scenarios:
1- Novice users: Climbers exploring new areas near them
2- Intermediate users: Intermediate climbers seeking routes while traveling
3- Expert users: Expert climbing groups planning a difficult climb
After discussing the pen and paper sketches, they were converted to digital wireframes using Axure. Some of the changes to global navigation include:
Research & Analysis
Understanding factors that can affect the way users locate, navigate, and comprehend information from online sources in order to provide a perspective of how to improve existing news technologies.
Forever 21 mobile application is designed to help customers purchase their preferred apparel and accessories online, as well as locate stores around them instantly on their mobile devices. This project focuses on the usability issues that users experience while using the Forever 21 Android application to perform common shopping tasks such as browsing and purchasing. Recommendations have been provided for resolving the issues in order to increase the user’s satisfaction while using the app helps.
Conducted a total of 6 usability evaluation sessions with both male and female participants.
To identify some areas of improvement for the application to decrease users’ frustration and dissatisfaction with using the application.
To explore the usability issues our team prepared a test plan that defined our objectives and also framed our research questions in a way that would help us identify the strengths and weaknesses of the application. We also defined our target participant, evaluation measures, the tasks for users to perform, and possible questions that could be asked before and after the usability test session.
Users do not notice the “shop” button easily which causes to miss some of the products available in the application.
Home page of application offers limited space for shopping and searching
The store icons under the map view do not contain useful contact information.
Solving the mentioned issues would lead to a quicker and simpler shopping experience to users which causes increase the company’s client base. The mobile application can help increase the business revenue by providing users with a good experience and a quick way for purchasing.
Having done usability evaluation for several products helped me to understand the weaknesses and strengths in design. It is fascinating how different methods of evaluation help to remove the weak parts of the websites and improve the usefulness, desirability and satisfaction.
Google Maps and Map Quest are popular worldwide due to their free navigation services. They both offer similar features, albeit with different designs and layout. In this project, we studied and compared MapQuest and Google Maps to determine which application the users have better experience with.
Conducted comparative study to determine what elements are better between Google Maps and MapQuest for pedestrians to search for locations and obtain directions (16 sit-by usability evaluations with participants located around Chicago).
Identifying the best practices for designing a new mapping application with features that benefit pedestrians the most in order to improve user experiences on using a navigation mobile app.
The scope of our research was the user’s experience when searching and navigating to destinations on the go, and to answer the following questions:
1. The icon for saving a location on MapQuest is intuitive and it is not buried under separate screen. Even though most of the participants were familiar with Google Maps, more participants were able to save a location on MapQuest.
Best Practice: Ensure that users know exactly how to save a location based on the applications user interface. Whether that means to research and understand what icons are more intuitive to a user, or to test and observe if it would be beneficial to make the save location feature immediately visible upon selecting a location by name or address.
2. Both applications take the same number of steps to retrieve a saved address. All participants that succeeded in saving a location were able to locate their saved address.
Best Practice: As is implemented by MapQuest and Google maps, give users quick access to their saved and favorite locations. The consistency between the mapping applications allows the users to quickly adapt and succeed at locating their saved locations. For learnability, it would be useful to follow this trend.
3. Half of our participants opted to use the explore feature on MapQuest while only two participants used the explore feature on Google Maps.
Best Practice: Consider following MapQuest design where the explore function displays a toolkit organized by categories such as food, gas, hotels, etc.
These practices ensure researchers use the best experiences to shape and revise their own projects in order to create a better experience for users.
We were unable to test all of our users in the same location, for our navigation task, each member of our group selected a location that was exactly 0.5 miles in distance which had a minimum of two traffic lights and two turns on the way.
Microsoft HealthVault website helps people keep track of their health condition by recording their exercise activities, daily food consumption, weight, height, medical history, etc. In this project, we conduct expert evaluations of the Microsoft HeathVault and addressed usability issues found on the website.
Identify usability issues that could impact users’ performance and their ability to make the most effective and efficient use of the capabilities of Microsoft HealthVault website.
Positive: The visual hierarchy of the website is easy to read and emphasizes each aspect using the right amount of font size and weight. This makes it easy as a user to see what section you are currently on and what the main headings under those section are.
There are too many navigation pathways available to the user when logging items.
Severity Level: High
The main menu title options on the left-hand menu are in no specific order. The unordered menu options will prevent users from being able to access features quickly and efficiently.
Severity Level: Medium
On the home screen there is no functionality to reorder the tiles displayed. You can remove tiles altogether, but not reorganize them.
Severity Level: Medium
The current location of the command buttons is ineffective and will likely result in an inefficient data entry process.
Severity Level: Low
The solutions are to improve the current interface of Microsoft HealthVault in a way that close the gap between where the company currently stands - and the end goal.
This class was about composition rules as they apply to digitally created documents. Class objective was digital manipulation of two-dimensional images. The followings are some of my works using photoshop.