What I learned

As a product designer, your goal is to create an intuitive and pleasant user experience. You do this by having a defined user persona so you can understand your user’s likes and dislikes, pain points, and goals for using your product. Creating a defined user persona is done through research and often takes time. If you don’t have a user persona, you can typically depend on the market analysis to gain a better understanding of who the customer is. However, what if you don’t have either?

For this project, the biggest challenge posed was not having adequate time spent on research and user persona development. After I developed the design system and gave the application a new look, each week was spent adding new features and working through the different interactions. Some of the features were a pretty basic add that would quickly enhance the product. However, our team was often challenged with prioritizing features. By not having a clear user, we couldn’t prioritize features based on user needs but had to use our best discretion.

Eventually our team developed a clear process that would validate designs with research and user feedback. Through this process, I learned so many valuable lessons, but the key takeaway was: RESEARCH, RESEARCH, RESEARCH. Since the nature of the product was very unique, developing a clear user persona was key. Without having an understanding of the different use cases, it was hard as a designer to put myself in the user’s shoes.

How it works

Mind map

Outline

Table

Check it out for yourself 👉

Process

Modus operandi

[ moh-duh s op-uh-ran-dee, -dahy; Latin moh-doos oh-pe-rahn-dee ]

What I have learned through this project and other projects, is that the UX process is often not linear. Each phase of a project requires different deliverables, and due to deadlines and time restrictions, you must adapt your methodologies to fit the current circumstances.

In the first phase of BrainSquall, I was hired on for a small stint to quickly take BrainSquall’s MVP interface and evolve it into a user-friendly interface.

Understand Phase

I wanted to gain a better understanding of BrainSquall:Who was BrainSquall’s target audience? What is money-making model? What is the primary service that BrainSquall is providing?

First Iteration

Original Application

Home page where the user is able to create a new board

What the user initially lands on when selecting a new board

What happens when a user starts adding elements

Iteration 1

Below are the initial challenges I had for the first sprint:

• How does the user know which view they are in?
• How does the user know each view will be editable?
• How can I indicate to a user that if they make edits on an element in one view, it will be reflected in all views

Additionally, BrainSquall wanted to introduce the concept of layers. Layers would allow a user to compare data using the same template. For example, if you were comparing the same department across different organizations.

I quickly chose colors to represent the individuality of each view and to quickly show the relationships between the three when an element was selected. An active view is indicated by an outline and expand icon. When an element is selected, the element will be highlighted in all views. This allows the user to see how editing an element in one view will reflect in another view.

For the initial iteration of layers, I create tabs to represent each layer. Layers was very challenging to portray because it was such a unique concept. For the first iteration, my goal with creating tabs was to convey to a user that all layer qualities are the same.

Design System

I developed BrainSquall’s brand identity and design system. We wanted BrainSquall to have a fun and playful feel. We chose copy that portrayed our personality, and bright colors to avoid the use of serious (& boring) colors commonly used in business applications.

The initial colors chosen were temporary just to show the relationship and unique capability between the three screens, but did not meet accessibility standards. To select colors, I used a color generator to match colors with our primary purple. By giving each view a distinct color, it differentiates the three views.

Demo Board

While the goal is to design a product that doesn't need a tutorial, we felt that it was necessary to include a demo board with a walk through in the outline view.

After receiving our first customer, we received the feedback that the first version included tutorial text and they found it very helpful. I created a popup that shows how to create a child, sibling, and text. Additionally, I began to add a help and support guide feature in the support button at the bottom.

Teamwork

The key to a great product

Our team had to opportunity to meet with Pivotal Labs, and it was a tremendous learning experience. Pivotal Labs is a consultancy that helps people excel their products. For our workshop, we brought a problem that we had been struggling with:how to drag and move an element.Since BrainSquall has PONs, there is a hierachry to the elements. How does moving an element effect the relationship between elements? The team at pivotal taught us how to approach the problem. Making design decisions should be a collaborative team effort and pivotal taught us how to work through a problem and come up with possible solutions.

We started by focusing on the problem and creating a problem statement. Since we don’t have a user we assumed that a business strategy consultant would be a primary user.We came up with the following statement:“As a business strategy consultant, when I want to represent a changed relationship. I have a problem because I have to re-type everything.”

With our problem statement, we then began whiteboarding possible solutions and had a vote. It was very valuable gaining insight and ideas from everyone else. Sometimes as a designer you get stuck thinking of possible designs and it is important to gain other perspectives. Some of the designs were things I have not even though of before. One solution was moving the elements by the “branch” versus dragging the element. This way it cues users what they are moving ( the element and its relatives). Another design I thought was interesting was in the outline view, when a user drags an element a screen will appear with the new structure. This way a user can see the changes they are going to make and how it will affect the structure.

Research

User Persona

Pivotal Labs reaffirmed our need for a defined user persona. With our new goal to establish BrainSquall's customer, I thought it would be valuable to conduct user interviews with business strategy consultants. Once we had a solid customer base, we could then conduct a second round of user research to see who is mainly using our product and find out the following: why they use it, challenges and goals, etc. I created a list of open ended questions that would provide me everything I need to create the business strategy consultant persona and a qualitative analysis that would inform the design process. My overall goal was to recruit 5 users for interviews.

Assumptions

Without a qualitative analysis, we could only make design decisions based on assumptions. I developed a temporary persona based on what was already known about business strategy consultants.

Customer Feedback

In addition to collecting data on our primary customer, I developed a customer feedback survey using typeform that would provide us with valuable insights that would help lead our design process.

Research synthesis

Typically, this is where I would explain what I learned from our research studies, but unfortuntately due to the nature of timing and COVID-19, I stopped working the project before I had the chance to develop a persona. Not having a clear persona or even target user was very challenging as a designer. BrainSquall is such a unique application that it was challenging to understand the different use cases and make appropriate design decisions.

Landing Page

For the landing page, I wanted it to represent the product: new,exciting, playful, & bold.

Final

Searching for an element

Deleting an element

Moving an element

Board page

Layers

This was my second iteration of layers. I removed it from the tab bar and placed it at the top along with the capability to share your board.