IBM RedRock(Alpha) 

Project Goals:

Take the existing RedRock technology(a spread sheet paradigm) and enhance the user experience by applying IBM Design Thinking. The twist: the entire design process is to be completed in 10 days and it needs to run on Spark. 

This was a 10 day design sprint that took about 20 days in total to implement. I played the role of Ux Designer and Researcher.  

Research - Who is this for?

The target user is an entry - mid level Marketing analyst, focused on social media analytics. In just a few days we collected as much data as possible; ranging from reddit as me anythings to job description analyses from other companies and a sponsor user interview. Below is the persona* what we created. 

*It is nearly impossible to create an accurate persona with as little data as we had, but in the spirit of agile, we had move forward and use what we had. 

What does RedRock do today?

Keeping in mind what Monica needs, we took a critical look at the existing RedRock experience and documented elements of success, and areas for improvement.

There were some obvious changes that needed to be made, for example, a normal spreadsheet paradigm on an iPad is difficult to navigate when every cell is actionable/editable. We challenged the overall spreadsheet interface as a whole too because why does Monica need to see the Tweets in a spreadsheet? If Monica are interested in the analysis of the Tweets and has limited coding ability, we can hide the spreadsheet all together. 

What is the entire Ux flow?

Using the scenario of searching by a specific hashtag, we examined what the user experienced looked like holistically. We created a journey map to indicate successes and varying levels of painpoints across the Ux flow. 

We found a few workflow jumps that broke the user experience. For example, when creating a visualization, the new graphic covers the entire page without adding any navigational elements to assist the user. The only way to proceed is to close the visualization. You cannot save it or share it, thus rendering it useless. 

Project Requirements

With a bit of research under out belts we documented the requirements, here is a sample.

ReckRock needed:

: : data visualization capabilities 

: : simple data interactions that do not require coding knowledge

: : backend connection to Twitter

: : algorithms to create similar connections 

Sketching

Some elements that we thought were successful was the simple search aspect which returns a field of pre-populated visualizations.  A lot of the functionality like locking favorited Tweets or saving all your past work into a dashboard were not in the scope of this 10 day sprint. 

While finalizing the user flow and wireframes, we moved into a higher fidelity to apply the IBM Design Language. Here is a sample:

The app 

This app was released locally in Alpha. While I cannot provide a link now, in Beta RedRock will be available in the app store for everyone to download. Check out the blog for details. 

Check out a live demo that I presented at our departments July All Hands. 

Meet the Team!

I worked with engineers, data scientist, other designers and executive stakeholders.

RedRock(Beta)

Project Goals:

After the experiment of RedRock(Alpha) was validated, the next step was to move from the MVP and into something more holistic and solid. I wanted to take some of the interactions model that were successful and retain those, while adjusting others and focusing on the data. 

For RedRock(Beta) I was the only designer working with a group of 5 developers over the span of 3 weeks. 

I took a look at RedRock visual design and called out some areas of concern. These were taken into consideration while working to correct them. Below is an example of some of the concerns that I wants to correct. 

I wanted the visualizations to speak for themselves. I wanted to strip the UI of all extraneous information to let the data breathe freely. Below is the new architecture of the app, clean and smooth. 

While applying the visual design, I provided the development team with this necessary readlines. Here is an example of a simple redline that I provided. 

Taking the consideration from the visual design audit I knew I needed to change some the color pallet. 

While working through the visual design, I was considering the loading interaction for the app. I built this in AfterEffects using an Illustrator file as my base. 

Here is a video walkthrough of the app.