FlowBand — improving music bands workflow

psacaluga
7 min readNov 20, 2016

--

This project was build for the final 8th course under the Interaction Design Specialization by UC San Diego on Coursera.

Design Brief: Using the process of design thinking, find problems in one or more than one of the three briefs(Time, Change & Glance) to design a solution around it. Walk through the structured steps designed for this project course to come up with the design for your product — go through Need-finding, Ideation and Storyboarding scenarios and sketching paper prototyping to create possible solutions. Then turn ideas into one design with the help of Heuristic Evaluations and the starting Planning and Skeleton of the product to start iterations. Test your application prototype, get feedback, iterate and test to keep on improving your designs. After all the refinements, demonstrate your final product design and document your process. Product design … a never ending process.

Problem Statement : GLANCE — Design an interface that integrate in a all-in-one interface any tools or app to make easier and transparent their communications.

Need-finding

My goals was learn about people’s habits related to what, when and where they check social networks, mails or any other app on any device. Observing and asking to 3 participants at the time when they usually make those routines.

This was only the beginning. Meanwhile I was interviewing each of the 3 participants, I was in contact with some musician friends, that talked me about similar problems as my participants are experimenting or explaining to me.

During Need-finding, the topic, that participants had in common, was the loss of time which meant whenever they had communications and had to pass an application to other.

The saturation of communication apps that we have nowadays.

Ideation

This phase that took 2 weeks the volume of ideas was the main goal first. Try and think of as many possible solutions and designs that you can, we can filter the meaningful ones later. Anything is fair game, so be creative. These ideas were then filtered into 15 identifiable needs.

  1. A band member needs a way to keep organised my communications between different bands that I’m a member of. Hopefully all in one place because I’m getting mad with too many apps.
  2. A band member needs a way to see how is his calendar to confirm a date with one of my bands.
  3. A band member needs a way to sort out all my tracks or cuts in one place, I’ve got to many cloud storage accounts..
  4. A band member needs a way to control and setting my publications in severals social networks.
  5. A band member needs a way to organise different profile or pages in severals social networks.
  6. A band member needs a way to share content with other members of the band.
  7. A band member needs a way to control financial issues with other member of the bands
  8. A band member needs a way to see different email account and manage them.
  9. A band member needs a way to share tasks with other band members.
  10. A road manager needs to fill a spreadsheet with all expenses.
  11. A road manager needs a way to confirm availability dates in a quick view.
  12. A road manager needs a way to manage band info like backline or requirements.
  13. A band member needs a way to see all expenses and incomes from a a tour.
  14. A band member needs a way to share tour dates or publish info in my own band site.
  15. A band member needs a way to manage in mobile device all things that he can do in desktop.

I looked at 5 uniquely designed apps or concepts, solving different problems — Slack, Google Calendar, Gmail, Marvelapp or the design concept of Dashboard for data visualization.

Storyboard

Now start the best part! Storyboards are a great way to design potential solutions and how they fit different scenarios. It allows us to discover feasibility of different ideas, the flaws and possible success in it.

Storyboard #1 Musician daily life

Storyboard #1

Daily musician life in a common task like go to a supermarket or driving a car.

Check all the messages and decide to try the new app already installed.

Storyboard #2 Notification.

Storyboard #2

In a daily situation after a hard night working, The musician found many notifications that need to to care as soon as possible.

After the storyboard those two common situation, I started to sketching on paper some interfaces about how It could be the prototype to cover all user needs.

Sketching Storyboard #1

The design had to clearly connect with my observed point of view, depict the rough app flow and how it actually addresses the problem we were designing for.

Heuristics Analysis

Next step was to evaluate our app using Nielsen’s Ten Usability Heuristics.
We conducted a self walkthrough at first to smoothen out the app flow and interactions. This was followed by an in-person evaluation, where a user interacted with our paper prototype while voicing their thoughts and opinion about the app. These observations were recorded and later correlated to the Usability Heuristics list. Each identified problem was categorised and given a severity rating.

One of the heuristics made.

Also we create a paper prototype with a basic user flow to evaluate and get feedback of a peer. That helped us to improve and focus for the next step.

A Plan and a Skeleton

Once the review and a list of HE violations it’s wrote from the feedback I received.

Distilled the results into a list of concrete changes (13 changes) that I want to make. And after that I developed a planning to scope the development phase. So we can organise the forward weeks coming.

Since the beginning of the project I had a holistic vision of how it should be and all the features should have the application. No conceiving an application without any of the features.

Right now, I am focused on finding a cohesive and flexible design one of the most important features, integrate communication apps.

If we have a design consistency of this part, we will have one of the main features prepared to be tested with real users.

Testing.

When I started prototyping and defining with higher fidelity, previously user flow was not entirely correct, so I redefined user flow and screens to design for this assignment.

This subject has taken me some extra time in development, so I determined to include in the dev’s plan a new design review task.

The idea or app core is to create a hub app to integrate multiples apps that improve communications in bands workflow, still the main task for our users.

First prototype tested made in UxPin.

Ready for feedback.

It is very exciting to have feedback from outsiders with an open point of view. But we need to keep in mind a serious things to run a user testing.

  1. PARTICIPANT CONSENT FORM
  2. USER QUESTIONNAIRE
  3. USABILITY SCRIPT — a list of task that the user need to accomplish
  4. THINGS TO KEEP AN EYE OUT.
Usability script to follow by the user.

While user was doing the test, we were taking photos o don’t lose any detail.

Consideration and feedback from one of the users.

After testing with severals users we got many possible changes to do and we sort any feedback in different categories: Hierarchy, Visual and Functional. so we prioritised the changes, redesign the online prototype and modified the development planning.

User Testing for A/B test.

I scheduled an A/B Testing about the sort by options of the app using User Testing. The remote testing was done by 4 participants. I was interested to know whether users are understanding the concept, to upgrade what they consider relevant and remove what not.

Screenshot from user testing.

After checking all the feedback and measure provided, we compiled a list a possible changes to improve our prototype.

  • Add a new user flow to create and share files with users.
  • Change sort by options will provide or.
  • Define icons for apps and email.
  • Email actions when user get to a email detail.

Conclusions

Considering all changes and simplifying the interface we can focus on what the user needs and remove elements that generate noise. Next step proposed are:

  • Add a visual design style guide..
  • Create a landing page.
  • Prioritise task and create a spring planning to develop a MVP of the product.

Beyond creation of a product, this was a great exercise to apply all the skills learnt in this Interaction Design Specialization — Human-Centered Design, Design Principles, Social Computing, Input and Interactions, UX Research and Prototyping, Information Design, Running and Analyzing Experiments — Design can be a much more productive and creative process if we follow a structured stepwise approach to it, constantly keeping user requirements in mind and designing to solve a problem with more than pretty pixels.

Thank’s for reading this case of study.

--

--