8 items found for ""
- Copy of Coming soon - WF | cathyfang.com
Homepage Download Resume My design story is coming soon. How about we meet, and I tell you the story? 😎 👉 +1(647)219-2369 cathyfang0109@gmail.com
- Project 1 | cathyfang.com
Credit Card Mobile App Bill Payment Flow My Role - Lead designer Ideation Facilitate UX Design Design Validation Visual Design Collaborations Product Owner Developers Researcher Web platform designer Platform Mobile App Year 2019 THE GOAL Enable customers make real-time payments directly to their card card through the mobile app they use to check balance. BACKGROUND Capital One Customers need to make payments to their credit cards through their main financial institutions. This often means +3 days of funds that are just floating around. No longer in a customer's bank account, but not freeing up more credit on their card. For people who are trying to build their credit score with low lines of credit, this is often a very stressful period of time. Capital One has the technical ability to build real-time payments for customers, where their payment will go through and open up credit almost instantly for more spending. However, we never have the feature in the native mobile app experience.
- Costco digital coupon
cash back Mobile app COUPON mY ROLE Design Lead L ead Designer | Research | Ideation facilitation | IA optimization | | UX design | Visual design | User interview | | Design Iterative | UI implementation | UX measurement | | Mentor intermedia designers | Project goal Create a mobile first cash back coupon with a great and easy to use mobile customer experience. Background Customers want a digital solution for redeeming their cash back - CEMP Verbatim Approach Led a 3-day design sprint Day 1 Understand Customer Needs Understand why my reward balance has become zero. Tell me when I can expect the coupon. Get me my reward coupon sooner. Explain how can I redeem the coupon. Communicate what to expect after I have redeemed the coupon. Journey Map Day 2 Ideate & Storyboard Find common theme from storyboards Day 3 Sketch flow / test Sketch flow Hallway testing result Wire frames Different Entry points FLOW MVP design delivery https://capitalone.invisionapp.com/share/JG9R7KI7X32#/screens/211412471_Cashback_Coupon Identify Reusable component Build into our design system Identify common theme from different features Digital cash back coupon flow Credit limit increase flow Same customer behavior Share UI/UX Different feature use this component
- Payment flow | cathyfang.com
CRAFT CAPITAL ONE CANADA MOBILE BILL PAYMENT EXPERIENCE My Role Product Design Lead Platform IOS & Android Responsibilities Design Strategy Design Process Facilitation Usability testing UX, Visual and Interaction design Team Product Owners, Developers, Researchers, Legal & compliance THE PROBLEM Capital One’s payment process delivers below CX (customers experience) expectations 3rd highest complaint calls-driver Disjointed user experience: customers need to make payments in other banking apps and set Capital One as a payee to make the payment THE DESIGN PROCESS IDENTIFY THE DESIGN PROBLEM Abstract problem Concrete problem The ask from the payment team is high-level and undefined , need to transform it to a more understandable, actionable design problem statement. My approach Collaborated with the payment team and research team to conduct different research actives to learn user needs. Research activities - Empathy interview with 16 customers - Call centre agents interview - Competitive analysis - Other internet research (CEMP, etc) Identify user needs - Build journey maps from learnings - List user needs by each stage of the journey - Frame the problem from the key user needs THE PROBLEM STATEMENT How might we enable our customers to pay off their balance with an effortless, real-time & transparent experience through our digital platform (mobile app & web). ALIGN WITH THE SCOPE Payments is a complicated area in itself, with lots of legal requirements, technical constraints, payment service regulation and other dependencies. To tackle this complex experience properly and get alignment with multiple stakeholders about the project scope would take a bit of time. However, the timeline for the first launch is 6 months. My approach Get everyone in the same room to align on the understanding and design direction by facilitating a 3-days design workshop Key activities HMW activities & Affinity maps Goals and hurdles Competitor analysis Ideations & Prioritization Concept mockup Heuristics evaluation The scope The team aligned on focusing on the key moments of the flow and move forward to discuss the solution for the following opportunities: How might we ensure customers are confident their payment has been received? How might we be as transparent as possible with customers as they're paying? How might we ensure customers are confident their payment has been posted? ITERATIVE DESIGN INITIAL MAIN USER FLOW MOCKUP HEURISTICS EVALUATION Bring legal, payment, tech, product teams in a room, lead a discussion on the concept mockup, collect feedback and thoughts from the team. Guide teams provide comments/feedback by following considerations. Does this flow reflect the overall payment process? Does this flow meet all legal/compliance requirements? Does this flow allow users to perform actions by mistake and easy to navigate back? Does this flow include any unnecessary steps? Does this flow miss any function? LEARNINGS Is there a better way to display balance payment options? Is there a way to enable customers to schedule a payment, and allow them to cancel it when they need A legal message about first-time payment will have 3 days delay requires to display throughout the flow Prototype VI USABILITY TESTING Validate hypothesis Uncover potential content & minor design issues Proactively identify any potential pain points Assess if users can effectively, efficiently and satisfactorily complete the tasks Research goals LEARNINGS AND DESIGN REFINEMENT Learning 1 It took a while for customers to figure out where to add a new account Tooltip hins to the entry point Refinement: First-time update interstitial Learning 2 Learning 2 It took a while for customers to figure out where to add a new account Customers did not aware they could schedule the payment Refinement: Adjust visual hierarchy Learning 3 Customers don’t understand the legal message concept. Refinement: Display message on related actions VISUAL DELIVERY Typography, spacing, colour consistency DETAIL INTERACTION DOCUMENTATION SUCCESS MEASUREMENT Partner with product owners and research team to define the learning metrics How did we define success 60%+ enrolled for the OTP feature The result 42% enrolled for the OTP feature Out of those customers who didn’t enroll (58%), 82% of dropped out after trying to set up their account through the feature 60%+ enrolled for the OTP feature 70% Out of those 42% enrolled user, use this feature to make another payment NEXT STEPS Further Monitoring: Discovering any issues Quantitative (Usability testing, surveys, call data, analytics) & Qualitative research (Interviews, call listening) Design refinement Partner with the product owner to prioritize refinement release strategy A/B Testing on subsequent releases
- Autodesk Share Parameter | cathyfang.com
Service Parameters Context Parameter Service is a cloud service designed to assist BIM (Building Information Modeling) Managers in managing shared parameters in Revit . Revit is a building design software with complex data models. Shared parameters are defined as non-geometric data in a building project that can be shared across different projects. For example, they can include specific details of windows. The Problem In multi-million dollar building projects involving collaborations with several large enterprise partners, architects and BIM managers face the challenging task of managing hundreds of thousands of parameters. This extensive process is not only time-consuming and costly, but it also presents a high risk of errors. By the way, this is what a parameter looks like. Yes, BIM managers need to manage hundreds of thousands of this kind of txt file on the local drive for one project. 🤯 My Approach 🥳 🧐 Concrete Solution Complex Problem I led multiple research projects to identify key customer pain points. UX audit Interviewed 15 BIM managers 7 Key Painpoints Uploading and Creating Parameters "It's incredibly difficult to upload and create parameters - we have to do it one at a time, which is just not efficient." Complicated Labeling Process "The process of labelling is complicated. It takes so much effort to get it right." Versioning Management "Difficult to manage the version, have use other git software." Visibility of Existing Parameters "I struggle to see what parameters already exist. There’s no clear way to easily view them all." Editing Parameters "As a user, editing parameters in this system is an absolute nightmare. It's an extremely difficult and frustrating experience every single time." Limited Access Control “There’s no effective way to control who can edit or view certain parameters. This lack of access con trol can lead to major issues in data management.” Locating Parameters "Finding the parameters we need is always a challenge. They're just not easy to locate quickly." Solution Statement An all-in-one cloud service enabling multiple users to easily contribute, manage, and explore parameters in Revit, accessible anytime and anywhere. How Did I Craft the Solution? The Design Highlight Features Demo Apply Different Access Level Tackled Painpoint Limited Access Control “There’s no effective way to control who can edit or view certain parameters. This lack of access control can lead to major issues in data management.” Form View & Label View Tackled Painpoint Visibility of Existing Parameters "I struggle to see what parameters already exist. There’s no clear way to easily view them all." Uploading and Creating Parameters Tackled Painpoint Uploading and Creating Parameters "It's incredibly difficult to upload and create parameters - we have to do it one at a time, which is just not efficient." Bulk Editing Tackled Painpoint Editing Parameters "As a user, editing parameters in this system is an absolute nightmare. It's an extremely difficult and frustrating experience every single time." Create a label Complicated Labeling Process "The process of labelling is complicated. It takes so much effort to get it right." Tackled Painpoint Search & Filter & Saved Filter Tackled Painpoint Locating Parameters "Finding the parameters we need is always a challenge. They're just not easy to locate quickly." UI and Visual Delivery Search & Filter & Saved Filter Design the interactive pattern and contribute to the design system Drag and drop interaction Recognizing that the treeview is a reusable pattern, I took the initiative to design an interactive standard pattern and contributed it back to the design system. The Impact Achieved a notable uptrend in user adoption among the target audience within the first six months, indicating the strong appeal and effectiveness of the initiative. Customer Said
- Mobile design system
Build a design system from scratch My ROLE Project Lead Build core team Stakeholder alignment Establish framework Establish team contribution model Define components Onboarded team to Figma Team Mobile App platform owner Features product owners Tech lead Content writers Platform IOS & Android Native ToOLS Timeline 3 months (Phase1 ) Background Different designers and development teams contribute to the mobile native experience (IOS & Android) Observations: Chaotic process Redundant work Inconsistent experience Identify problem statement Conducting stakeholders, designers and development partner interviews, we consolidated the feedback and aligned on the problem statement. The problem statement Lack of clear UI guidelines & reusable components for mobile app user experience results in: an inconsistent experience cause user confusion and disorientation inefficiency working process for designers and development team The solution Build a design system that incorporates design principles and guidelines documents basic visual elements, reusable UI components & patterns design file includes reusable UI components code library First phase delivery (3 monts) Key Strategy Principles Figma documentation framework At least 5 Components The Process 2 MAIN SESSIONS FIGMA Centralized Design for Designers GITHUB Centralized Components for Developers The Frameworks tHE GOVERNANCE The next step Building reusable components, base on the limitation of the team bandwidth, we identify and build the reusable components along the product roadmap. The success Delivery We established a scalable design system. We defined principles and foundational elements, as well as collectively designed and documented over 10+(5 codified)components within 3 months with a part-time team. Internal survey 97% of developers and designers think the design system is useful Adoption 5 new features adopted reusable components to refine the experience kEY LEARNINGS Project won’t be success without a team. Without developers, designers, product owners, copy writers and many others, it would losing the opportunity to get things right at the beginning. Get as many people in the process as you can, the insights you gain from a cross-skilled is the key for the project success. Align on the goal first and keep bringing it on the table in the later process. Get the key players in the room early, and ensure you are aligned on the goals (Long-term & short-team). This clarity and focus is essential for your decision-making and sanity. Build a system along with learning. Design always is an iterative process, it is OK to not be perfect at the beginning, keep getting feedback both from teams and customers to refine the component and process to become great, as long as ensure the decisions are based on the long term goal - not just a short term feature satisfaction.
- Coming soon - API | cathyfang.com
My design story is coming soon. Homepage Download Resume How about we meet, and I tell you the story? 😎 👉 +1(647)219-2369 cathyfang0109@gmail.com API Launched successfully! 🙌