top of page

Work > Budget Collector

Budget Collector

Description 

Budget Collector, an art advising app, needed a way to curate personalized art collections for potential collectors. The result: an onboarding experience designed to gather data, that will be used to create personal collections.

Role and Responsibilities

Along with 3 other designers (Clara, Pritti and Samantha), we worked cross- functionally, switching between researchers and designers.

Scope

Design a native application for Android, within a 2 week sprint.

Initial project

Initial project (2021)

Understanding the user

User interviews

The team and I conducted user interviews, speaking with both artists and collectors for about 20-30 min via Zoom. We felt this would be a great way of gain insight into the art community. Our initial assumptions helped formulate the questions used during the interviews.

Initial assumptions

  • People are unaware of art appreciating in value over time

  • Collectors are unaware of artists outside of traditional Museum and Gallery settings

  • Only older adults know how to invest in art

  • The art market is difficult and there are few resources

  • Artists are not sure how to market their artwork

  • Collectors are willing to invest in art they love

  • Artists don’t know who want to buy their work

At the conclusion of the interviews, we use the affinity mapping method to synthesize our findings and I must say, our assumptions were fairly accurate.

Artist

  • Like to know more information before purchasing a piece

  • Prefer to buy a piece in-person, especially if they are spending more

  • Need to have an emotional connection when they purchase a piece

  • Would love to meet the artists in-person but rarely get the opportunity

  • Make purchases based on an emotional connection

Collector

  • Don't know how to price their work

  • Mainly use social media to market their work

  • Don't trust selling online

  • Need a second party to help handle their business so they focus on their artwork

Persona development

To summarize our research and to create a unilateral understanding of our target audience, we developed a persona. This enabled us to focus our efforts in solving problems for that audience, creating empathy for the user. For each persona, we gave them an identity (name, age, profession, etc.) to appear more realistic. These attributes were a culmination of the interview participant’s demographic information.

We found a key intersecting point for both the artist and art collector, building a community where the artist and collector can interact with out constraint:

Takeaways

  • The artist wants to a find better ways to market their art that aren’t social media based

  • The art collector wants to expand their knowledge in investing and network in the art world

Journey mapping

We created a Journey Map to walk a mile in Bose’s shoes (looking for a way to sell his new artwork) and Vivian’s shoes (on the hunt for her next piece to purchase). This helps us better understand their emotional journey and includes their thoughts, behaviors and emotions while completing a scenario/process.

We listed out multiple phases and the various systems Bose and Vivian might interact with along the way. We identified four phases for each of their journey:

Takeaways

Journey Mapping not only validated the usefulness for a service like Budget Collector but provided insight into additional services that may set Budget Collector apart from it's competitors:

  • A product/service that will allow buyers to schedule in-person studio visits or live online showings

  • A product/service that will provide buyers artists’ reviews based on previous sales and other information

  • A product/service that will vet buyers to make sure he is receiving legitimate inquiries

  • A product/service that will provide artists financial resources such insurance options and pricing suggestions

Starting design

Design studio

Before starting the design studio, we conducted some high level research of different onboarding processes. This gave us a good starting point for defining the problem according to our personas’ goals. All team members, including stakeholders, then sketched their ideas of the solution. Everyone was then given the opportunity to pitch their idea and receive a quick critique. We conducted a second round, combining the best ideas from the entire group, to then pitch their final sketch.

Takeaways

  • Include more explanations as to “why” specific questions are being asked of the user

  • Pay close attention to the sequence of questioning, not to appear as “gatekeepers” to potential artist

Frame 422.png

Low Fidelity Prototype & Testing (Round 1)

After completing the design studio and coming up with our low fidelity sketches, our team was ready to move forward to building our low fidelity mobile wireframes. This gave us a more accurate depiction of our planned layout and the details around how the onboarding experience will look. We continued on to prototype specific areas to give it function and allow our mobile design to complete the experience in the shoes of our persona’s, Bose, the Artist and Vivian, the Art Collector.

Our tests began with two scenarios and three tasks for our users to complete (one scenario for each persona). Each test was conducted virtually over Zoom, with six total participants. From there, we gathered insights on:

  • how long it took each user to complete the task

  • how direct they were in completing that task

  • easiness of the task overall

Findings

