5521074057_39a0d98e7d_z.jpg
5521074057_39a0d98e7d_z.jpg

Portfolio


Portfolio

See what I can do

SCROLL DOWN

Portfolio


Portfolio

See what I can do

UX Projects

Web | Mobile | Automotive | Graphic Design | Research

Goal: To encourage the spread of visually pleasing and easy to use UX/UI design that intuitively
considers both the needs of the people who use it and the businesses that provide it.

AR Plant Care App Design


AR Plant Care App Design


AR Glasses Plant Care App Design

Final Project | IN4MATX 284 Advanced Design and Prototyping

Goal: Design a novel interface

Project: Augmented reality glasses + smartphone app + plant sensors

Deliverables: Video of interface, how-to manual, presentation, and design justification document

 

Yelp Mobile App


Yelp Mobile App


Yelp Android Mobile App Bookmarks Redesign

GOAL: Access Bookmarks Feature with added Search, Filter, and Sort functions

Current Yelp Mobile App Screenshots

Main uses/purpose:

1.      Online Business Directory / Listing / Local Guide

2.      Business Reviews/Ratings

3.      Social media / sharing

4.      Restaurant Reservations / Table Bookings

5.      Food Ordering

6.      Special Offers/Discounts

7.      Feature food trends and photographs

Userbase

  • (All ages) Consumers, business owners

Goals:

  • Fix Bookmarks feature UI as well the search, filter, and sort functions.
  • Consistently use color to indicate active and inactive features
  • Expand search to be more comprehensive without overwhelming the member with choice

1.      Does not allow users to exclude certain search keywords/categories. For example: if a vegetarian user wants to exclude barbeque locations from their searches.

Solution: Food is a very personal aspect of life ingrained in all lifestyles, cultures, and religions. There are many dietary restrictions that people abide by due to allergies, disease management, moral and religious restrictions. By allowing users to exclude certain search categories via keyword tag, we can expand the search functionality to help users refine their search results for restaurants that cater to their specific diets. It will also help businesses reach their target consumers.

  • Allow user to search for words to include and exclude via “tags”
  • When setting up profile personalization, ask user if they want to default future search results to exclude specific keywords/categories moving forward
  • Allow user to temporarily disable feature conveniently at any time during future searches

2.      Does not allow user to input their own notes or tags for bookmarks. Yelp previously allowed users to use one of only 2 tags for each bookmark into separate categories of “To Try” or “To Review” which was immensely helpful but very limited. Previously, Yelp would also allow users to type in their own Notes in a text field.

Solution: Users tend to bookmark a location based on a recommendation. Allow sorting of bookmarks according to their own tastes and preferences:

o   Allowing users to sort their bookmarks via

  • Custom user defined tags
  • Suggest commonly used tags
  • Allow multiple tags
  • Allow users to reuse existing tags via predictive suggestion
  • In list view, tags should be visible and displayed underneath each listing to help remind the user why location was bookmarked in the first place

3.      Does now allow users to determine what languages the staff can speak at each business. For example: If a tourist in Irvine who only speaks Spanish wants to visit a Mexican restaurant so long as they would be able effectively to communicate what they want to order with the waitstaff.

Solution: Many businesses cater not only to locals but to tourists as well. The general user base is a melting pot of cultures and by allowing users to include search criteria based on language would help users refine their search results for businesses that may or may not have specialized staff or services that are multilingual. It will also help businesses expand their reach beyond locals and may even help attract tourists. Users and businesses could upload this information directly to add to Yelp’s data collection.

4.      User can only bookmark listings one at a time.

Solution: Allow user to bookmark multiple listings during searches when in List view by:

1.      Long press business name
2.     Check boxes appear to the left of business name
3.     Tap check boxes to select multiple businesses
4.     Tap Add to Bookmarks button that appears at the bottom of the screen when finished.

5.      User cannot assign certain bookmarks priority or change order. For example, user wants to try McDonald’s Restaurant before trying Burger King restaurant.

Solution: Allow user to reorder bookmarks in new Priority View by long pressing and dragging to reorder listings.

