Full Case Study

MARK Labs

Overview

  • Project - MARK Labs alpha product
  • Target Users - Program managers at non-profit organizations
  • Goal (Business) - Rapidly bring product from idea to prototype, ready to show at accelerator program demo day
  • Goal (User) - 1) Communicate value/ROI of social investing to clients, and 2) simplify data collection, reporting, and management processes*
  • Role - Lead UX Designer
  • Team - Product Manager, UI Designer, other members of start up core team
*These two goals represent the two products I worked on with MARK Labs after a pivot in direction

Summary

MARK Labs is an early stage startup bridging the financial tech and social impact spaces. In January of 2016, after the company was accepted into the Techstars accelerator program in London, I joined the team as their user experience design lead.

 

Problem

Wealth managers do not currently have the tools and resources to encourage their clients towards social impact investing, which leads to far less investments for positive environmental and social ventures.

 

Approach

Context was key. MARK is a startup, with a good sized team, and part of a prestigious accelerator program with hard deadlines and deliverables. Time was short, and resources were limited. The company also underwent a few major pivots in direction that altered the target user group, the problem being addressed, and the solution being offered. Any designer knows how much an ideal process can change under varying conditions. In this case study I hope to convey how I modified my process to meet the constraints and needs of the team.


Research & Discovery

 

Problem Definition & Team Alignment

Sitting in a meeting with the team just before their departure to London, it was clear that we were working with a complex scenario. Ideally we begin any user experience design process with discovery, research, and investigation into user needs, pain points, and current solutions to achieve their goals. In this case, for my own purposes as a designer and for the team to all be on the same page I opened my UX work with quick competitive research and straight into user journey mapping.

 

Competitive Research

Many startups feel they don't have competition. Unfortunately this isn't accurate or helpful. Even in the case that there are no products serving the same function, there are ways the public is performing the action you want to help them with. Henry Ford's competition wasn't another car company, but that doesn't mean he didn't have competition.

For MARK Labs, I researched the investment space and the many competitors we had in that space. There are a ton of investing solutions utilizing mobile and web technologies. And then there are others, like Charity Navigator, that focus on providing useful information for charitable support. MARK sat somewhere in the middle.

 

Task Flows

Within a few days of joining the team I was able to map out the full user task flows as I understood it.  The purpose of this was to align team thinking and to clear up any ambiguity about what we were proposing to build. In product design, like anything really, the potential for team members to be on totally different wavelengths is extremely common. The more we can visually map it out, the better we can all come to a common vision. Below are sketches and task flows I created for MARK. I was able to make iterations and improvements through close discussions with and feedback from the team.


Design

Rapid Wireframing

Speed was the name of the game with this project. The team wanted to get to product development as quickly as possible. Though again not an ideal UX process, we decided to rapidly put together wireframes of the full product to be used for testing and getting in front of users. Though I did complete preliminary sketched out wireframes for my own process, I decided to quickly put together the pages below and put them into a clickable InVision prototype. 

 

pivot

At this stage in the process the company went through a shift in focus that significantly altered the scope and purpose of the product we would be designing and building. Fortunately, this new direction also came with a new opportunity to bring in user discovery aspects that we were not able to conduct previously.

 

New Problem Definition

A new problem led to this pivot. The team discovered similar problems around capturing, visualizing, and conveying impact in the non-profit space, and from a non-profit perspective. Current methods for tracking program progress and key performance indicators is often haphazard and unsystematized. This created problems for the organization, as well as their funding institution to whom they're reporting.

Organizations currently use basic software spreadsheets to manually track data, which everyone agrees is old fashioned and wrought with potential for error. How then can a data management platform be tailored for the tracking needs of organizations and facilitate their reporting process in a streamlined, secure, and user centered way? 

 

User & Stakeholder Interviews

With me based in DC, and most of the team participating in the accelerator in London, it made most sense for other team members to conduct as many user and stakeholder interviews as possible in the span of a few weeks. Given my role as UX lead, we worked together collaboratively on building lists of key individuals to speak with, working on scripts and discussions on how to best frame questions, and clarify the goals and intended takeaways of the interviews. For the best subsequent product design, it was my job to ensure we were gaining something from the interviews that would contribute to a stronger product.

 

New Task FLows

With the new direction came new users and a new flow through the product. With insights coming in through user and stakeholder interviews, I was able to design a new process for how the product could work. As before, this exercise was as much a means to communicate ideas clearly with a remote team as it was to direct the product development. Shown here are some sketches of the new user journey.

 

Information Architecture & Taxonomy

The product dealt with data around work for social good, how it's recorded by organizations, how it's reported to their funders, and how it captures social impact. When designing a project for a user group that is highly diverse in terms of what they do, how they report, and even how they think/talk about their projects, we have to be careful in everything from navigation and flow to the terminology we choose. 

Below are some diagrams I created to help us think about hierarchy of information, and to map out the connections between various levels of data within the architecture of reporting.

 

Navigation

Designing our main navigation was a concrete output of the information architecture planning we went through. It is a result of our final decisions on the user journey coupled with the hierarchy of program data reporting and tracking.


Design

Comps & Prototyping

At this point, nearing the final stretch of the accelerator program, an additional interface designer joined the team in London who would work in-person with the team on a quick mock up. The value of having a second designer with a fresh style and process, even if on a very part time basis, helped to fuel what came out to be a great first step in the product mock up phase.

Below is a slideshow of select pages of our wireframe mock ups. Jakob, our other UI designer, pulled together a great first run of the product. From that starting place I took over to rethink navigation, add in new data entry pages and form creators, rework the flow around and program/component/data point entry, and overall polished the UI to ensure it reflected the company's goals and was consistent with user needs we learned from the interview stage.


THANKS FOR MAKING IT TO THE END!

The above case study represents the work I did for MARK Labs during the Techstars accelerator program. The company is based between DC and London and working launch a product in the coming months. For more information about the company please visit their website.

*All images in this case study are the property of MARK Labs Inc.