ZAG

End-to-end Personal Project:
iOS Comprehensive Messenger App.

MY ROLE

USER RESEARCH / STRATEGY / UI DESIGN

Problem

These days there are so many ways to keep in touch that it’s easier than ever to lose track!

Many smartphone users feel overwhelmed with the amount of daily messages that they receive, worried that they’re going to miss an important message, and then frustrated when they can’t organize or search their messages effectively.

For freelancers especially, whose work and social lives overlap, streamlining communication is necessary for their success.

Hypothesis

The idea is simple: what if all messages were in one place?

I started to think that if I could find a way to integrate all messaging services (E-mail, Text and Social Media) into just one app, I could help to bring clarity, professionalism, and ease to the users' lives.

Process

Starting off, I had a strong intuition of what ZAG required because initially I was building it for freelancers, like myself. However, that also meant I had a strong bias.

I was curious to know more about what the average user would want in an app like this.

Beyond being a business tool, ZAG is a tool for connection. How, for instance, would a technologically-connected yet emotionally-disconnect teenager react to this app? What were the ways that this could be a universal tool?

The only way to find out was to dive deep into user research and figure out what was important and why.

User Surveys

I started first by casting a wide net with an 19 question survey to understand users’ habits, likes, and frustrations with their current messaging services.

Completed by 26 users of all ages sourced from Reddit, Social Media and Personal Contacts, the survey resulted in a wealth of fascinating feedback.

Survey Results

* Top 3 ways to communicate with family & friends: Text (92%), Facebook (72%) and E-mail (48%).

* Additional favorite social media apps: Snapchat, Twitter, Skype, Whatsapp, Instagram and Google+.

* The most liked qualities of these messaging services: Speed, Ease and International.

* The 2 most frustrating qualities with personal messaging services were: Feeling Overwhelmed/Disorganized and Feeling less connected emotionally.

* Top 3 ways to communicate for business: E-mail (96%), Text (58%) and Facebook (17%)

* For freelancers, tools used for business: E-mail (100%), Text (70%), Facebook (30%) as well as Instagram (10%) and Slack (10%).

* The 3 most liked qualities of messaging services used for business: Professional, Easy and Fast.

* The most disliked qualities of messaging services used for business: Impersonal/Miscommunication and Technologically limiting.

* Only 20% of respondents use self-imposed organizational systems that are especially email and desktop focused. 80% of users do not use an app or system to keep their messages organized while the remaining. There seemed to be a no services for mobile message organization.

It was clear from the survey, that although different people used services and tactics, the majority of all respondents wanted an app that could be many things at once.

Across the board, all users craved apps that were fast, easy, technologically adept/organized, not overwhelming, as well as warm/human - able to facilitate a better sense of connection in their communication.

User Personas

My survey results confirmed many of my initial beliefs about ZAG, but they also gave me more insight into areas I hadn’t yet considered. But what did those new areas really mean?

It was time to dig deeper with some in-persona interviews; to uncover the biggest digital communication problems in their lives and understand why. I talked to 4 different types of users:

Persona - Zeke
Persona - Noelle
Persona - Whitney
Persona - Aleida

After these concrete conversations I was able to keep my interviewees in mind when designing ZAG. I was particularly fascinated by my conversation with Zeke.

It was obvious to me from our interactions that he had a deep desire to connect with others and yet he seemed to struggle with how to do engage socially.

This inspired me to create a product that could be more than just another business tool; I continued to ask myself, ‘what would Zeke want to see on this page?’ or 'how will this feature help Noelle achieve her goals?'

Talking with my users helped me identify their motivations and desires, and think about what potential features could be highly desirable in a paid version of ZAG.

Market Research & Competitive Analysis

Without an website or app in direct competition, it was crucial to see what other somewhat similar companies offered that could be incorporated into ZAG so I conducted an highly focused competitive analysis

With this research I was able to find out: what each company offered, whom they offered it to, their branding angle their strengths, and their weaknesses. From there, I saw how I could strategically position ZAG in terms of functionality, audience, and branding.

User Stories & User Flows

Once I had figured out my competitors’ weaknesses, alongside the desires of my future users, I could start to design what ZAG would specifically have to offer.

This meant creating user stories to prioritize which features would be important must-haves, and which features might be added on later, perhaps as part of a paid subscription.

