Simba-Blocks — Francine Caruccio

SIMBA Blocks

SIMBA Blocks is an enterprise-grade platform that delivers high availability, full chain freedom and development acceleration tooling all while integrating the power of dynamic apis to simplify web3 development. It addresses governments' and enterprises’ unique challenges when implementing blockchain-based solutions.

Overview

The Problem

Building Web3 applications can be time-consuming and complex, straining internal resources and slowing down progress.

The pages throughout the platform are not user friendly or visually appealing.
The platform lacks necessary features, slowing down the development process.

The Goal

To simplify the web 3 experience by abstracting the complexities of Blockchain development to provide organizations, governments and companies with off-the-shelf blockchain applications.

To design user friendly and intuitive pages that will accelerate and simplify Web3 development.

Project Duration

June 2022 - August 2023

My Accomplishments

Being the only Junior UX Designer in the team working alongside the Lead UX Designer has given me an enormous opportunity for learning and growth.

Designed several pages from scratch.
Re-designed and improved on several pages throughout the platform.
Designed and added dozens of items to the product backlog that all positively contributed to the user experience. These included everything from little things like icon hover state inconsistencies to information architecture and navigation improvements to ease and shorten steps for user tasks.
Self-started competitive analysis and user interviews.
Contributed with a massive component/pattern to the design system. I researched, designed, and prototyped a right-side-drawer for multiple-step user inputs that has since been used and expanded upon greatly for several other contexts. My design creation has become a foundational component in the way approached in those parts of the platform.

Role & Responsibilities

UI / UX Designer

Research
Competitive Analisys
Visual Design
User Flows
Prototyping

“I was Francine's manager and UX Lead while she was at SIMBA Chain. She is a talented designer and is constantly seeking out resources to improve her craft.

Francine is proactive in her approach to improving a product. She does not settle nor shrug at areas in a product's user experience that can be improved. Of her own initiative, in addition to her regular work, Francine designed and added dozens of items to the product backlog that all positively contributed to the user experience. These included everything from little things like icon hover state inconsistencies (highlighting her eye for detail) to information architecture and navigation improvements to ease and shorten steps for user tasks.

In addition to being a gifted designer, Francine practices a growth mindset and actively and aggressively seeks out resources to learn and grow as a professional. Because of her drive for learning, Francine shows more rapid growth than others, and I won't be surprised when she passes up her peers and myself in skill in less time because of it. She knows where she needs to grow, and has embedded it into her process. Every new user story was an opportunity to read up on new best practices related to the task. For example, while working on improving a specific dashboard, Francine started her work with a comparative analysis of recent dashboard releases in other products, informal interviews with internal users of the dashboard, and seeking out reference materials for dashboard design best practices.

In addition to a whole slough of quality additions, Francine also contributed a massive component/pattern to our design system. She researched, designed, and prototyped a right-side-drawer for multiple-step user inputs that has since been used and expanded upon greatly for several other contexts. Her design creation has become a foundational component in the way we approach those parts of the platform.

Any product, UX, UI, or interaction design team would benefit greatly from having Francine.”

Jacob Lowry

Lead UX Designer at SIMBA Chain

Case Study: Bring Your Own Storage

The Process

Step 1 - Understanding (the Project & the User Needs)

The first step was to understand the user needs, project goals and technical requirements.

Feature Overview:

The Bring Your Own Storage feature allows users of the Simba Blocks platform to connect their organization's account to their existing storage solution, allowing them to continue using the storage provider they are already familiar with and have their data stored consistently with their existing infrastructure. This feature also allows users to securely store and manage the credentials for their custom storage solution so that they can access their data without having to enter their credentials every time.

Benefits for the Users:

Allows users to bring their own storage solution and tailor their storage to their specific needs.
Gives users more control over their data storage and access.
Allows users to use the storage solution that best fits their needs.
Provides flexibility in terms of storage options.

User Stories:

As a user, I want to be able to connect my organization's Simba Blocks account to our existing storage solution so that we can continue using the storage provider we are already familiar with and have data stored in a way that is consistent with our existing infrastructure.
As a user, I want to securely store and manage the credentials for my custom storage solution so that I can access my data without having to enter my credentials every time I need to access it.
As a user, I want to be able to choose from a list of supported storage solutions so that I can be confident that my chosen solution will work seamlessly with Simba Blocks.
As an administrator, I want to be able to update the list of valid storage solutions for my organization so that we can ensure that only approved solutions are being used.

Technical Requirements:

The feature should:

Connect their organization's Simba Blocks account to their existing storage solution.
Allow administrators to update their organization's list of valid storage solutions for their organization.
Allow users to choose from a list of supported storage solutions.
Test the connection to the custom storage solution to ensure it is valid before allowing the user to use it.
Work seamlessly with the platform.
Allow users to securely store and manage the credentials for their custom storage solution.
Ability to configure a custom storage solution for an organization from the supported storage solution.
Ability to store and manage credentials securely.
choose from supported storage solutions only.

The user should be able to:

Login into the UI and, within the Org Admin Panel, be able to configure the storage options within the particular org.
Bring his/her own AWS S3, Azure Blob Storage, and IPFS.

For this project as usual I had to take into consideration many technical requirements as well as learn about the problems my designs were supposed to solve.

To understand the product requirements I had to:

Read though the technical documentation written by the product team and engineers on Confluence.
Have constant communication (through Slack and Zoom meetings) with the engineering team involved in implementing the back-end tasks so I could understand the architecture, capabilities and limitations to be able to work on the possible user flows.
Do my own research.
Communicate with the UX Lead Designer to get feedback on ideas that I came up with and ask any questions I had.

I had to learn about storage adapters and endpoints…

…So that I could:·

Understand the credentials needed for each storage solution so I could design the necessary fields the user would need to input their credentials into.
Create the validation flow.

During the understanding phase many questions and considerations would pop up in my mind:

What happens when selected storage is full?
What storage solutions does Blocks support? Azure Blob, AWS S3, GCP, others?
What authentication solutions does Blocks support for storage?
There should be an initial test that occurs to validate the credentials and endpoints provided to Simba. If the response is incorrect, then?

A screenshot of just some of the many answers I gathered from the development team:

Some research information I gathered so I could understand each of the storage providers:

During the understanding phase I really enjoyed keeping my references within Figma for quick access:

Step 2 - User Flows

Step 3 - Sketching

Once I had most of the information I needed such as the technical requirements, user stories and user flows in place I was ready to sketch!

Step 4 - Feedback from UX Lead Designer

After paper sketching and working on some design iterations in Figma, I would meet with the Design Lead to get feedback on ideas and answers to some questions that came up during the sketching phase.

Step 5 - Final Designs (after several iterations)

Main page:

Expandable rows:

When expanded, each row needed to contain certain information about the respective storage solution and include possible actions the user may want to take.

Flow and designs for archiving a storage solution:

Filtering and sorting:

If no storage solutions have been previously added:

Some other projects

While I’m in the process of updating this portfolio and working on the case studies for each project, here are some before and after pictures of some other pages I have worked on.

The Process

The Users

The initial user research was performed by the product team.

Then, for each specific project I was responsible for developing and expanding on the user flows and information architecture.

User Needs

”Engineers and development teams need a simple and flexible toolkit and infrastructure setup to connect their existing or new applications to the blockchain.”

Goals