Customize Messenger App for iOS

Customized Messenger App Rebecca Wyatt UX/UI Designer

Customize Messenger App for iOS

Role: UX/UI Designer 

UX/UI Design Tools:  Research / Pencil / Balsamiq / Sketch / Figma 

Designed a messenger app that can be customized to your unique style: colored bubbles, unique sound notifications, delay/schedule messages and a Chat Bot that helps you with tips and therapy when you need some support!  This app is called, ‘MEZZY’ and its tagline is ‘EASY/FUN/SAFE’. Nothing worse than sending the wrong message to the person you care most about or your boss. Group messages can be stressful when your not sure who is on the message string, MEZZY will resolve all those stressful scenarios. Or maybe you just like to be super organized and unique when your messenging 24/7, this app takes cares of that too! 

My Approach

To design an app that is delightfully easy, unique, and makes you feel good about that message you just sent. Customizing bubble colors can help you recognize who you are quickly messaging without worrying if you sent the wrong message. The ability to have unique sound notifications is just another step further in making sure you know who this message is from. And the ability to delay message or delete is an option that everyone can use. Scheduling those important messages like birthday wishes is another feature that I wanted to design for that extra customization.

My Challenges

Challenges were widely spread through different age groups and needs for this app.

 

Customized Messenger App Rebecca Wyatt UX/UI Designer

After UX research and finding that all age groups could benefit from a customized messenger app I began sketching up the first screens with pen/paper to see what was the core findings needing to address. My challenges were an Intuitive Flow, Trending Patterns, Privacy, and a Happy Path.

Customized Messenger App Rebecca Wyatt UX/UI Designer

My Lo-Fi Design

My wireframes screens designed in Balsamiq were extremely helpful in creating the perfect flow for the user. I was wanting to focus on the user having less screens and wanted to incorporate as many bottom drawer elements as possible but realized in the process that trending patterns were of those that the user is most comfortable with and not necessarily less screens.

Challenges were widely spread through different age groups and needs for this app.

My Hi-Fi Design

My final interations were done in Sketch app and imported to Figma. I presented two cycles of constructive feedback to depict how I incorporated those findings into my second cycle.

Customized Messenger App Rebecca Wyatt UX/UI Designer

Cycle 1: Feedback revealed that the lack of color in UI elements was not necessarily a good thing, using color can be tricky but establishing a color pattern for UI elements is not a bad thing when the app is rich in color. One visual critique was the round message bubbles were not ‘Modern’ in design. Also UI guidelines regarding Onboarding screens should be easy to read and have less than 3 lines of text ie: bullet points. 

Customized Messenger App Rebecca Wyatt UX/UI Designer

Cycle 2: Revisions were made from previous critique/findings: implementation of color to CTA buttons and other UI elements as well other UI guidelines such as lines of text.

Final Hi-Fi Design

Below screens are catagorized in the groups of Settings flow.

Customized Messenger App Rebecca Wyatt UX/UI Designer
Customized Messenger App Rebecca Wyatt UX/UI Designer
Customized Messenger App Rebecca Wyatt UX/UI Designer
Customized Messenger App Rebecca Wyatt UX/UI Designer
Customized Messenger App Rebecca Wyatt UX/UI Designer
Customized Messenger App Rebecca Wyatt UX/UI Designer
Customized Messenger App Rebecca Wyatt UX/UI Designer

User Flow

UX Goals

Using the Google HEART framework to set UX goals it was apparent that my strong point is Metrics. 

Customized Messenger App Rebecca Wyatt UX/UI Designer

Creating a visual graph with Meaning and Experience catagories to validate designing this app: customized messenger.

Customized Messenger App Rebecca Wyatt UX/UI Designer

UX Post Design

Documenting tasks on a UX Debt Sheet clearly defines what feedback should be priotized and excels the app to be launched in a timely manner with few obstacles during this segment of buiding the app.

Customized Messenger App Rebecca Wyatt UX/UI Designer

UX Post Research

Creating a Google Survey Form post design of app revealed that potential users are interested in this app and have other customize features that could be designed in next round.

Customized Messenger App Rebecca Wyatt UX/UI Designer

Branding Visual Collateral

 

Customized Messenger App Rebecca Wyatt UX/UI Designer

UCSC Silicon Valley Extension Course: Designing User Experience For Smart Things, Virtual Reality and Wearable Technology

Instructor: Eric Dorf Senior UX Designer Google.com