Trello_UXDIJALAS_Project3

Project 3

Erin, Justin, & Myron

Trello wants to increase user engagement by creating a better chat feature for individuals collaborating with Trello.

Discovery & Research

Evernote Slack Google Chat Asana

Group!Chat YES YES YES YES

Invitation NO NO YES NO

New Msg Notification!

YES YES YES NO

Upload Files YES YES NO YES

Direct Message YES YES YES NO

Auto-Reply NO NO NO NO

Preview of Link&File NO YES NO NO

Emoji YES YES YES NO

Competitive Analysis

Comparative Analysis & Inspiration

Slack Gmail Chat• "Rich" chat experience • Does group chat well • Multiple channels • Integration with other apps

• Simple interface!• Fewer features !• Small chatbox in

corner of page

User ResearchSurveys & Interviews

• Gathered info about people's behaviors and preferences involving collaborative apps and chatting

• Found our interview subjects

• Demographic!• Behaviors!• Necessities!• Pleasures!• Pain Points

Creating Personas

• Avoid presuming persona by stereotypes!

• Don't make up anything about personas (even hobbies!)!

• Do follow-up interviews

Sorted by:

Findings:

Joy27, Project Manager, fairly tech savvy, likes playing board games with her friends on weekends and playing guitar

Behaviors

Pains Needs

• Primarily chats about urgent things!

• Keep tasks organized and under control!

• Having to upload pictures one by one!

• Repetitive notifications cause confusion

• Likes apps that help her organize complex things in simple ways!

• Sharing pictures

• History of the conversation!• Silencing Notification!• App visually appealing and

engaging

Pleasures

Alex38, stay-at-home dad, tech-savvy, early adopter, short attention span, loves traveling when he can & writing when he can overcome the crippling self-doubt

Behaviors

Pains

Pleasures

Needs

• Manages personal projects, family grocery & to-do lists, planning trips with friends!

• Buys newest Apple products the first week

• E-mail notifications when he's still online chatting!

• Hard to find shared files in group chat

• Looking back at images that were shared in a conversation!

• Analog look

• Functional and enjoyable Group chat!

• Quick & easy signup process

Andy31, teacher/small business owner, tech savvy, a visual person, enjoys cooking and drawing in his leisure time

Behaviors

Pains

Pleasures

Needs

• Constantly chatting (LOL)!• Uses chat as primary

method to contact friends & business associates

• Hates when he needs to find comments/conversations that are buried!

• Email is cumbersome

• Loves push notifications!• Enjoys multifaceted

conversation with emojis, pics, etc.

• Instantaneous, synchronized communication!

• Complete chat experience (emojis, sharing any files easily, integration with other apps)

!

After Creating Personas...

Made connections and grouped research by

common themes

Feature IdeationAffinity Mapping

MoSCoW

User FlowsSketching & Ideation

Trello board

Trello board

Trello board

ListBoard

Card

Design Studio

Sketching & Ideation

Sketching & IdeationDesign Studio

Final Rough SketchSketching & Ideation

First WireframeChatbox Upload History Archive

1

1. Topic of conversation!2. Goes to history of current topic!3. Reset current topic to "General"

2 3

4. Shared files in the conversation!5. Settings button for notifications, etc.!6. Chat History

45

67

7. Dropdown list of topics for chat history

Testing

• Topic structure and the relationship between cards and chats weren't clear to people!

• Reset topic wasn't clear

2nd Wireframe1

1. See member list in this conversation !2. Indicator of current topic/task/card!3. Replace gear icon with hamburger icon, same function

23

More Testing

• Better, but still not intuitive enough!

• Confusing for different chats to happen in same window

• Still too prescriptive and constraining for how users should interact with it

3rd Wireframe

Card chat1. Changed from card name to "Chat about this card"!2. Replace member button/dropdown with real-time member list to see who’s

active

12

3rd Wireframe

List chat

1

1. CTA to start a conversation about the list!2. Hidden chatbox slides out and clings to list

2

3rd Wireframe

Board chat1. User clicks "Chat about this board", hidden chatbox slides out from the left!2. Click arrow button to hide the chatbox!3. See other members in this conversation

3

21

Prototype

http://invis.io/2T2PUV9NF

http://invis.io/2T2PUV9NF

Next Steps

• Testing!• Direct messaging!• Building out the chat history!• Multiple chats simultaneously?!• Implement sharing files & shared files folder!• Online status

What We've Learned

• "An ounce of prevention is worth a pound of cure."!

• Every step is iterative - be careful of going too far down one path too soon!

• Design needs to be extremely explicit!• Group work is hard - collaborative design is even

harder

Thank you!Feel free to contact us with any questions or feedback.

Erin - [email protected] Myron - [email protected] Justin - [email protected]

mailto:[email protected]



Chat about this list



Members JMML EO


Myron: Here’s what we’re currently working on.

Justin: More stuff we’re currently working on.

Erin: Blah blah blah.

3:06 PM

3:08 PM

Chat about this board















Axure LearnThis is how you take a deeper dive into Axure (and google is always awesome to use when you're stuck or have questions)...http://www.axure.com/learn

Myron: Here’s a great link I found 3:06 PM

Justin: Thanks, Myron! 3:08 PM


Chat about this boardMembers JMML EO

ChatChat

Apr 11 at 3:21 pmChat History…

Erin O’Hara started a chat about this card.

Erin O’Hara attached Trello interview questions to this card.

Leave a comment in the activity feed here.

3:08 PM

Justin: When should we aim to have all of our interviews done?

Myron: Let’s start affinity mapping interview results tomorrow afternoon.

Erin: Sounds good!

3:06 PM

3:08 PM

Chat about this card

Members JMML EO

ChatChat






Sounds good!

Members JMML EO

3:08 PM



3:06 PM

ChatChat






Members JMML EO

3:08 PM



3:06 PM

Trello BoardCard detail page

pops outEye-locating

Chatbox on Card detail page

Select a Card

Typing in text Press Enter on keyboard to send Conversation

User Flow

Logged out Sitemap

Home Sign-upLogin

Tour Pricing Apps Jobs Blog API Help Terms Privacy

Logged-in Sitemap

Boards Search Create Profile Notifications

board

chat

list

chat

card

chat

Documents

Trello_UXDIJALAS_Project3