A StreetSmARTs Case Study
By: Scotty Holcomb
Tags: User Experience, UX, Nonprofit, UI, Art

Some of the onboarding steps were crazy with our analysis. We found that around 10-steps were perfect for onboarding; a user could communicate everything that was needed and not get too annoyed with sign-up. Pictures are a huge part of what we’re doing so we need to include that. A major item that we had to have is two-sided outreach. Some of the companies in our analysis had a business model that looked like “if you build it they will come.” We wanted to allow any person to be proactive in getting this mural where it needed to be. We also knew we needed an internal messenger as well as an online payment method.

Our original user flow was a bit….. complicated. I have been referring to it as a double spiral, figure-8. It articulated everything that we needed, but was difficult to communicate.

Our original user flow

We ultimately divided it into two separate flows.

Design

The early sketches were a combination of solo working as well as collaborative working. We all talked while I drew, and notes got lazily thrown into the sketch. The digital pen was used while screen sharing. We stayed on zoom so we could all contribute to one person drawing. Other times we would draw with pen and paper and then send each other images through slack, or in our shared Google Drive folder. As our ideas started to refine we were able to sketch in order of the user flow. There were times that we jumped into Figma and started to use wireframing as our sketching. This allowed for our separate work spaces to be more collaborative, and also allowed us to visualize the other person’s ideas.

Out iteration folder

We had so many iterations that we created a folder and dumped everything into it. We were able to go back as a group to talk about, and see, all of our past solutions that were leading to every new solution.

From Mid to High-Fidelity

The user flow was our main guiding force when demining the sketches and frames. We were able to determine usability tasks, and make design decisions based off of what those tasks were going to be. Our first round of usability tests were extremely helpful. Several more rounds of usability testing later we had some really good feedback. We were really onto something with our two separate user flows. We were also giving growth opportunities.

There were three areas that needed improvement:

Navigation

Messaging

Contracts

We found labels for our navigation that were less abstract. Then we reinvented the messaging and contracts area. They were originally put together in the same place, and people didn’t like that at all. We separated them into their own places and it tested much better.

The High-Fidelity App

Splash Screen

Home Page

After a quick onboarding, Jill is sent directly to her home page. The two sided outreach was an important feature that we wanted to have in our app, so we made it clear what artists are trending and who’s hot right now. We also want Jill to get motivation about writing a gig and see real life examples of what all the other Jills out there are doing to try to entice artists to come work for them.

Giving the business an opportunity to create the gig without having to navigate through multiple pages was an interesting challenge. The solution seemed unconventional, but checked all the boxes. It tested well as we moved through our our high fidelity prototype.

Creating a gig.

Post a Gig

Jill can easily preview the gig. From here she can take a look at what the artists are going to see. We were moving too fast; we made this process too easy. After testing the mid-fidelity prototype we added an additional confirmation page when posting a gig. Once confirmed, Jill returns to her homepage to find her gig at the top and easily accessible. Making sure that it’s there, and being able to easily edit it were some of the goals after realizing that the posting process was too easy.

Messaging

Looking for artists allowed the business owners to be proactive in their search. We found through testing that users wanted to land on pictures and not information. Our hi-fidelity prototype moves this way.

We made messaging really easy at this point as well. The profile has an easily accessible button for either user to initiate conversation. Just in case that initiation is a little awkward we offered ice breakers. The DM section opens and allows the user to start the conversation with a phrase chosen from a list. This tested extremely well.

Jack’s onboarding is a little more involved. Each artist is expected to upload and build their portfolio before entering the app. The payment questions are just like those for the business’ gig questions. Negotiable payment seems to be really important. Our interviews, from the very beginning, talk about this in great detail. Artists and business owners alike felt like the content of the art would be a contributing factor in the price of the art. Once these questions are answered by Jack and Jill a contract can get drawn up by either user.

Contracts

Our initial iteration of this had it inside of the messaging area. It was confusing, and users hated it. Once we moved it into its own space the path became really clear.

Contacts

Ignoring the number of steps, I thought about making the form as easy and clear to fill out as possible. I included the things that the artists were asking for in their interviews, as well as the business owners. Before it gets passed off to the business for signing there is a very clear note letting people know what this next button does, as well as what it does not do.

Once it’s been submitted the business owner gets a push notification, and a line in their DM has a link to view the contract as well. We wanted to keep everything internal. Having this area inside of the app made it as simple for Jack, as well as for Jill. Along with simplicity, we wanted to be able to have a trustworthy third party stay involved throughout the process.

Takeaways

I had an opportunity to work with Henry Busch, and Paula Garcia on this group project. Each of them brought incalculable strengths, professionalism and grace throughout; they are both admirable. If this were a more appropriate place I would continue to praise them. Please take a look at their links. Give them an “Applause” and a follow.

All three of us talked about where we would go from here. We want to see this project through another round of design, test, iterate and redesign specially for the desktop version. Another thing we want to add is a toggle switch for users to be able to switch from one mode to the other. We interviewed an artist who is also a gallery owner. I’m sure there will be other Jack-Jill’s out there. We referred to it as cross-persona journey, but I want to call it a Flap-Jack.