2. Empowering design team for scale

Create a new font for Sing!

Sing! started with Gotham font, a font inspired by mid-century architecture setting of New York City. Gotham is a great font to celebrates Smule’s fun, whimsical and welcoming feelings. It still represents Smule’s brand identity through today. However, Gotham is a font intended to be used in print and media applications. When rendered on mobile devices, it caused many issues. Gotham has a wide kerning and takes more space in a given word or sentence. Mobile devices have limited real estate (screen size), therefore designers must always make the extra effort to make sure the text works well in both iOS and Android environments. Many times, the font size has to be reduced to make it fit in the small space, causing a readability issue for users. Another issue caused by Gotham is it’s lower baseline. Because of this, the engineers have to manually, and visually, make sure copy is centered. As you can see by these examples, we encountered many design bugs during development as a result. We know now that finding a scalable and platform standard font is one of the critical decisions we have to make during the redesign.

Sing! needs to standardize its’ design language

Design is a creative process that is both organic and nostalgic. Without a standard UX/UI design guideline in place, the product can become a hodge podge of the aesthetics of each designer who worked on the project. Keep working on these designs caused confusion within the design team, limited designers’ output, and reduced product quality. We knew that our previous Sing! design standard was not clearly defined. This ambiguity caused further delays and difficulties during our design critique and review process. When no one on the team can articulate the design standard that we are aiming for, all feedback and review is judged based on personal preference, thereby invalidating much of it. As a team we understand it will take a collaborative effort to deliver the best product and experience to our users. To that end we recognize that we need a clearly defined standard that is communicated to all design team members for use throughout the redesign and moving forward. This will set the foundation for every product design decision made by the team.

Tremendous growth in the design team has made us realize that a set of rules needs to be established. This guideline will establish the treatment of , IA, layout, fonts, color, imagery, and interactions. The advantage of a guideline is that it will act as a framework that will apply to most design issues speeding up the design process by helping designers to make right design decisions the first time. More importantly the design team needs to create a shared, central repository, updated as frequently as needed, that documents our styles, components, and patterns. With this shared hub in place, improvements in the consistency of designs as well as the quality and quantity of designs is sure to follow. That means, along with the Sing! Redesign, the design team needs to create this guideline so that there is less room for disjointed, personal design styles and the visual appeal of the product will remain consistent. It is our goal that, eventually, the designers won’t have to work on specing icons and think about what the right spec is. Instead, they can focus more on creative design solutions for users.

Design team needs to scale up

With more product features being added and more users joining our Sing family, our design team needs to grow and improve our collaboration. Without a common understanding of building blocks that forms the basis for collaboration, pressures on the team to keep up with this growth can result in communications getting complicated. To ensure our teams are successful, we know our design approach and workflows need to be modularized. This means the redesign team needs to create some design building blocks that will be the foundation of the redesign and all design efforts. These individual building blocks will help our designers to collaborate easily and split up their works when needed. Furthermore, when a new designer joins, senior members of the team can utilize these building blocks to lead projects and set up clear plans for new members.