6.     Too many bookmarks. Users can get carried away and amass a large number of bookmarks without realizing it. I personally have 1856 businesses bookmarked on Yelp. These bookmarks are largely a mix of businesses I’ve already frequented many times but never got around to moving off my Bookmarks list.

Solution: Help users manage their bookmarks by facilitating list organization methods.

  • Prompt user to move businesses they’ve already checked in at from your “To Try” Bookmarks category to your “To Review” list.
  • Ask user for permission to remove business from Bookmarks list if categorized as “To Review” once a review is completed or ask to move to another list, e.g. Favorites.
  • List # total/count of how many bookmarks user has so user can actively monitor number of current bookmarks

7.      Unclear status of listing results for each business. Is the restaurant currently open and in business? Or are they closed  already? Are they out of business? Are they closing soon?

Solution: Highlight listing in yellow if closing within next half hourwith the text listed “Closing in _#_ minutes”; red if already closed; gray if out of business

8.      Sort Alphabetically option does not have a letter index to skip to desired letter quickly.

Solution: Add letter index function to right hand side of the screen to allow users to jump quickly between letters. On long press, allow user to select multiple letters for to filter through. For example: Long press S and T to search only listings that begin with the letter S or T.

9.      Many cuisines and dish names can be unfamiliar to people and not easily identifiable at first glance.

Solution: Long press on cuisine or dish if unknown to reveal short description of cuisine/dish and origins. Can tap short description for more to access Food Glossary.

10.   Bookmarks don't refresh and display when map area is moved around

Solution: When moving or zooming the map it'd be great to have an option to have the map refresh to only show the bookmarks available in that area. It would be a better solution to the problem of searching not just for things around where you are now, but also the area where you will be.  It will be a visual solution to the problem, giving users the ability to search by vicinity with just a few quick finger taps. Their alternative solution was the gimmicky augmented reality feature Monocle that overlays results on real-world images.

11.   Map view does not display Filter feature by default. Will only display Filter feature and locations for what has already been filtered for in List view in the previous screen unless a keyword has been entered in the search bar.

Solution: Include the Filter feature regardless if a keyword has been entered in the Search Bar.

12.   Bookmark icon is redundant.

Solution: Remove. Increase amount of white space to be more visually pleasing and less cluttered.

13.   In list view with the Date Added Filter selected, the date the bookmark was added is not visible or displayed. However, for the Distance From Me Filter, a compass arrow pointing in the direction of location and distance in feet/miles is displayed.

Solution: Display Date Added. Allow search by date (day, week, month, year).

PROPOSED REDESIGNS

While there are many areas on which the Yelp UI can improve, I have only included a few redesigns below.

IMPROVE SEARCH CATEGORIES

To strengthen Search function in Bookmarks Feature, Yelp's overall search feature needs to be overhauled and recategorized. This way, the search capabilities can be as extensive as possible for the more advanced user.

See attachment for my proposed search options and re-categorizations.

Research Sources:

Yelp Search API and General Search Parameters
https://www.yelp.com/developers/documentation/v2/search_api

Similar/Competitor websites and apps:

  1. openrice.com
  2. sunnypages.jp
  3. Swarm App by Foursquare
  4. zomato App

Prius Dashboard Redesign


Prius Dashboard Redesign


Redesign - Prius Auto Dashboard

Goal: Choose a poor interface. Redesign improvements.

Timeframe: 2-week sprint

Group project for UCI IN4MATX 284 - Advanced Prototyping and Design with Prof. Darren Denenberg

 
 

Netflix iOS App


Netflix iOS App


Netflix iOS app

Goal: Choose a good interface. Redesign it poorly.

Timeframe: 2-week sprint

Group project for UCI IN4MATX 284 - Advanced Prototyping and Design with Prof. Darren Denenberg

Navdy HUD Paper Prototype


Navdy HUD Paper Prototype


Paper Prototype - Navdy HUD

Goal: Choose an interface and create a paper prototype of it. Create a video of yourself using it with at least three screens and at least three interactive elements.