I then visually fleshed out how each of these features of ZAG would work in a step-by-step process of user flows:

Branding: Creating a Visual Identity

ZAG seeks to appeal to both professionals and regular users, so it had to strike a balance between reliable, friendly, and exciting to use. The first step was deciding on a color palette that could viscerally impact the user's feelings while in the app:

Color Scheme

Theme
#27213C

Action
#613DC1

Accent 1
#8c88ff

Accent 2
#FF2E74

Name

To choose the name I decided to focus on the connection quality of the app. Trying out many different names about connection I came up with names like 'Luup', 'Weev', 'Jigsaw' and 'Buzz'.

None of them were quite what I wanted, but there was something special about the triangular letters of Weev, Jigsaw, and Buzz that was energetic, electric, exciting...

Jigsaw turned into ZigZag which was shortened into ZAG.

Logo

The logo for ZAG went through many different options. The Z of Zag was deconstructed into a lightening bolt to inspire the feeling of speed and modernity, using a fun playful purple while simultaneously being placed in a dark blue circle to remind the user of connection and trustworthiness of the app.

For the font of the name itself, I used a modern yet friendly font called 'Acier BAT.' I chose it for its solid structure and definite lines, while the outlined aspect provided an approachable feel.

Low Fidelity Wireframes

All of these were great ideas in theory but it was time to put them into design practice. I started sketching in a notebook and then brought these ideas into Balsamiq to flesh out digitally.

While I logically knew I needed to simplify, simplify, simplify, turning that into an app that was actually functional and powerful was harder than it seemed. Thus began my great experiment in trial and error.

Balsamiq Mockups

Lofi Balsamiq Wireframe 1 Lofi Balsamiq Wireframe 1 Lofi Balsamiq Wireframe 1
Usability Testing Process

Finally happy with the general concepts of my Low Fidelity wireframes, I prepared ZAG for usability testing. Working within Sketch, I created detailed greyscale mockups that incorporated accurate spacing, typography, and creative design to show ZAG at its full functional potential.

I first took these mockups for an guerilla testing adventure at my local cafe and talked to 3 helpful strangers. Read the interview notes and analysis here.

From there I was able to conduct a process of user testing at each design stage before implementing the changes into my next stage.

Message Thread

STEP ONE

BALSAMIQ

User Feedback:
Too many ideas, Visual Overload.

STEP TWO

GREYSCALE

User Feedback:
Still too many ideas. Take away extra contact info. Condense information.

STEP THREE

LOW FIDELITY MOCKUP

User Feedback: Take away logos to simplify design.

STEP FOUR

IPHONEX FINAL

User Feedback: Use pretty gradient to make it fun.

Contact Page

STEP ONE

BALSAMIQ

User Feedback:
Too much visual overload.

STEP TWO

GREYSCALE

User Feedback:
Too much overlap with Message Page

STEP THREE

LOW FIDELITY MOCKUPS

User Feedback:
Readjust layout to use toggle settings.

STEP FOUR

IPHONEX FINAL

User Feedback:
Readjust layout to use toggle settings.

Final Prototype

From a continous feedback loop of user research, feedback and implementation, ZAG was able to evolve from a complex idea into a simple yet smart app - helping users accomplish their communication goals and have fun while they're at it.

Conclusion

ZAG is something that I personally truly wished existed, so I poured my heart into imagining what it would look like. Happily it accomplished the goal of becoming an intuitive, clear, professional and welcoming app - all things desired by the users who informed every step of this process

I felt confident that I was creating something that, when finished, would be something people really wanted.

I knew from the get-go what I personally wanted out of the app, but also because of that, I knew I needed to check my opinions at the door. Sure enough, I was shown over and over the many things I had gotten wrong by the users and, as a result, I was able to come up with better solutions.

If ZAG were to be developed in the future, I would focus on how to create monetizable tiers for professional users. For instance, some users wanted to make sure that they could easily make sure they could choose which service they wrote their contacts with (currently the default, conceptually at least, is to just reply to the last message using the same service).

Further, an integration of a calendar system, as well as an case system, would surely be helpful to those freelancers looking to treat ZAG as their all-inclusive CRM system. Hopefully these additional features would be able to be monetized, and turn ZAG into a profitable company.

Lastly, I would conduct extensive user research during the implementation of ZAG with a focus on getting real-time feedback of what's working great and what can be improved.