OVECHR
”Through the bond of music, we spark the flame of collaboration between musicians, who’s goals lie ahead of them, and the mentors that can help them reach new heights.”
This is a music platform that connects artists to mentors with the primary method of engagement being an in depth review purchased by a token system.
Skills Leveraged:
- User Personas
- Art Direction
- UI Design
- Front End Engineering
User Personas
How do you make great things for the right people?
It’s all about the empathy.
While your goal is to deliver a great experience, a lot of misguided ideas can come from too many assumptions. It’s an inexpensive task to work alongside your target audience. I like to interview people I think may be relevant to the cause.
The last thing we want to do is to go through dev only to end up with a product that leaves….a bad taste in the user's mouth! So we interview, we collect info, we get into the heads of our users and I craft up some user personas. These personas represent a generalized group of users we think may be represented in significant numbers.
By developing the personas we are able to build better products for specific groups with higher accuracy thanks to the cooperative nature of it.
Prototype
This was our original wireframe to guide development. We knew we wanted a repeatable pattern across different dashboard types. We also knew we wanted each block to be a full implementation of its designated task. For example, if one block displayed how many tokens you own, all of the actions to buy more tokens would take place within that same container.
For the token purchase, we knew we needed a zero state, quantity selection, purchase view and tokens owned view. The user would be able to step through and complete each of these sections without ever reloading the page. This was important to both promote a swift interaction and also cut down on complex routing logic for the backend developer.
We actually did some usability tests on a paper prototype and from that we committed to a few changes. First, we moved the persons name to the left. This was because we needed to make room for a status bar that users had requested on the right. The status bar keeps track of how many reviews you have had, how many songs you have uploaded and how many badges have been awarded to you by reviewers. All of which you can take in at a glance. This request was not particularly complex so we prioritized to have it within this iteration of development.
While the status bar didn’t reveal itself to be helpful in the moment of user testing, the follow up interviews post-test lead us to recognize that our users wanted quick information about their platform use without combing through their playlist, review backlog or account status to find that information.
We also introduced the idea of a review and what that initially may look like in their “review station”.
Art Direction
Myself and another artist worked together to create fun iconography to get the project rolling.
Visual Community
One thing that was apparent in our user interview was that a service built around feedback and constructive criticism, while awesome, is also intimidating. As such we wanted to have a visual language that feels “warm”, “inviting” and “playful”. These were words that initiated positive responses in regard to adaptation. While many things will go into creating a positive community, visual language can assist on the outset.This reveled to us as a product of a small series of focus groups.
Focus Groups vs User Tests
We use focus groups and user tests. The focus groups give us insight on what users like, not specific to our platform, but in a more general setting relevant to our goals. User testing is our go-to method, of course, to get information on our specific product. They make a solid combination.
We were able to acquire participants for our focus groups and user testing trials in a fun way as well. I put up flyers! Flyers at a college looking for passionate musicians. I also put up flyers at popular local music spots. It didn’t take too long this time to get some response. A little bit of compensation of course also goes a long way and is well deserved given how much help they are to us.
Testing and Time Limits.
We needed to move fast, our dev window is limited. We will have two developers on this project, of which I am one. We want to hammer this app out in about 2 months. The scope of the project is reasonable for this iteration but it’s still a small window. Luckily for us remote user testing is a thing, and we could use high-fidelity mockups to accommodate that. We were/are not terribly concerned about being particularly secretive. So the idea of using remote testing didn’t bother us. We were also able to collect 12 tests within a couple of days which included screen, video and audio recordings.
Success Criteria
Our success criteria for our system usability scale (SUS) was an average score 71. That would be a decent number, with still plenty of room to improve, but encouraging. Our result was a 73 which was solid. That really only works out to a C+ more or less, but gets us real close to a B-. There is obviously room to iterate and improve, but that’s a great start.
I want to get more SUS scores. The trials we did were helpful. Especially for the screen recording and audio and that will serve as our main guiding light for iteration right now, but SUS scores are more helpful with sample sizes of 20 - 30.
UI Design & Front Engineering
Vue and VueX
From the start we had decided to use Vue and the Vuex state store for our front end. We have some fancy business going on in the backend that we do keep to ourselves for now. That said, serving as the front end engineer, the combination of Vue and Vuex was fun for me. In the same way that I enjoy component based design systems, I quickly appreciated component based engineering systems.
Here is a little demo.
This is a small demo of a couple of functions users can take advantage of. This demo shows buying tokens, requesting a review, and canceling a review request. Everything visible in this demo was implemented by me, and it was so much fun.