Tag: UX

  • Find a Doctor Tool

    Find a Doctor Tool

    Role
    Lead Designer

    Team
    Engineering Manager, 1 Engineer, UX Manager

    Platform
    Desktop, Mobile

    Johns Hopkins Medicine

    Objectives

    • Increase appointment bookings
    • Reduce friction for users who are overwhelmed by the options
    • Organize the doctor profiles to be more scannable and comprehensive.
    • Enhance the search results page.

    Homepage

    Using our Foresee survey results we implemented a multi-layered solution that caters to the most common user profiles. Search was often the first step for users so we expanded it to search by keyword, specialty or name.

    Providing a lists for locations and A-Z accounted for the remaining users as well as offering links to the other hospitals under Johns Hopkins Medicine.

    Search Results

    We added the left sidebar pre-populated with their current search, allowing the user to refine if necessary. The search term was also highlighted within the result card profile snippets. Since booking an appointment is a pain point, we increased visibility for location and phone number by adding them to the result cards. Due to the high volume of out-of-state and international patients, I designed an expanding panel that included their specific contact information.

    Profiles

    With this update, I had to organize a lot of content with priority above the fold. The challenge was that the doctors didn’t always agree on what information was most important for the user. There were a few compromises, and overall, the profiles were well received by patients and caregivers.

  • Print to Digital

    Print to Digital

    Role
    Lead Designer

    Team
    Project manager, 1 Engineer, Editorial Manager, Editorial Art Director

    Platform
    Desktop, Mobile

    Johns Hopkins Medicine

    Challenges

    • Create a user friendly admin for the editorial team to add their content.
    • Keep the artistic aesthetic of the print magazine.
    • The entire online experience should compliment the flow of the publication.

    Front-end

    The magazine had a bold color palette with strong frames and borders. I incorporated these elements throughout the design. I made the cover article the focus of the homepage to further showcase the impactful imagery from commissioned artists and photographers.

    The navigation followed the publication format for a cohesive experience.

    Winner

    Digital Health Awards

    GOLD / Hopkins Medicine Magazine (School of Medicine Alumni) / Division: Health System / Audience: Health Professionals / Classification: Digital Health Media / Publications. / Category: Magazine

    Additional Pub

    I also designed the digital version of the Dome, a magazine for staff of Johns Hopkins Medicine. This design also used the bold lines but I shifted to a softer color palette to differentiate between them.

    Winner

    Digital Health Awards

    MERIT / Dome (Staff Newsletter) / Division: Health System / Audience: Health Professionals / Classification: Digital Health Media / Publications. / Category: Newsletter

  • Upload Tool Redesign

    Upload Tool Redesign


    My Role

    Lead Product Designer

    Team
    Project Manager, 2 Engineers, Director of Engineering

    Scope
    UX, UI, Design System

    Platform
    Web

    The Problem

    The original tool addressed a fundamental need but fell short in execution. Users had to prep assets externally, navigate fragmented experiences, work around confusing CDN concepts, and struggle to find files in growing volumes. This friction created unnecessary context-switching and drove support escalations.

    Research Approach

    Key Findings

    User Flow Optimization Required

    The current workflow introduced unnecessary friction with multiple handoffs between tools and unclear next steps. Users needed a more linear, guided experience.

    Image Cropping Relies On External Tools

    Integrating the existing internal cropping tool could streamline the process. A gallery interface for batch uploads would allow users to review and crop multiple images before finalizing.

    Video Upload is clunky

    Previously, users uploaded videos first, then discovered they needed transcoding as a separate step. Offering a preview and transcode options directly into the upload flow eliminates hopping in and out of folders.

    Activity Stream Improves Engineering Support

    An internal activity log would give engineers visibility into user actions and file state changes, supporting faster troubleshooting without requiring users to describe what happened.

    Educational Content Reduces Support Load

    Widespread confusion about CDN functionality was driving support tickets. An FAQ covering common questions could self-serve many inquiries and reduce escalations.

    Design Strategy & Solutions

    User Flow Simplification

    I restructured the interaction pattern to reduce clicks by 40% through:

    Consolidated Upload Preparation

    Image cropping became available immediately after upload, with no external tools required.

    Integrated Video Tools

    Video preview and transcoding options moved directly into the upload phase.

    Unified Control Hub

    Preview modal serves as a one-stop-shop for all asset adjustments and actions.


    Image Asset Handling

    Gallery crop interface

    After upload, users see thumbnails and can crop any image without re-uploading. Common aspect ratios are offered as preset buttons.

    Spatial optimization

    Action dropdown with icon and label pairs reduces menu clutter

    Modal Window Addition

    Opening the preview modal allows the user to access the other tools/options as well. Tooltips were added as well for new users.

    Adjustable timing

    Crop immediately after upload or defer until later


    Video Workflow Needs Integrated Preview & Transcoding

    Previously, users uploaded videos first, then discovered they needed transcoding as a separate step. Integrating preview and transcoding directly into the upload flow would eliminate this cognitive burden.


    Information Architecture

    FAQ section – Addressed top support questions about CDN mechanics and file persistence

    Activity stream – Internal-facing tool showing upload history and system events for independent diagnosis

    Design System Alignment

    Visual Refinements

    • Enhanced alert system with color differentiation (success, warning, error) and corresponding iconography
    • Updated error messaging copy and styling to match system updates
    • Custom-designed a loading animation

    Type & Icon Updates

    • Icon audit replacing outdated assets with current Yahoo design system equivalents.
    • Typography and spacing updated to match refreshed design language.
    • Consistent visual treatment across all UI elements
    Error messages
    Alert bars
    Loading animation

    Key Tradeoffs & Decisions

    The Constraint

    The tool loaded all company uploads by default, creating navigation challenges and privacy concerns.

    Initial Recommendation

    Implement team-based directories for privacy isolation and intuitive file discovery.

    The Reality

    Backend architecture and project timeline didn’t permit this approach.

    What I Designed Instead

    A folder bookmark/favorites feature that allowed users to create quick-access shortcuts to frequently used directories. While not a full organizational solution, this provided immediate relief for power users managing dozens of files and laid groundwork for future improvements.

    Results & Impact

    40% Reduction In Clicks
    across primary workflows (upload → crop → save)

    Reduced support escalations 
    through integrated help content and activity logs visible to engineering teams

    Faster user onboarding 
    with clarified interface and contextual guidance reducing learning curve

    Qualitative Outcomes

    • User confidence increased -Transparent feedback (preview modals, progress indicators) reduced anxiety about asset handling
    • Cross-team alignment – Activity stream enabled engineers to support users more effectively without repeated back-and-forths
    • Reduced context-switching – Integrated cropping and transcoding kept users in a single interface

    Reflection

    This project demonstrated how research-informed design choices can improve not just user experience, but operational efficiency. By understanding both user pain points and engineering constraints, I was able to design solutions that respected technical limitations while meaningfully improving the workflow.

    The tradeoff on team directories taught me that perfect solutions often aren’t possible, but thoughtful incremental improvements can have a large impact while keeping the project on schedule.

  • Xbox Landing Experience

    Xbox Landing Experience

    Role
    Lead Designer

    Team
    Project Manager, 1 Developer, Account Director

    Platform
    Xbox

    Xbox Homepage with Banner Ad to LE on the bottom right

    The Xbox landing experience is an immersive hub on the Xbox console. The player selects the banner from the home screen, which takes them to the ad experience offering trailers, galleries, games, or sweepstakes. For Wild Hearts, I was provided a very vibrant asset pack full of beautiful visuals. The client didn’t provide any direction beyond requesting a gallery, trailer, and sweepstakes.

    I introduced motion to the design by animating paint-swipe elements sourced from the client’s asset pack. These animated textures added depth and energy to the experience. The result was approved by the client with very minimal changes, demonstrating that the creative choices aligned closely with their vision even without explicit upfront direction.