Event planning meets COVID risk calculator.
Event planning meets COVID risk calculator.The project's purpose was to create an app that allows users to acquire an easy-to-read grade of the COVID risk of a given event, displayed as a forecast, using just a few key inputs. The outcome is far from certain, similar to a weather forecast, but it summarizes complicated instrumentation that day-to-day clients do not have access to and will not understand.
It was a group project for which I was accountable from beginning to end, although I concentrated on UX design. Defining the target audience, building user journeys, storyboarding, wireframing, and designing the final user interface were all part of the process.
Chatbot to support program adviser and perspective students of University Of Washington
The goal of the project is to design a chatbot for the University Of Washington (CommLead Program) that will assist prospective students with their queries regarding academic programs. The chatbot is integrated into the college's website and will be available 24/7 to assist students in their queries. In the project I worked with 3 designers, 2 researchers, 1 product manager.
The chatbot aims to reduce the mental stress and workload of the program adviser by providing instant responses to frequently asked questions and directing students to the appropriate resources.
Conduct a comprehensive usability study on Zara to spot which heuristics identified, are pain points for the target audiences, and recommend improvements.
Data is informed from the user survey and the usability test results on the subjects that matched our user persona.
Worked with Restart partners and created social media content for Covid'19 India Mask Adoption campaign "Maskpur" sponsored by Facebook. We took an iterative, audience-informed approach to the messaging, deploying a broad range of lower-budget creative, observing its performance, and refining based on what we learned. We tried creating a distinct look and feel for the campaign to make our posts stand out amidst the digital noise. The wide range of messaging in design materials includes infographics, original illustrations, humorous memes, mutual support, and direct messages.
Promote Mask Awareness amongst the Indian audience and educate them when to wear a mask, how to wear it correctly, social distancing, staying away from crowded spaces and other good practices to stay safe during Covid-19.
We ran 192 ads across the Facebook and Instagram platforms of our non profit partners in India, Sheroes, Breakthrough and Arthan. The lift study done on the campaign shows that our ads influenced 1.19 million people in India to wear masks while leaving their homes at the cost of $0.04 each.
A client project for a local hair salon small business in Bellevue, Seattle. The salon has provided enjoyable experiences to customers with hair styling services for 22 years. Customers prefer online platforms for goods and services in today's digital world because of their busy schedules and convenience; hence the salon aims to streamline the flow of its website and make it user-friendly by improving the online booking process.
I conducted a product quality assessment for App Store as one of the academic projects for the Product Content Strategy class at the University Of Washington. The project encompasses my insights on the ease of use, inclusivity of the experience, any issues that specific groups might have while navigating the application, privacy concerns, etc.
As a Interaction/Visual Designer at Google, I have been working with the Central Accessibility UX team to design and deliver high-quality assistive technology features for differently abled individuals. I collaborate closely with a team of designers, researchers, and engineers to improve the journeys and onboarding experiences of users of assistive features through usable interactions.
I've been involved in projects like Reading Mode for Chrome, Lookout, Action Block, and Voice Selection for Google's Text-to-Speech team. I've also helped create design guidelines for Google Text-to-Speech, which benefit products like Assistant, Read Anything in Chrome, Android Reading Mode, and Lookout.
In my capacity as a visual designer, I've furthered the cause by establishing a distinct visual identity for our team, the Abilities Innovation & Research team, which includes crafting the team's logo and other visual assets. My contributions extend to providing graphics and illustrations for various projects across the Google ecosystem.
Magnifier is a mobile application empowering users to magnify small text, perform intricate tasks, and zoom in to view distant signs with precision and clarity. Seamlessly integrated into Pixel devices, this app harnesses the power of your phone's camera and intuitive interface to provide an effortless and powerful magnification tool.
The objective of this project is to design a product icon that distinctly communicates real-world object magnification feature of the app while maintaining visual consistency with other Pixel product icons.
Process of logo symbol development can’t be shown (NDA)
Objective - Develop an logo and illustration for ADI (accessibility and disability inclusion) Month at Google that embodies the celebratory spirit while showcasing diverse accessibility elements. The logo should reflect inclusivity, positivity, and align with Google's brand identity.
Usage - The logo served as a unifying emblem across various internal platforms, doubling as swag to instill pride among employees, boost awareness, and support accessibility initiatives during Accessibility Month at Google.
The project was done in collaboration with the creative lead of the team <3
To establish consistent, accessible reading and speech experiences across Google's product range, harmonizing them with Google's brand identity. The aim was to develop a comprehensive design system, comprising patterns and guidelines, supporting teams working on reading and speech-first products at Google.
Note - Unfortunately, due to NDA, I'm unable to disclose specific project details or share the designs. However, I am happy to talk about my design process and decisions or answer any questions or concerns you might have.
Jake Prendez is a Seattle-based Chicano artist and the proprietor of Nepantla Art Gallery. His website serves as a platform for selling art merchandise and showcasing his culturally rich artwork. Additionally, the website acts as a gateway for potential inquiries regarding guest lectures and collaborations.
Project Objectives:The primary objective of this project is to revamp and optimize Jake Prendez's website hosted on the Wix platform. The project targets two core areas
1. Enhancing Shopping Cart Experience - Streamlining the user experience within the shopping journey to encourage visitors to explore and seamlessly purchase art merchandise
2. Improving Discoverability and Brand Identity - Elevating the website's visibility, accessibility, and brand identity without the need for engineering support, utilizing the Wix platform's capabilities.
Link to the website - https://www.jakeprendez.com/
Pachanka [noun]
Pronounced PatCH-an-ka, means street party, or unmediated reunion of people to have fun on the street.
The product's purpose is to forecast future COVID risk analysis so that customers may schedule their events accordingly. Pachanka assesses risk and makes recommendations based on data elements, allowing users to select the best alternative. Information and peace of mind are essential client benefits that Pachanka provides.
The design thinking process I followed for the project
Our clients are people planning to host or attend an event soon and are concerned about the event's safety and risks.
To understand the customer needs, we also conducted light-weight interviews with social event organizers and participants around us on this topic. During the interview the participants expressed that to feel safe and secure during COVID times while attending or hosting a safe event, people may consider:
The MLP of Pachanka will focus on personal uses for application—planning personal events and making personal risk assessments for attendance.
We've structured our thoughts around two types of users: organizers and attendees. Though some screens and emotional moments are shared, the customer journeys, user stories, and core flows are all unique
We created two journey maps to understand the stages, steps and pain points for event organizers and event attendees.
After understanding the users needs and defining the key features, I sketched the paper prototypes
Created wireframes to develop the understanding about features and the structure of the experience. We also used these wireframes in our UX research
We conducted user interviews with six participants whom we asked to perform two tasks: (1) setting up an event through the organizer flow and (2) responding to an event invitation. We asked them to think aloud as they moved through the flows.
Some key themes arose across our research:
Finished this round of User feedback/ testing with a long to list and only three days left in the project. We used a prioritization exercise in Miro to determine our next move.
We ultimately got to all our mission-critical items and our nice-to-have items, but organizing our work in this way kept us focused on a tight timeline.
Following the development of the high-fidelity prototype, I further developed Pachanka’s visual identity. The Design System showcased below features the collection of reusable components used in designing the interface.
After receiving the user feedback and concerns on the wireframes and Ideating the solutions, I finalized the look and flow of the app by designing its high-fidelity mockups.
AppStore is a platform owned by Apple.Inc for mobile apps on its iOS and iPadOS operating system. The store allows users to browse and download various valuable apps. As of the first quarter of 2021, the Apple AppStore has roughly 2.22 million available apps for iOS users, and it caters to about a billion users around the globe.
Apple is known for its beautiful and intuitive design sensibilities. I love the brand because of its unique identity in the tech world, and that's also one of the reasons I choose AppStore for the case study.
For my first user journey, I chose to install an app for organizing my bills.
While browsing in the AppStore, I found three apps named Bill/Bills Organizer at different intervals. That could confuse the user and increase the cognitive load. (Fig.1)
Proposed Solution:
Apple is known for its creative interfaces and customizing options, so they can provide a filter option under the search bar at the top that could allow users to browse based on ratings, reviews and keywords.
The first thing that came up is an advertisement that can be misleading for the user.(Fig.2)
Proposed Solution:
To promote best practices showing unrelated advertisements at first can be avoided for a better user journey experience.
The sort feature in the review section is helpful, but it's hard to differentiate between the options- "most helpful" and "most favorable."Both the areas have similar results, and this could be confusing for the user.(Fig.3)
Proposed Solution:
"Most helpful and Most favorable" are catering to a similar problem hence can be combined. An addition of upvotes on reviews like on Amazon and Expedia could make them more authentic and support the user's mental model.
The Latest release section and the Apps section shows the same information about the app.(To confirm if this issue is there across all the AppStore applications and not this particular app, I cross-checked with WhatsApp).(Fig.4)
Proposed Solution:
I would propose to add a small icon for the "Latest Release" and to remove the latest release section to avoid duplication.
For my second user journey i decided to explore apple arcade in the App Store.
Apple launched Apple Arcade in September 2019. It's a game subscription service that allows exploring the curated collection of multiple games across all Apple devices. (much similar to Netflix for movies)
It is always a treat to look at and explore the new sections they create because of their attractive and creative interfaces.
The search navigation bar is missing inside the game category that can restrict the user from searching for games promptly, and the user will have to go through the entire list. (Fig.5)
Proposed Solution:
There should be a separate search button at the top or a sticky navigation bar at the bottom with a search button.(like in other pages of the app store)
The size of the game is 1.7 GB, and in few developing countries, the download might take more time due to the wifi speed. The user should get an indication of how much time the download would take. (Fig.6)
Proposed Solution:
An estimated download time for an app can be placed under the loading icon, if the app size is more than 1 GB.
The interface of arcade game section looks inconsistent and random. For instance, the "top arcade games"does not have a "see all" option like other sections. There is also random placement of categories, videos, and images throughout the interface. (Fig.7, Fig.7.1)
Proposed Solution:
The category section can be at the top instead of being randomly placed at the center Videos and photos can be grouped and placed uniformly. The top arcade games section can also have a "see all" option like other categories.
The heading "Arcade games for you" and the text "apple arcade" at the top of each game heading are repetitive information for the user. It's also looks crowded visually. There are two ways to see the games in the specific game section; one option is to slide right, and the other is the "see all" link. Both these options show the same information that is causing redundancy. (Fig.8)
Proposed Solution:
I would propose just having Apple Arcade as a header and removing the "apple arcade" text, placed above all the games, to avoid repetitive information. The right slider could show a few recommended/most liked games, and the "see all" link can show the range of games available.
The information on the arcade homepage is hard to differentiate or seems to overlap. For instance, angry bird reloaded is there under "unforgettable character" as well as "collections" section. (there are multiple games like that) (fig.9)
Proposed Solution:
I would propose to trim down the numerous categories into a small number of groups like the "unforgettable character" section can all the famous characters instead of dividing them further.
.png)
There is a legibility issue at various places in the App Store. For instance, the number of reviews on apps are nearly invisible because of the tonal grey color and small font size.
Proposed Solution
Increase the text size to 16px at-least and reduce text opacity for better visibility.
Screen readers can't read text inside the image, creating problems for a visually impaired user.
Proposed Solution
Alt text attribute can be used for images so that users with visual impairment can understand it easily.
Ideally, all the purchases should be included in the App Store purchase, even from the Arcade section, as that is part of the App Store itself. (Fig.12)
Will it be a good idea to have an option to delete an app from the App store like the update or open the button? (Fig.13)
Conducting the Product Quality Assessment on App Store introduced me to the heuristics and the accessibility assessment tools that can help identify and solve problems efficiently. In this project, I worked on two user flows and identified the issues that might increase the users' cognitive load while using App Store.
For the design recommendations, I tried to create inclusive solutions that can serve all the users. However, further testing will be needed to verify the findings and ensure if the solutions are helpful.
___________________________
University of Washington’s CommLead program advisers are burdened with the task of addressing queries from prospective students, resulting in a high workload and delayed response times.
__________________________________
.png)
________________________________
Conducted interviews with clients to refine project requirements and tailor the chatbot design to meet the specific needs of program advisers and prospective students.
.png)
___________________________
_________________________
________________________________________________________
.png)
Chose Tidio as our chatbot platform after analyzing various options against our requirements, user needs, and budget. It was the best choice due to its exceptional user experience, cost-effectiveness, and alignment with our project goals.
_______________________________________________
5 domestic and 5 international students were interviewed separately by quantitative methods
___________________
__________________________
___________________________________________
_______________
Here is one of the main user flow, which is when Li ( international student) applying Commlead program, she would like to know if he qualify the minimum requirements.
______________________
________________________
__________
___________________
_______________
________
_______ _
_______ _
_______ _
%201.png)
_______
_______
_______ _
_______
_______ _
__ ___. ___
__ ___. __ _
__ ___. __ _
My client aims to improve the online booking experience on their website for mobile users. The current website is inaccessible does not have a streamlined booking process, which is inconvenient for the client and the end-users.
To make the salon online booking experience easy and accessible for mobile users, I thought of coming up with intuitive solutions that save their time and give users the ease to book an appointment according to their preferences.
The design thinking process I followed for the project
I surveyed around 20 people who prefer to go to the local salons and book appointments online to learn about their demographics and pain points while navigating a salon website/application.
The survey identified that the target audience is 26 - 44 years old, are full employed/masters students, visit salons occasionally (because of a pandemic),74% book appointments online. Upon asking about the essential features, 84% voted for information about rates and time required for the service, more than 60% voted for convenient and easy booking, and approximately 55% voted for reviews and easy cancellation. Regarding the challenges faced,63% of the participants mentioned the slow booking process, and 42% said there was a lack of reviews from other customers.
To learn more about people's salon experiences, I conducted interviews with 6 participants. During the interview, the participants expressed that they:
After the interviews, I was able to build a persona that matches the target market.
Performed the card sorting exercise with 9 participants to avoid biases and understand the user's perspective.
With the help of card sorting, I was able to define the information architecture of the website's features as per user’s mental model.
I created a simple user flow of the booking process as I am concentrating on simplifying the online booking process for the user's.
After understanding the user's needs and defining the key features, I sketched the paper prototypes.
I took a couple of feedbacks at the paper prototype stage.
Before starting UI design, I worked on the wireframe to understand the website's user flow and structure. I also tried incorporating the feedback I received at the initial prototype stage.
After the wireframing, I then worked on the design system. I could not make many changes as the brand already has an established identity.
After working on the wireframes, I finalized the look and flow of the website by designing
high-fidelity mockups.
I conducted testing with five participants for effective initial testing results on prototypes. I asked them to perform booking an appointment while explaining what process they thought each screen led to.
As a result, I made iterations on the hi-fidelity mockups shared earlier in the design section based on these key findings:
My key learnings throughout the project
Zara is a Spanish apparel brand. It belongs to Inditex, one of the largest fashion retailers around the globe. Zara is known for its fast-fashion and includes clothing, shoes, accessories, fragrances, and beauty. It currently has more than 2,000 stores around the globe and is the most significant contributor to the Inditex group.
We chose Zara because, being from a fashion background in the past, I realized a lack of intuitive and practical online user experience in this sector of society.
At this time of pandemic when we are in this new digital world, the intent was to observe Zara’s online user experience and see whether it’s at par with their in-store experience, which is highly appreciated in the fashion retail world.
At the start of the project, we conducted the initial survey with 40 participants to understand users. According to the survey results, most of the users fall into the age group 16 - 25, are fully employed and shop from Zara every month. The survey also indicated that one of their pain points while shopping on zara's website is slow checkout process.
Find the complete survey report here.
.png)
.png)
%20YOU%20FACE%20WITH%20SHOPPING%20FOR%20CLOTHES%20ONLINE.png)
Conduct a heuristic assessment for the Zara's website and detect any problems or contradictions to improve the overall usage of the website and provide a better user experience.
The task was to see the user experience when a customer wants to search for an outfit and buy it. However, other tasks a user may need to do on the website are also there as examples.
Application aesthetics are crowded and unpleasant. The primary navigation bar overlaps with the web page content because of its transparent background. Product information is also not visible due to the choice of font and its size. (a)
.jpg)
Certain design elements on the website, like the view icon to change the page layout, make the web interaction difficult for novice users. It is inconsistent and unresponsive as after scrolling it towards the extreme right, the interface shows thumbnail size product images without description.
There is a lack of clarity in the filter feature. The random placement of the 'Filter' feature on the extreme right under the cart makes it invisible and difficult to use while performing a task (c).The filter side sheet has checkboxes that are not visible until you click them,making them ambiguous and unfamiliar (d).
The checkout process seems unclear. When a user does the payment process, it is unclear how many more steps are ahead. Since it looks like there is only one step, "Payment," within this step, there are more steps than one (e). A user should be notified about these multiple steps.These two can be easily combined in one step/page. Goal Gradient effect also states that the tendency to approach a goal increases with proximity to that goal, which is violated due to 5 steps in checkout.
There is a lack of error prevention. In the Summary section (image f) at the last step, users cannot see detailed information about their order; they can only see images of their purchasing items.Therefore, if they make a mistake (for example, in size), it will be hard to correct the error before buying.
For the usability test we took the specific task of discovering the Filter, View feature and Checkout process. We conducted a usability test and interviewed a total of 12 participants who matched our user persona. Find the usability script and results here
Put together an ensemble for an upcoming college event.
Now that the participants choose the items to purchase, they were asked to checkout.
Participants reported the legibility issue while navigating the primary navigation bar as it overlaps with the other content because of its transparent background.
Removed the transparency from the navigation bar and gave a white color similar to the background. It would make the options more visible for the users and would also increase the aesthetic appeal.
Proposed a black background for the navigation bar. Zara used a black background for the navigation bar in the catalog section on the website, and it looked neat and went with the aesthetic personality of the brand.
Most users said that the current filter option is hard to navigate and is not very useful. The filter side sheet shows too many options at once, and it seems overwhelming for the users and doesn't match Zara's design sensibilities of a minimal design approach. Participants also expressed that there should be a sort option for customizing the preferences, especially price.
Changed the placement of the filter, making it more visible and consistent by placing it on the left side below the navigation bar
Added a drop-down for the options in the filter side sheet for a sleek and clean visual look. Incorporated the slider icon (like view icon) for the filter feature and price option to maintain consistency
Added a "sort" drop-down feature with options like trends, recommendations, lowest and highest price
Used the black background for the primary navigation bar as suggested earlier for navigation bar design recommendations
Solutions for White Theme
Aligned the filter icon on the left with the rest of the interface to give a more consistent look.
I compressed the filter side sheet by adding a "+" icon to elaborate and "–" to compact the options.
Added a "Sort by" dropdown with customization options based on trend, price,newest, A-Z, Z-A.
The “view option” placement was on the navigation bar, and it was too small in size. Most of the participants expressed that they didn’t even notice the option until asked.The view option show three layouts – Default with single product image, Grid with four product images, and thumbnail view with multiple small photos with no product information. User testing indicated that the participants found the defaultview and thumbnail view challenging to use.
Changing the placement of the view icon from the navigation bar to the right side on the top of the product gallery for better visibility. Placing it near the product gallery will make it more accessible for the users.
Added the product description in the thumbnail view. It can be seen on hovering the productimage.
Most of the participants felt more comfortable with the grid view during the user interview; hence I propose to use that as a default setting on the interface.
I propose two layout options instead of three one with four product images and the other with a single product image. I kept the one with four product images as the default view as 83% of the participants preferred it during the user interview.
Changed the view icon from slider to square button view options to avoid the cognitive load for naive users. Also changed the placement of the view icon from the primary navigation bar to the left side on the top of the product gallery.
The checkout process is quite lengthy and has unnecessary steps that could affect the conversion rate. The breadcrumbs “shipping, payment and summary” are not clickable, which doesn’t support the user's mental model. There is a bad use of whitespace, and content is low in readability and legibility. The summary page does not show information about the products which violets the error prevention heuristic.
Made the breadcrumbs (shipping, payment, summary) clickable, placed them on the body of the interface instead of the topnear the Zara icon, and increased its size. It would enhance visibility and help in fast navigation.
Added the "view shopping bag" dropdown list on the left side at the eyelevel to keep the user informed about the purchase at all levels.
Minimized the steps by combining them for a fast user journey. For instance, the shipping method and address are on the same page, payment method and payment details on the same page. It also allows the user to make changes, if required, without going to a different interface.
Incorporated the product details on the summary page, which comes on hovering on the productimage. Participants mentioned in the interview about the inconvenience of going back and forth to cross-check the product information.
Changed the summary information from the right to the left side above the "continue"call to action for consistency and improved user experience.
Made the breadcrumbs (shipping, payment, summary) clickable, placed them on the body of the interface instead of the topnear the Zara icon, and increased its size. It would enhance visibility and help in fast navigation.
Reduced the steps/pages from five to three by keeping one page for one section. For example, "payment" has one page instead of two. Zara believes in a minimal and clean design approach, therefore, used the dropdown list feature to avoid excessive information on the interface.
Increased the size of the buttons and placed them on the left side under the products for a clear call to action.
Added"show order summary" with the total price on the extreme left at theeye level to keep the user informed about the purchase amount at all times.
Added the product details under the product image on the summary page to maintain consistency and error prevention.
.jpg)
.jpg)