Round 1 of testing set the baseline. Testers completed each of the 3 task at a Success Rate of 100 percent. For the 2 primary scenarios, there was an average time of 1 minute 28 seconds. Testers also rated the ease of the onboarding 4.5/5, which is pretty good. Looking at our results, especially the follow-up question responses, testers shared the following:
 

  • Adding an indicator to allow the user to know they completed signing up for art insurance(pop up or separate page)

  • Increasing the size of the free form text box so the users can express their answers more thoroughly

  • Adding a "skip" button to the bottom of the screen so users can more easily skip a question they are not comfortable answering/not ready to answer

  • Creating a more interactive layout with witty text to allow the user to feel more engaged and motivated during the onboarding process

  • Adding more branding/personality across the screens

  • Increasing the size and placement of the progress bar

  • Giving users the option of signing up for insurance at a later time if they are not ready yet

Refining the design

High Fidelity Prototype & Testing (Round 2)

For the final stage of our design process, we created a high fidelity prototype from the insights gained during mid-fidelity usability testing. Our goal was to execute the changes needed to improve on the usability and overall experience of our product. We decided to make these changes:
 

  • We updated the copy to allow the users to feel more engaged throughout the process

  • When selecting an option, the button changes to a slightly lighter shade to indicate that it has been selected

  • Back and forward arrow buttons were placed for the user to press to move forward to the next page or go back a page

  • An Insurance modal indicates that an artist would need to sign up or provide proof of their insurance before completing profile set up

We ran a second round of usability testing on six participants with the same scenarios and tasks from round one. We conducted the testing remotely via Zoom. The quantitative data was tracked to measure improvements in time on task. The qualitative data was tracked by the participants' behavior while completing and their comments throughout the process.

Findings

  • There was a 100% success rate of completion on all tasks and the easiness ratings all averaged 4.93 (that's an increase!)

  • Though there is a noted increase in time, this is attributed to the fact that our testers wanted to take their time answering the questions and sharing their information with the app

  • Grouping the questions into categories will make the process smoother overall

  • Add numerical values to the questions asking about budget (instead of the current dollar sign icons), as things like budget and spending are subjective

  • When the artist gets to the information about insurance, it is important to refine the copy to be more empathetic in its explanation of why/how the insurance will help them (given the importance of this feature to the app, this should be considered a high priority)

Frame 424.png
Design review

Design review (2023)

Quick recap

So... the last time a reviewed this project in full was shortly after completely the bootcamp. Since then, I've gained more knowledge regarding design principles and I'd like to apply that to this project. After a quick review, I understood why the client didn't use any of the original designs (LOL). Here's my attempt to create a product worthy of production.

Frame 425.png

Color theme

The company’s color theme was always a topic of discussion during the initial project but wasn’t apart of the scope. There was a general consensus it felt more novelty and playful.This time around, I checked the color contrast before changing anything. The original combination FAILED.

This gave me the license to make the change to darker variation of orange and complimenting colors. The theme now feels more like an established financial institution, which gives the app more legitimacy.

Visual hierarchy

A reoccurring issue mentioned by testers was that they had no idea where they were and that there was an absence of detail.



The progress bar, by itself, doesn’t provide enough context. To help with this, I added eyebrow text to indicate how far along the user was and below that the progress bar. Taking it a step further, I’ve added a category title and subtext giving more context to what is being asked of the user.

Creating clear section within each step, helps the user scan the screen easier (which could speed up the process).

Frame 426.png
Frame 427.png

Components

We learned that repetitive screens can also add to the length of the onboarding process. With that in mind, I updated all the components that would be more familiar. I took advantage of using radio buttons and checkboxes when appropriate. Replaced freeform fields with labeled text inputs to gather specific information.

I was able to consolidate screens by grouping questions into categories and placing them into containers. To increase the usability of the navigation, I increased size and added copy to makes things clearer.

Contact information

Possibly the most important step of the onboarding process is the collection of the users contact information.Initially, we only asked for the user’s name and and how they categorize themselves, completely missing an opportunity to collect value information.

If for whatever reason someone decides to abandon registration after Step 1, the company has information to reconnect to via email or text notifications.

Frame 428.png
Frame 429.png

Review screen

Possibly the most important step of the onboarding process is the collection of the users contact information.Initially, we only asked for the user’s name and and how they categorize themselves, completely missing an opportunity to collect value information.

If for whatever reason someone decides to abandon registration after Step 1, the company has information to reconnect to via email or text notifications.

Frame 430.png

Success screen

Well... everyone deserves recognition for a job well done and a signals the finality of the process. It also builds trust with the application.

bottom of page