Interface: Navdy Heads Up Display (HUD) Hands Free Navigation Device

 
 

Design Deconstruction - Sprinkles ATM


Design Deconstruction - Sprinkles ATM


Sprinkles ATM Design Deconstruction

Sketch and Wireframe

GOAL: Select any interface. Work backwards. Breakdown the design into the following components:

  • Rough Napkin Sketch
  • Initial Wireframe
  • Refined Wireframe

Design Critique - Guerlain


Design Critique - Guerlain


Design Deconstruction Critique

Goal: Select an interface. Deconstruct the design.

IN4MATX 284 - Advanced Design and Prototyping with Professor Darren Denenberg

Health Plan Website


Health Plan Website


Health Plan Website Redesign

A few screenshots of the current website for Central Health Plan at www.centralhealthplan.com

 

Problem

  • In 2013, I worked in the Marketing Department at a local health insurance company named Central Health Plan. I took the initiative to propose our company’s website redesign when we were asked to participate in a webinar evaluating our website’s compliance with Section 508 regulations which requires that our website be accessible for all users, regardless of disability status.

o   We fared poorly on our evaluation, but because most of our competitors also fared poorly and our visit count was low, management did not see a need to prioritize this project.

o   I understood that our website is, especially in this modern day and age, one of the first and strongest impressions we can make about who we are and what we do to clients, business partners, and even new hires.  As part of the Marketing department, our responsibility for polishing up our image and online presence was entirely in our realm.

o   We were also legally required to be compliant with Section 508 accessibility regulations despite a general lack of adherence across the industry.

o   I saw the opportunity to make an impact on the website in a big way and so volunteered to become the point person on this project to advocate for the website redesign across all business levels and departments.

  • As the point person on the project, I collaborated with our IT department’s supervisor and staff to discuss adding design features in addition expanding upon the website’s existing functionality. They were happy to work with me as they were only previously told to add specific items per government regulations and requirements but not given instructions as to how it was supposed to look.  It was a challenge to communicate with the IT department via verbal/written requests through their IT ticketing system so I worked around it by drafting wireframes to give them a better visual representation of what we wanted to work towards. It made a huge difference in our workflow.
     
  • I led several meetings in order to get feedback from senior and junior levels of all internal departments on how they use the website and what features they would like to add. It was a challenge to get other departments to see this project as a priority but the more meetings we had, the more feedback they began to provide.
     
  • I drew comparisons between the websites of competitor health plans to see what useful and familiar features we could add that other plans had already put into practice with their clients.

Issues

  • Website appearance is very outdated and bare
  • Navigation links are small and use unclear language
  • Navigation links do not display contents on hover. Must click to open each link to see what each menu contains.
  • Each page is too wordy. Paragraphs upon paragraphs worth of information that is not laid out in an easy to read format.
  • SEO is not prioritized. No clear headings to distinguish each section.
  • Not optimized for mobile or tablet
  • A lot of links open in new windows which cause issues with pop-up blockers
  • No clear delineation between website’s use for members, brokers, and providers. No obvious login landing areas for different users.

Identify Users

Demographic/User Base:

  • Clients: Multilingual seniors age 65+ and their family members

o   English, Spanish, Chinese, Vietnamese, Korean

o   With disabilities

o   A key population receives Medi-Cal (a.k.a. Medicaid for those from low socioeconomic backgrounds)

  • Business partners

o   Medical Providers (doctors, nurses, etc.) and staff

o   Insurance Agents

o   Government Regulatory Entities

  • Internal staff

o   Member Services

o   Marketing and Sales

o   Claims Processing Department

Requirements

