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.
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 IssuesHorizontal 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.
Improve user conversion to increase event create.
Add richer functionality that are available in the web to the next version of the create flow.
[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
I presented the prototype to UI designers during our team meeting at the Apple campus.
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 IssuesClarity: 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).
[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
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 redesignConversion 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.