ROCKSTART

UI/UX Design & Development

Rockstart is a desktop and mobile app that connects the music community. Designed to integrate how musicians find bandmates, jam space, equipment, promote events, connect with fans and more.

A.Y. Tech’s role was to design the interface and develop the app, while iterating on user tesing feedback. We continue to improve performance and add features on an ongoing basis.

mobile web app development vancouver
Rockstart

Competitive Research

To better understand the market, we examined existing social networks tailored to musicians. Rockstart Inc. approached us with an existing understanding of the gap in the market and the need for certain functionality. Many sites/networks have one or two features well implemented and adopted, but Rockstart’s vision was to consolidate into a greater, more efficient, cohesive network. We took note of what features existed, strengths and weaknesses, and how information was presented before creating the initial sketches of what our UI would look like.

Sketching

Our initial layouts were sketched out using pencils and markers on a sketch pad, experimenting with the organization of information within different layouts. There was an expressed interest in Google’s Material UI Design Principles, and the design was conceived with these guidelines in mind. After trying various ways of organizing information cards, we chose to tear the sections into modular, rearrangeable components. This way we could arrange them based on priority during a collaborative design session, and continue to re-shuffle them as necessary.

High Fidelity Mockups

We created high fidelity wireframes using sketch, to arrive at the polished UI Design for both mobile and desktop versions of the app. In this stage we finalized colour choices, spacing, the image/upload lightbox, upload functions, commenting, music player styling and other pixel perfect details we were unable to tackle in the lo-fi prototype, or had not arisen until this time. It was also at this stage we created the signup flow and a profile creation UI for creating an account, and setting up an accounts for the first time.

Clickable Prototyping

At this stage we had a complete picture of the app with which we created various clickable prototypes to illustrate the “happy path” of the Rockstart user journey: Signing up for the app the first time using e-mail or Facebook, Phone verification, Event pages, Drawer menu and other navigation, Creating a musician profile and a band page.

Development

The development team worked closely with the design team to match the front end development to the prototype. To do this, we used React, a Javascript framework, and a Google Material UI library. By abstracting out the common functionalities and patterns within the app, we built base structural components and built layers on them to modify them into the app’s UI. In doing so, we created clean, reusable code that separates structure from styles.

User Testing

We began our first round of testing with musicians at this stage, to test how users were navigating around the prototype, and solicit any feedback before development kicked off. We brought in another set of musicians to test the live app in action on their mobile devices to see how the actual app would be used. The results were a mixed bag of wins and key bug discoveries that needed to be fixed in time for the initial launch in late July.

Learning & Outcomes

Testing was incredibly valuable as the only eyes on the app during this stage had been our own. It took user testing to point out some key bugs such as missing affordances, slow load time, sign in failures, social media sign up/ login failures. Many issues that arose had been no issue for us but became stumbling blocks for new users.

Experiencing an initial burst of engaged traffic during the release event of tacofest, we were able to collect key data around the apps functionality, through heat and click maps that is arming us with data as we continue to improve and release new app features.

Designing a platform for artists to express themselves means dissolving barriers we conceived at the beginning. There is no one definition of a user because we are all varying degrees of musician and fan, going by real names, stage names, aliases and adopted names. We particularly enjoyed rethinking the user profile as something as fluid and dynamic as our users.

Rob Stewart

“The Roadmap Workshop was excellent. It gave us a better idea of what we wanted to deliver. It took our concept and turned it into real modules. Timelines for us are always the biggest concern, but the roadmap workshop didn’t disappoint. I would absolutely recommend A.Y.Tech’s roadmap workshop to others. I’ve already recommended it several times”

Rob Stewart, Founder of Rockstart Media

©2019 A.Y.Technologies

Log in with your credentials

Forgot your details?