How Applico Built a Mobile Livestreaming Platform Part 2: Product Definition & Design

By Matt Kofman

 

Developing the brand and tightening the concept

Before arriving at Applico, the client behind Castr had created detailed ideas and concepts for their vision of what the product should be and how the platform should work. Rough mockups along with a video guide explaining the reasoning behind his thoughts and designs assisted us in helping define the final branding, product and platform as a whole.

From our initial kickoff it was clear we had three priorities as a team: develop a bold brand, create a user experience that enabled instant broadcasting and develop a design direction that could work across both Android and iOS while still maintaining each platform’s unique design aesthetic.

To create a bold brand, we decided to use a bright, friendly orange because the color differentiated Castr from other social networks. Facebook and Twitter are both variations of blue, YouTube is red, Snapchat is yellow, and YouNow is green. When deciding on a logo we went through more iterations. Concepts included a rooster, a dolphin, various waveforms, broadcast towers and a firefly. In the end, the firefly icon worked best.

Sketches, wireframes, prototypes, and mockups

The way we designed Castr was similar to how we’ve designed other platforms at Applico. It all starts with ideating and detailing what the platform needs to accomplish, what functionality it needs to contain and how best it all ties together.

After ideating, we start sketching. Sketching concepts is incredibly helpful not only because you can quickly develop a multitude of ideas in minutes, but also because the barrier of entry is low so that anyone (designers, engineers, product managers and even clients) can add their input to the process.

When the concepts are solid, wireframing begins. When we wireframe, we create an app map – a storyboard of sorts – to show how every part of the platform interacts with every other part and what user interactions are required in between. Ideally, in parallel to creating the platform’s wireframes, we’ll make a clickable prototype as well because it allows both the client and other stakeholders to better understand through visualization how the final product may work. Additionally, a prototype gives the designer a real sense of what works and what doesn’t before an engineer begins implementation.

 

One of the final stages of design is creating mockups. These are pixel perfect examples of how the final product should look. From the mocks, a vision of the final product should be abundantly clear. From the mockups, a designer should be able to specify all of the necessary specifications for onscreen elements such as margins, padding, font information, colors, and final copy. From the mockups, one can also extract the assets. All in all, creating the mockups was probably the most time-intensive of all steps, being sure that both platforms match up in look and feel, but retain certain uniquenesses.

Motion design is also a critically important part of the design process. When ideating, wireframing and creating mockups, motion should always be kept in mind. Careful and thoughtful use of motion helps bring the user experience of your app to another level. Adding movement can provide a narrative that might otherwise be lost to your users. Take the GIF above as an example. We wanted to show the user that the thumbnail image on the pre-cast screen is ultimately the viewfinder that you’ll be using to see yourself as you’re broadcasting live to followers. As it scales after the user touches the Start Casting button , it goes from being a thumbnail window you can use to help set up your scene to a larger stage in which you are the actor and are now being watched by many others.

Designing the user experience

As mentioned before, one of the key requirements of the Castr platform was the ease of instantaneously creating a broadcast. As a signed-in user, I needed to be able to create a broadcast that others could watch as few interactions as possible. Our ability to pull this experience off successfully would make or break the product. If the key component of the platform – live broadcasting – didn’t work, the whole platform wouldn’t work.

Being able to create broadcasts with as few interactions as possible would depend entirely on the app’s navigation structure. However, Android and iOS prefer different navigation structures. Whereas Apple prefers users to navigate through a large app with the usage of a bottom tab bar, Android actually has a multitude of native options, including a side navigation drawer and a top tab bar that goes directly underneath the app bar. However, the best method of navigation would rely upon one more element that required a great deal of on-screen space at most times – the broadcast video player.

The broadcast video player was a very important part of the Castr experience. How else would you watch the live broadcast of another user? A note to keep in mind is that the client wantedthe video player to have a square ratio (equal in width and height). This type of aspect ratio led to many difficult user experience decisions because of the amount of screen real estate required, especially on devices with smaller screens like the iPhone 4S and older Android devices. Because of this space requirement, the other user interface elements that would appear alongside the main broadcast window would need to be carefully situated.

With these considerations in mind, on iOS we used a native tab bar navigation scheme. On Android, because more UI elements need to be onscreen at once, such as the system navigation bar, we decided to go with a side navigation drawers to make more on-screen room available. So now, in theory, an iOS user would need only tap once to activate the casting experience and another tap to start broadcasting live. On Android, a user would need only swipe to open the navigation drawer, tap to open the cast screen, and tap once more to start broadcasting live. This sort of navigation allowed us to keep the apps similar while still creating a native experience for each operating system. Additionally, by taking into consideration the user experience we were able to solve for making it easy to start a broadcast.

In Part 3, we’ll hear from the product managers on some of the technologies that we researched and the prototype apps we built to validate video streaming.

---

Filed under: Platform Innovation, Product Engineering | Topics: castr