CLIENT
JetPack Data
TEAM
3 People: Client, Visual Designer, Myself
CONTRIBUTION
User Research, UX/UI, Wireframes, Usability Testing
DURATION
March 2018 - May 2018
I worked on user research, usability testing, icon designs, UX and UI designs for the webapp data exploration experience. My visual design colleague worked on branding and the design of the website landing page.
JetPack Data proposes an intuitive data analytics and visualization platform geared for 'the common man'. The founder believes that Data Visualization should be intuitive and accessible to everybody and that you should never miss an insight hidden in a million rows of data.
TEAM BACKGROUND
This was one of the first projects where Trellis, the digital design collective, I cofounded with my friend Xuan was put to the test. The concept for Trellis is based on pair programming, where designers with compatible and/or interchangeable skills and slightly varying levels are paired to work on a consulting project for a startup.
The theory being that designers, whether in a career transition or trying to gain professional experience with a new technical skill, have difficulty getting projects consulting for startups to gain professional experience, and startups have a difficult time finding designers who are able to cover every facet of skills required for their needs. Pair designing solves many of these issues as the resulting team dynamic cultivates peer mentorship, reinforced accountability, increased bandwidth, greater perspective, as well as improved communication and documentation.
THE CHALLENGE
-
Although, our client had a functioning platform he was unsure who is the ideal user for his platform and therefore unsure how it's value propositions are received.
-
Our client wanted to build loyalty where customers return regularly to his site.
-
He also wanted a more attractive UI having received commentary that the colors and visual appeal of his site was lacking.
From our client:
"The concept that I have trouble communicating is: Most tools such as Tableau, Qlik are excellent dashboarding tools (Good for keeping track of daily/weekly metrics. But if you want to understand the drivers behind these metrics or explain the performance of your KPIs, you need a data exploration tool like JetPack Data"
Original Landing Page
Redesigned Landing Page with New Branding
RESEARCH
Insights: User Interviews
*Since our client was based in Paris, France, there were other interviews which our client conducted in french after translating the questions from our interview guide for his French speaking current users.
Naive Users (potential users):
Adrien - Former Groupon Sales management
Sebastian - Data insights manager at LinkedIn
Alex - Former business analyst
Current Users: (Non-English Speaking)
Jacques -CaseLawAnalytics - Startup - Data Exploration for strategic legal advice
Tristan - Medelse - Startup -Supporting sales teams; realtime important; uses Mixpanel
Thomas - Spartan - Startup - Used for quick chart creation vs excel; unaware of other features
Interview Insights:
-
Analysts tend to use whichever analytics tool they are told to use by their employer.
-
Experienced Data Analysts tend to be skeptical of the site, and most data analytics sites in general.
-
It is very difficult to convince an analyst to integrate or switch the platform they have been using.
-
They are critical of platforms that tend to serve all the edge use cases imaginable, critiquing those sites as "overly complicated" and "clunky"where doing very simple customizations may take much longer than necessary.
Usability Tests of Original Site with Naive Users:
-
Are pleasantly surprised by the usefulness of the platform after building a chart or two and viewing the File Summary page.
-
Experienced Analysts become convinced that the platform is capable of doing everything they would need it to do, there just needs to be a better on-boarding experience for users to understand the tool.
-
Common critique that the site is not very visually appealing
Conclusions:
-
Experienced scientific users are not ideal users -- they prefer working with numbers rather than visual data tools (“This is a hammer without a nail”)
-
In the end we decided to focus on business users instead, with the value proposition for ease of use and accessibility to visually exploring charts (i.e. Adrien - sales management)
Original Explore Page
Redesigned Explore Page
Insights: from Client Collaboration on Use Cases
Use Cases
-
Create Charts on build page
-
Explore charts
-
View Dashboards
-
View file summary
-
Analyst needs to modify data for chart
-
Analyst needs to explore
-
Analyst invites new collaborator
-
Updating the data for weekly reporting
-
On-boarding a new user
-
By walking through user flows with our client, we discovered capabilities of the platform that are not intuitive to users which would require tutorials or tool tips in orders to fully utilize.
-
For example the drill down via right clicking on the chart
-
Data manipulation like creating new columns derived from existing columns
-
That there are deep links created with each step of the chart creation where users may share the link with a collaborator to build on the chart exploration. A close experience to real time collaboration.
-
-
We were also able to narrow down the stages that our ideal user would pass through to become a loyal product user and design for those scenarios.
-
Naive User
-
Someone learning about JetPack through Landing page
-
-
Interested User
-
Someone going through onboarding demo
-
-
Product User
-
Someone who regularly uses JetPack Data
-
-
Narrowing down our ideal user and most common use cases helped us prioritize the redesign to fit within our client's budget.
Original Build Page
Redesigned Build Page: Chart Exploration
Redesigned Build Page: New Chart with Style Customization
Redesigned Build Page: New Chart with Data Set Customization
We based our requirements for our UX/UI design on Themes and Principles:
-
Themes:
-
Exploration
-
Ownership
-
Context
-
Education
-
Delight
-
-
Principles:
-
Reduce # of choices
-
Each input from user yields reward
-
Clear linear path forward (vs. branching choices)
-
Appropriate follow-up CTA at key points of user journey
-
Experience is prescriptive and opinionated for 80% of user journey, explorative for 20%
-
Onboarding demo should focus on a narrow slice of the platform, not exposing all features
-
Use gamification and rewards to incentivize users to move forward
-
JOURNEY MAPS
EPICS & STORIES
Original Dashboards Page for JetPack Data
Redesigned Dashboard Page
Redesigned Dashboard Page
INFORMATION ARCHITECTURE
Process:
While we desired to change much of the information architecture for the platform, with our client's time and budget constraints, we prioritized for optimizing the content of each page and minor changes in the user flow, with a greatly improved user interface to help JetPack Data attract new users and retain current users.
Current Information Architecture
Recommended Architecture (not initially implemented)
The main intention of the restructure of the IA was to allow users to access more directly their dashboards, current architecture (3 clicks to Dashboard), restructure (1 click to Dashboard). Many small business owners and consultants were returning to upload new data and create the same charts for their reports.
The current architecture presents users with "Upload Data" as the only CTA in the Landing Page, and funnels users directly into the Explore screen upon selecting their file (2 clicks in) where the user can select their dashboard to view all their charts (3 clicks in).
The suggested restructure centers around the user's dashboards rather than the broad exploration of the charts, while the unique feature of JetPack Data, is not as commonly used by returning users as building charts and selecting charts for their reports from their dashboard. The restructure still prompts users to upload data and explore their data at multiple points in the user flow.
WIREFRAMES
Low Fidelity Wireframes: Rough sketches for different chart exploration concepts and layouts, chart building layouts, and data upload screens.
Medium Fidelity (Patchwork) Wireframes: to help our client visualize and understand the same functions with different content hierarchy, we used patchwork wireframes rearranging screenshots of the original screens and creating new compositions with features from analogous competitors or features we created ourselves.
BRANDING
Branding: Collaboration with Client
What value do we want to communicate?
-
Make better decisions
-
Get insights faster
-
Analyze data faster
-
Be Autonomous and not be blocked by BI or IT resources
-
Eventually save time by automating your analysis
-
No need to be a data scientist to do data exploration
-
To understand the drivers behind metrics and explain the performance of your KPIs, you need a data exploration tool like JetPack Data
Branding Words:
-
Fast
-
Sophisticated
-
Secure
-
Rewarding
Related Branding Words:
-
Simple
-
Powerful
-
Insightful
-
Helpful
-
Useful
-
Supportive
-
Modern
-
Polished
Branding Voice:
-
5% - 10% bright, contrasting colors
-
Low-Graphics
-
Evokes simplicity, attracts scientific users
-
White-dominant (color of elegance)
High Fidelity Wireframes: iterations with interaction call-outs
Final High Fidelity Wireframes: Data Summary Tab
Redesigned Data Summary Page
Redesigned Dashboard Page
Redesigned Data Summary Page
Redesigned Your Data Files Page
Redesigned Your Data Files Page: Format Tip Revealed
Final Landing Page