ux portfolio
TRANSCRIPT
Andy LaiUX & UIportfolio
Why I study UX Fun factsMore often than not, this is me:
reacting to experiences on:
website navigationtransit infrastructureclunky appsthe DMV
Being able to design a solution to a problem and to validate its design solution is the thrill of UX design for me!
I teach guitar to people, mostly younglings
I play in a video game cover band featuringmusic from the FinalFantasy series
I compose music in my spare time and admire composers like Nobuo Uematsu
There’s a better way...
My general UX process
Toolkit
Sketch 3 Invision Omnigraffle
PixateGoogle drive Balsamiq
Organizing a college website’s Information Architecture
Timeframe: 2 weeks
Problem: at first glance, the website looked navigable. Upon closer inspection, it appeared that content was miscategorized and found in unexpected places
Opportunity: since content was misplaced throughout the site, this project allowed me to restructure its IA and streamline its UI so the layout is consistent throughout the site
Project highlight: having the chance to work on a college website opened my eyes to the reality of dealing with IA and its challenge of presenting the right information at the right time and place
ResearchI browsed through the site while keeping John’s needs and pain points in mind:
1. information about continuing edu2. finding childcare
Finding information about continuing education was no problem
However, finding info about childcare was another story...
I asked 5 people to go on the current version of the website to look for childcare and no one was able to find it. This is one of 3 personas provided by the client
Current user flow analysis
too many steps!
There are 3 routes to take in order to find childcare info...
Research findings● Finding info about childcare was
next to impossible● A user with John’s profile would never
take any of the current 3 routes● The only reasonable path is under
prospective students but the amount of data entry is overwhelming and ultimately irrelevant for an alumni
○ John is neither a freshman or transfer student
○ required high school info
Proposed user flow
Solution: put childcare info under the continuing studies center so it’s a ‘1-stop shop’ deal. This will make childcare relevant to older adults seek continuing education info. One thing to keep in mind is “what if students straight out of high school have kids?”, then the placement of childcare isn’t effective. However, I called their childcare center and was told that the average age of parents is well beyond the high school student demographic.
Prototype 1Childcare is now found undercontinuing education because John would first look for info about continuing studies as an alumni.
It doesn’t make sense for him to go to his alma mater just to find childcare. Rather, childcare is a perk to have and is secondary to his primary task.
Usability test findingsI laid out 2 scenarios and tasks for test participants:
1. You are a 38 year old professional architect and have graduated from City Tech over 10 years ago. Currently, you want to look for information about some courses that will advance your career in order to learn new skills
2. Since you are already working, your schedule is very busy and you need flexibility. You have a 7 year old kid that you take with you everywhere and is interested in possible babysitting services from the school
3 out of 3 users were able to navigate to the continuing studies center3 out of 3 users were able to spot childcare from the side menuNavigation on the header was distracting: users wanted to click on prospective students or alumni and hesitated to click Academics
Prototype 2In order to eliminate thisdistraction, I relocated the header nav away from the top and re-designed it as a side menu closer to the fold.
User engagement skyrocketed by 50%. Test participants spent half as long on the home page before clicking on Academics.
Try the interactive prototype for yourself!
Next steps
Conduct A/B testing to truly validate the placement of childcare info under continuing studies. I would like to also perform additional card sorting in order to gauge people’s expectation of where they would expect to find childcare in a college website
Re-design the global header since it is mostly empty now and experiment with a scrolling ticker type of banner that displays relevant info such as emergency school closings due to weather, etc
Stack AIBackground: Stack is a reminder-focused customer relationship management (CRM) app that emphasizes last point of contact for professional networking. To do this, the app is based around the action of creating reminders for follow up with infrequently contacted professionals
Time frame: 3 weeks
Problem: the current app isn’t intuitive so people weren’t creating as many reminders for existing contacts as my clients hoped for. Can’t create reminders for new contacts until after adding them into contacts list
Opportunity: improve the onboarding process by teaching users the core feature of creating reminders for existing contacts on the home screen. Streamline the process of adding new contacts with creating reminders
Project highlight: I worked with 2 other UX designers and we had free reigns on design decisions without having our client to micro-manage the project
Research methods Key takeaways● User interviews: to get an understanding of
why Stack users weren’t creating reminders, I interviewed as many as 3 beta testers. Then I interviewed 7 additional people on behavior for managing their professional network
● Competitive analysis: to gain a better understanding on how CRMs worked, I looked at competitors such as: Contactually, Salesforce, Highrise and Charlie
● Comparative analysis: since Stack differentiates itself as a reminder tool, I also looked at other apps that allow for the creation of reminders. I used this analysis as a basis for re-designing the onboarding experience
● Stack beta testers forgot what the app was for● Stack beta testers also were not aware that
they could create reminders or they simply forgot how to
● Networking professionals do not only create new connections but also want to maintain genuine relationships with existing connections
● About 50% of interviewees trust and rely on their memory for reminders
Kate - Art Director Feature PrioritizationShe’s focused not only with creating new connections, but maintaining genuine relationships with her existing connections because she understands their value for future opportunities.
Pain Points-lack of onboarding-has tough time remembering details of first point of contact
Context-on the go-networking events-does not follow up with a contact immediately-waits until opportunity is right for referencing prior meeting
Needs-genuine relationships with existing contacts-quick with as least data entry as possible while creating new contacts or reminders
Current user flow - creating reminder
● existing contact: the only way to create a reminder for an existing contact is by swiping right on its contact cell from the contacts list. With no prior onboarding, users aren’t told of this interaction
● new contact: you have to add the contact first before being able to create the reminder from the newly added contact’s profile screen
Baseline usability test
this is the button to create a reminder after adding this new contact. From a baseline usability test, 0 out of 5 participants knew how to create a reminder after adding a new contact
Users have to add contact before given the option to create reminders for it
Proposed user flow - creating reminder
The re-design eliminates the mandatory process of adding a new contact before being able to create a reminder for it. I streamlined both processes into one screen. The user has the option of skipping the reminder but at least they’ll see it.
Wireframes - streamlined reminders
Wireframes - onboarding
Next steps
Continue testing and iterating the onboarding experience
Experiment with the ability to create reminders by accessing the reminders tab
Don’t let your dreams be dreams...
JUST, DO IT
To see additional detailed work, visit:medium.com/@alai1088
orcoroflot.com/andylaii