Case study #1
Improving the user experience of
equity management
Design concept
Design Research
Visual Design
We got the opportunity to work with WE.VESTR – an equity management platform that focuses on time efficiency, transparency, and generating financial inclusivity by managing shareholders, employees and portfolio in one centralised platform.
The problem statement WE.VESTR provided us with was to enable their users to use financial data for business growth by analysis.
In more clear terms they wanted help developing three main areas. More attractive and intuitive data visualisation. Improve the experience of editing and importing data to the table. And to expand the financial section with functions such as forecasting and budgeting.
We guided them to a new, modern and intuitive design for the platform with new features and functions completely led from the users perspective.
Design
Research
Visual Design
Immersion
Research
Define
Design
Evaluate
Refine
Loads and loads of research. Initially to understand what financials and equity management is all about. Understanding the financial terminology to the side, for us to wrap our heads around the pain points and opportunities we designed a research plan consisting of the following activities:
Competitive Analysis to explore what other equity management tools have to offer and identify what strenghts and weaknesses there are amongst them.
Visual research to understand how to display financial data in the most intuiative way. As well as the to see the common trends in the industry when it comes to budgeting and forecasting.
Hotjar recordings to identify opportunity areas related to how the users interact with certain elements on WE.VESTR:s current service.
User Interviews to gain deeper insights redarding finance management and the users overall experience when using WE.VESTR:s service.
So, most people go through a university degree to understand the complexity of economies. What did you to design for it?
During the course of this project we had a shared understanding of placing the users at the heart of our process. By conducting semi-structured interviews with WE.VESTR’s users we learned about their needs and challenges regarding finance management. We later collected all their answers on post-it notes in Miro and started searching for common patterns.
Meet William Verstappen. The user persona we created from the insights gathered from the interviews. His primary goal is to fuel, grow and expand his start-up business.
In addition to the user persona we created a user journey to visualize a summary of challenges the user experience when navigating through the service.
Four weeks in to the project we had to make sense of all the data we gathered from primary and secondary research. We used affinity mapping to cluster all of our findings. This exercise helped us to identify eight focus areas to move forward with.
Compare Data Sets
Founders have the need of comparing different data sets to make financial decisions. This option is not provided by the service. We must create a way to showcase different numbers in one clear graph.
Calculate Growth
The users compare seasonal results to see how their financial are progressing. We need to find a way to compare financial metrics from different time periods to meet the users need of calculating growth.
Data Editing in tables
Current editing of Finance tab is not intuitive enough based on the recording from Hotjar. We need to create a better solution for editing and saving the rows in the table.
Displaying Intuitively
The users have different needs when reviewing a graph. Displaying graphs in one option means that the user can not get detailed information. We must create graphs that are understandable for anyone reviewing it.
Detailed Graphs
All users have different financial models and needs when displaying data. They need flexibility in terms of visualizing their data in order to facilitate transparency with investors.
Excel Integration
The finance industry is dependent on Excel. Making it possible to draw information directly from Excel would optimize the users time and overall experience of the service.
Dashboard Customization
All companies have different structures when it comes to budgeting, forecasting and stakeholder management. We must create a way to customize the dashboard in order to meet each founders needs.
Investor Transparency
Founders have the need to feel trusted by investors to self-determine how to work within a budget. Although, major financial changes needs to be communicated and that is not provided in the service.
With our key insights in mind one might think it would be an easy task translating them into design solutions. For my team and I it was the opposite. With so much data and a million ideas – we got stuck. Therefore I set up a full day workshop with my team members. We kickstarted the day with an ideating exercise called the 6-3-5 Brainwriting method to stimulate creativity.
We ended up with plenty of ideas that were later clustered into patterns. Later on we took all of our gather ideas to the sketching table and built a lo-fi paper prototype we all agreed on.
Must be loads of data, how did you move from research to design?
We all knew that alignment is essential when five designers work simultaneously on the same design. For that very reason we transferred our paper skeleton to Figma and created a Frankenstein prototype by assembling various components from our clients current design and our visual research. At this stage we did not care too much about the UI or aesthetics – what we needed from this exercise was a common visual understanding to move forward with.
With our mid-fi prototype we began usability testing with the users which opened our eyes to some aspects that could be improved. During the tests we asked open-ended questions and gave the users tasks in order to see how they naturally would interact with our design.
As a guiding example of how the users feedback influenced our design iterations – see the journey of one of our components down below.
We got provided with the Design System and guidelines from WE.VESTR, but we decided to change a part of it to improve the overall consistency.
After several rounds of iterations based on the users feedback we delivered our final prototype. We met our clients need of creating a more attractive and intuitive data visualization by modernizing the overall design with new colors, visual elements and features. A main feature that has been added to the design is the widgets. Their purpose is to enable the users to customize the dashboard after their individual business needs. We also improved to accessibility aspect of the design by making the graphs and numbers visually clear to the users. As well as creating a more intuitive experience by replacing, or iterating, on certain elements that the users experienced as pain points. Finding the Edit button and comparing different financial categories to give a few examples.
Enough with research and iterations, what about the actual design solution?
Implementing forecasting and budgeting in the design was a challenge since those functions are not supported within WE.VESTR’s current service. Moreover, there are several models that can be used to conduct both forecasting and budgeting and we needed to find a solution that was adequate for all businesses.
The forecasting tool we created enables the users to predict future results based on historical data that are already uploaded in WE.VESTR’s service. We made sure to make this key function intuitive and easy to understand by adding a toggle switch to change the view. In retrospective this might be the solution I am mostly proud of.
Another challenge to conquer was how to implement the users budget in WE.VESTR’s service. We knew from research that our users set up their budget in Excel and trying to replace that method would be an unrewarding solution. Instead we worked around the problem by creating a templet option that enables the user to upload their data from Excel to WE.VESTR’s service. Moreover we visualized the budget by adding it as a line of reference in the graph.
Moreover we met our clients need of improving the experience of editing and importing data to the table by creating interactive columns. A simple solution that made a great difference for the users who easily got lost in the table when trying to edit the right number. Additionally we added a comment function to the table because of the users need to report financial changes to their investors. And for WE.VESTR to maintain their core value of facilitating transparency between founder and investor.
Carmen Beltram, Industry Leader
“It was a very well done work and very professional. Among the best presentations. I would hire you to do the research for my own projects”
Maarten, CEO at WE.VESTR
“You overdelivered on every point. Great job team!”
To summarize, do you have any reflections of your own?
Work around the problem
Despite the great collaboration I had with my team members and the client we were stuck in the process many times. What I have learned from this experience is to not let the challenges interfere with the ability to move forward. Working around the problems we came across has been essential for my team and I to progress. At some points all we needed was to be creative with the challenges – arranging workshops, taking another research approach, sketching or creating dummy versions of our design.
Importance of user testing
What I highly value with this project is that the users has been placed at the very heart of our design process. All ideas and iterations are based on their needs and feedback. More than once the users reminded us how important it is to included them in the process by simply questioning our design decisions. Let’s just say that our interpretation of the financial design language did not always make sense – luckily the users helped us identify these hiccups so we could iterate and improve our design.