Designing ThinkUp 2.0

Over the past year, through 8 alpha and 15 beta releases, ThinkUp has evolved into a rich platform that captures and analyzes data from Twitter, Facebook, and Google+. All this time, the developer community has been more focused on ThinkUp's internal engine than its user-facing look and feel. ThinkUp's current design, generously created by Bill F. at Dash30 in his free time, came together in a piecemeal fashion, bit by bit, as new functionality emerged.

So far, we haven't taken a comprehensive, user-focused approach to designing ThinkUp's application interface and design. That's about to change.

For the past 7 months, Expert Labs has been working closely with Mule Design to define what our target users want and need, and how the application can serve those needs, clearly and in the spirit of ThinkUp's community and mission. We're so pleased with the ThinkUp 2.0 look and feel Mule Design has created, and we're thrilled to finally pull back the curtains and unveil their work.

Today, Mule Design's Erika Hall explains ThinkUp 2.0's design, and the research and thinking behind it. Read on to get the details and catch a sneak preview of what to expect in ThinkUp 2.0.

---

Now that we have been working with the (terrific) ThinkUp team at Expert Labs for a little while, together, we have arrived at a design that meets key goals and forms a strong basis for future development.

We want to share this design with the wider community to make sure that we haven’t missed anything essential to ThinkUp.

The Background

At the beginning of the project we conducted initial research and established key goals for the application design. These goals guided all of the subsequent design work.

The goals

• Encourage strategic use of data from social media.
• Create a look and feel that is warm, welcoming, and supportive of the strategic goals of Expert Labs.
• Accommodate users from a variety of organizations and technical backgrounds.
• Structure application interactions around user need and core application capabilities.
• Simplify workflow and messaging.
• Create guidelines for making design choices that the open source community can use as the application develops.

What we heard from current and potential users

During our research we conducted 7 interviews. We grouped these interviews into 4 user types: 2 Small Businesses, 2 Content- & Community-Focused Organizations, 2 Government Agencies, and 1 Personality Type User. Of these 7 interviews, 5 were current ThinkUp users and 2 were potential users.

• Current users know what they would like to do with the application but not how to accomplish the goal.
• Users know the difference between communication/content creation and analysis but will focus less on analysis if the way to do that is less clear.
• Lack of prioritization means users stick to what they already understand
• Users have high expectations for accuracy. The complexity and inconsistency of messaging reduces trustworthiness.
• Users had some trouble with language choices that were misleading or “put them off” the application a bit.

In order to meet these goals for the application design, we worked in close collaboration with the Expert Labs team to create a simple, extensible interface framework visual design system that would lend itself to continued application development.

The overall structure

In order to accommodate continued growth and development of ThinkUp, a key goal of the redesign was to create a solid, intuitive structure. 

Dashboard

The dashboard aggregates all of the key insights across social networks.

The other areas of the application are divided among the basic questions that ThinkUp should answer:

Activity: What has [profile] published or interacted with in social media?

Response: What is the social media reaction to [profile]?

Connections: Who is responding or interacting to [profile]?

Conversations: What discussions are taking place?

Links and Media: What media or topics are appearing in the activity?

Each of these acts as a filter and a lens on the social media activity coming through the application, allowing the user to focus on a given aspect of all activity to answer the most relevant questions at the moment.

Within each of these areas, there is typically an insight stream, labeled Updates, which is an opportunity for ThinkUp to report back any observations of note, insights pulled from the data, relevant to that area of the application.

Any data relevant to that section can be graphed.

And following that is the activity stream for the section filterable by service or activity type.

Also, Saved Searches offers the opportunity to save reports.

The Look and Feel

We designed the application in warm greys in order to be easy on the eyes during frequent use and allow the information to come forward. The interface itself is lightweight while retaining a sense of dimensionality for a little bit of visual sophistication. We intend the navigational elements to very clearly orient the user in the application without dominating the experience.

The pages posted here to exemplify the design system are:

Dashboard

Activity

Conversation

Connections

Account Info

The Interface Elements

Here's some of the thinking behind each of the interface elements.

Header

We kept the header very light and focused on information about the profile the current user is working with. If there are multiple profiles, the user can switch among them.

Secondary Navigation

Within an individual profile, the next most important element to the framework is the secondary navigation down the left side. If there is new activity in that area, the green indicator "lights up" to encourage the user to explore the different views of the information.

Messages

On the dashboard you will see the message styles for system messages/alerts, tips, and new activity.

Profile Pics

Within ThinkUp we have begun to create a visual language for different relationships, so the user can tell at a glance the significance of another user. Arrows signify whether it is a one-way, or mutual relationship and a border indicates that the user has exceeded a threshold of "importance".We kept this visual language very light so that the user pic remains the dominant visual element.

Updates

This is a stream of any trends,  milestones, or significant changes ThinkUp has noted along with a visual indicator of whether this is positive or negative for the profile.

Summary of Activity

For cases in which it is possible to visualize activity trends, we have provided a visual language for graphs. We anticipate this will be a rich area of further application enhancement.

Activity Stream

For cases such as [Profile] Activity and Reponses (From others on social media platforms, this activity can be viewed in a continuous stream and filtered by service or other criteria.)

All of the modular elements that appear in the primary content well are designed to be collapsible to the header to help the user focus on the desired set of insights.

We also included the design for the Account Settings page to illustrate what any form in the application would look like.

NOW: Looking at this model we developed working with Gina, Andy, and Anil, let us know if we can clarify anything or answer any questions in order to help you, the community, extend the system and further develop the model to help ThinkUp be the best, most useful and pleasant way to capture content and get insights from your social media activity.

---

Send your questions and feedback about Mule Design's work to the ThinkUp project mailing list, or post here in the comments. We're excited to hear what you think.

Comments

[Sikosis]

Wow ... Nice and Colourful UI. I like it.

[Atle Mo]

Can't wait for this design to be deployed! – When can we expect this? ;)

[Boinzy]

Yes, when might we see this?

[Gina Trapani]

No launch date for ThinkUp 2.0 just yet. But ThinkUp 1.0 has an adapted version of this design, and it's available now:

http://expertlabs.org/2011/11/thinkup-hits-10.html

[ItsCharlKruger]

Hi it really looks awesome! This having been posted over a year ago.. Has a version been released with these enhancements yet?