My expertise is UX design for web & mobile products. One of my top priorities when I design is to enhance user experiences and functionality of a product by creating intuitive, meaningful, and elegant design solutions. I analyze user needs and create aesthetically rich user interfaces for mobile applications and websites.

I also have professional experiences in front-end development. I designed and coded this responsive website using HTML5, CSS3, jQuery, and Bootstrap. The selected works in this website include projects in web & mobile design, graphic and print design, architecture, and short animation.

I enjoy learning new tools and skills. I am easy going, detail-oriented, and passionate about my works. Art and design has always been my passion. When I am not working on digital designs, I enjoy making ceramics and jewelry pieces for fun.
UX METHOD
Ethnographic research, User interview, Competitive analysis, Persona & scenario, Journey mapping, Interface prototyping, Usability testing, A/B testing, Interaction flow map
-
SOFTWARE
Sketch, Adobe XD, Photoshop, Illustrator, InDesign, Dreamweaver, After Effects, Axure, InVision/Marvel
-
PROGRAMMING
HTML5, CSS3, jQuery (basic), Bootstrap (basic), Responsive design, Adaptive design
-
3D MODELING
AutoCAD, Luxology Modo, Rhino/V-Ray, SketchUp, 3D Printing CAD/CAM
Let's connect and share our stories!
You can contact me at info@maricelachan.com
Maricela Chan Design

UX + UI DESIGN | Evite


As the sole UX designer, I work with project managers to define business and user goals. I analyze existing user problems (via user testing & VOC), propose design solutions, user test to validate solutions, & provide final specs for development on the Evite iOS/ Android mobile apps & website.


Evite is an online invitation service with over 100+ million annual users. The core user groups for Evite are moms with young kids. These users tend to have busy lifestyle and often have to multi-task.


My Contribution

  • Discovery: conducted usability testings on existing design, developed competitive analysis, gathered stakeholders requirements
  • Ideation & Iteration: created sketches and wireframes, and conducted usability testing to iterate on designs
  • Design: developed final UI specs, motion/transition design, all use case scenarios
  • Development: worked closely with engineers and project managers to release feature

  • Design Challenges of Existing Create Flow

    The Create Flow is a core flow for hosts to create an online invitation to send to guests.


    Existing Create Flow



    Usability Issues

  • Horizontal tab structure does not indicate required input and hide content one level deep.
  • Users cannot preview how guests would see the invite.
  • Since required fields are not indicated, if users proceed to add guests without filling in those fields, they would see error messages.
  • Missed valuable information: users saw a lot of values in the options section that is hidden under the settings icon. The icon placement is not obvious in the flow.

  • Business Goals

  • Improve user conversion to increase event create.
  • Add richer functionality that are available in the web to the next version of the create flow.

  • Design Requirements

  • [emotion] Users want to feel at ease, in control, and confident at how guests will see the invitation before sending.
  • [emotion] Users want to feel excited and accomplished during and after creating the invitation.
  • [usability] Since users jump between web and app platforms, the Create Flow should have similar user experience across all platforms.
  • [usability] Balance between information business needs and information users value according to its importance so advanced users can proceed quickly.

  • User Flow Chart




    Sample Sketches of Proposed Create Flow




    Sample of Annotated Wireframes




    High-Fidelity Prototype
    I presented the prototype to UI designers during our team meeting at the Apple campus.




    Solutions

  • Create Flow layout is similar to how guests would see the invitation. Using a similar layout develop user confidence and familiarity in how the invitation will look.
  • Users see invitation design updates as they type on the fields creates a sense of control and a feel of customization on the invitation.
  • As users complete each form field, a checkmark is animated next to the field to keep users focus and be able to see their progress.
  • Preview functionality is added to increase user confidence and certainty before sending the invitation.
  • New Create Flow unifies the UI and UX experience across all Evite platforms (iOS, Android, website).

  • Final UI for iOS development
    Design deliverable includes UI specs, video clips of micro-interactions, all use case, error states, and edge case scenarios.


    Final UI for Android development






    Design Challenges of Existing Add Guests Flow

    The add guests flow is a core flow for hosts to add guests and send out invitations.


    Existing Add Guests Flow




    Usability Issues

  • Clarity: import phone contacts do not import contacts with phone number
  • User error: cannot preview selected guests before sending invitation
  • Usability: time consuming to add contact one by one (no batch import)
  • Usability: share link is not obvious

  • Design Requirements

  • [emotion] Since users often multi-task while using the Evite app, design needs to be intuitive and efficient.
  • [emotion] Users need to feel confident in who they are inviting before sending out invitations.
  • [usability] Since users have short attention span, it is important to present shortcuts to users (such as sharing event link, importing contacts from email).

  • Business Goals

  • [conversion] Improve user conversion to send out invitations.
  • [conversion] Add texting invitation functionality (on top of email) to increase number of guests invited.

  • Sketches of proposed design and user flow




    Wireframes were created quickly and iteratively for user testing




    Solutions

  • Since users might have short attention spans, micro-interactions and obvious feedback are important to keep users focused to complete the task.
  • A new Selected Guests section is added for users to view their guest list before sending out invitations to build user confidence.
  • Since there are multiple ways to invite guests, it is important to balance and prioritize on how to present these methods so as to not overwhelm users.

  • Various import contact options

    [first image on left] Final option that was user test and validated
    Share event link feature is prioritized compare to import contacts feature. Importing feature becomes less useful for users after importing contacts once.


    Sample of final UI for development
    Design deliverable includes UI specs, all use case, error states, and edge case scenarios.


    Business impact after redesign

  • Conversion rate of Add Guests step improved significantly.
  • VOC regarding add guests decreased tremendously over time.
  • Share event link usage increased significantly and received positive comments from users via VOC.