Set forth by Centers for Medicare and Medicaid Services (CMS) in Chapter 3 of Marketing Guidelines Section 100.1-100.6:

  • Must be clear and easy to navigate and updated at least monthly
  • A list of premiums and cost-sharing (e.g., co-payments, co-insurance and deductibles), including any conditions and limitations
  • All out-of-network coverage rules
  • Include all required member documents as PDF documents
    • Directories, formularies, privacy notices, CMS Star Ratings, request forms, translated materials, benefit information, appointment of representative forms, appeal and grievance info, Compliance and Fraud, Waste, and Abuse (FWA) info
  • Include applicable disclaimers on each webpage
  • Include a date stamp on each webpage with the date the page was last updated
  • Clearly label any links
  • Notify individuals that they will leave the Plan’s Medicare information website, if there is a link that will take an individual to non-Medicare information or to a different website
  • The toll-free customer service number and hours of operation, TTY number, and either a physical or Post Office Box address
  • Information on beneficiaries’ and Plans’ rights and responsibilities upon disenrollment
  • Plan service area
  • Online electronic enrollment via website or mobile
  • Etcetera…see full CMS Chapter 3 guidelines here for more. 

Design goals

  • Pick the right fonts and colors to highlight brand personality with compelling imagery and a clean logo
    • Adjustable font sizing for better viewing
  • Minimum size 14pt (regulation minimum is 12pt)
  • Use large fonts and implement good contrast between foreground and background
  • Serif style fonts only
     
  • Improve language and copy to be more clear and simplified
  • Clarify insurance industry lingo by using laymen’s terms
  • Streamline excessive language
  • Clarify left column link titles and improve navigation
  • Allow multilingual options: English, Spanish*, Chinese, Vietnamese, Korean
    • Remember user’s language choice
    • Allow easy adjustment to language choice after making initial selection
    • *If Plan’s service area includes language that exceeds 5% threshold, language is required to be translated for all materials
       
  • Color scheme: Distinguish Plan brand colors (orange, white, and green) from sister company PHW Medical Group (green and white)
  • Increase white space areas
  • Avoid links that open in new windows to work around pop up blockers
  • Mobile and tablet friendly
    • Responsive design layout for various screen sizes and desktop/mobile platforms
    • Add hovering downward pointing arrow to encourage user to scroll down/swipe up to view more content
    • Enable swipe functions
  • Improve website functionality for users in member, broker and provider portals
  • Distinguish between publicly accessible links vs. links that require login for access via icon
  • Add functionality to allow member to check eligibility for plans and order ID cards and other printed materials directly from the website
  • Add functionality to allow member to check eligible enrollment period time frames
  • Add easily accessible secure HIPAA compliant email portal login access for all users
  • Add Broker Certification website through portal and certification document upload
  • Add online education and training portals for brokers and providers
  • Add Broker Enrollment Application status viewing portal
  • Add contact a broker functionality to develop and track enrollment leads from website
  • Add online store to order marketing supplies for agents
  • Add Member Profile portal
  • Add Online Enrollment Application Submission Portal
  • Add secure, live, HIPAA compliant chat services for Member Services
  • Add online claim submission portal
  • Add online troubleshooting chat
  • Add Medicare 101 Basics info
  • Add Member Wellness Stay Fit and Healthy/Prevention Info
  • Improve SEO
  • Add map blocks to contact pages for physical address to provide directions

Conclusion

  • Submitted proposed wireframe but left company before changes were applied to website.

Agent Recruiting Orientation


Agent Recruiting Orientation


Agent Recruitment - Health Insurance Agency

Too often presentations in the healthcare industry suffer from being too cluttered, lengthy, and boring. This is my solution.

  • Most of the graphics and icons are ones I custom created for this project.
  • Large (minimum 18pt), serif font and clear contrasting color scheme consistent with branding.
  • Simplified insurance terminology with uncluttered, straightforward descriptions.
  • Clear, unambiguous, attention-grabbing, strong imagery with a simple, easy to follow layout.
  • Client requested slide transitions and object animations be removed so as to not detract from info for older clients.

 

PLEASE SCROLL DOWNWARD TO FLIP THROUGH PRESENTATION SLIDES

Usability Testing - AmariloJewelry.com


Usability Testing - AmariloJewelry.com


Usability Testing - AmariloJewelry.com

 
 

We found some human guinea pigs...

After I put eCommerce site AmariloJewelry.com through the ringer with several usability experts - I went to my users. Live, actual tests were conducted on real human beings in this process. No actual test subjects were harmed in the making of this study. These were my findings.