<p>Published on <a href="http://ift.tt/2prTmnv">| Prototyping: From UX to Front End &mdash; Medium</a> Jingxi Li <img alt="" src="http://ift.tt/2o3fTpA">source:shutterstock</p>
<h4>How to approach redesign on the mobile world</h4>
<p>As a design leader, I ask myself constantly: “How can my team continuously deliver the best product experience to our Users?” My answer is always the same, ‘we need to consider our Users’ constantly changing and evolving tastes in a rapidly growing community’. However, if redesigning the product experience is the solution, how do we begin an internal conversation to get that process started? How do we achieve a scalable solution, balancing new features and designs, while also maintaining the product’s identity?</p>
<p>If you are facing the same design challenges, I hope this article will help you find the answers you need to the following questions:</p>
<blockquote><p><strong>1. Why does a product need redesign when its users already love it?</strong></p></blockquote>
<blockquote><p><strong>2. How do you execute redesign in a fast paced data driven company?</strong></p></blockquote>
<blockquote><p><strong>3. How do you measure results?</strong></p></blockquote>
<blockquote><p><strong>4. What is the next step?</strong></p></blockquote>
<p>To help answer these questions, I would like to share the redesign experience we had on our flagship product Sing! Karaoke and walk you through the approach our team took to overcome obstacles along the way.</p>
<p>When I first joined the company two and a half years ago, we had four teams, each assigned to one of the following apps: Sing! Karaoke, Magic Piano, Autoharp and Guitar. Each of the teams consisted of one designer, one product manager, and two or three engineers. With different growth speeds, we saw Sing! become the leading app in the Smule family. The company decided to shift focus from an app based development structure to a feature based structure. This means more efforts and features were added to Sing and more design collaboration is needed between the designers. With business changes, we knew our existing product design and process would not meet the needs for scaling the team and satisfying our Users.</p>
<p>We knew that a redesign would not be a solitary project and would need to engage our users, designers, product managers, engineers and executive staffs. Have these parties buy into at early stage for the reasons of redesign and provide feedback for “how” the redesign should happen helped us set a clear goal what redesign would achieve in four areas:</p>
<p><img alt="" src="http://ift.tt/2p41wWv">source:shutterstock</p>
<blockquote><p><strong>Improve users experience</strong></p></blockquote>
<blockquote><p><strong>Empower design team for scale</strong></p></blockquote>
<blockquote><p><strong>Increase product engagement</strong></p></blockquote>
<blockquote><p><strong>Build a sustainable engineering solution</strong></p></blockquote>
<h3><strong>1. Improving Sing! user experience by</strong></h3>
<h4><em>Bring the consistency and continuity into Sing! experience</em></h4>
<p>From many users research, we have known that consistency is one of the strongest contributors to usability. Sing! is a fun product with many features. When the product was released in 2012, it had fewer features and a smaller user base. These fewer features, resulted in a design that employed different colors to represent separate content in different contexts. For example, previous versions of Sing! had more than four colors to display ‘Call to Actions’ on various uses. While the old design aimed to please its users, we noticed that the multiple colors CTAs also confused new Users. This means that the redesign needs to establish a consistent UI language to improve our current user experiences.</p>
<h4><em>Improve new user engagement</em></h4>
<p>From conducting user studies, we noticed that new users brought their previous experiences, interacting with UIs from other apps and products, into assumptions about how their first time interactions with Sing! would function. And, most importantly, when the Sing! interface did not correspond with the user’s expectations, extra energy was spent learning and understanding the interface, which made trying this new product both exciting but also nerve-wracking. We surmised that increasing standard UIs, or updating custom UIs to match patterns that have developed in the redesign would help Users get more familiar with our product more quickly and easily. It helps user ease into understanding the product quickly which led to better engagement.</p>
<h4><em>Increase existing user retention</em></h4>
<p>Interactions with apps have quantifiable costs that are both physical and mental. Physical costs measure the number of steps required of a user to achieve a specific goal, or time. Mental costs measure the intrinsic and extraneous cognitive load required of a user to complete a task or achieve a goal, or stress. For example, when Sing! users want to start a duet with another user, they have to navigate through multiple UIs to achieve this goal, which costs the user both time and stress which does not enhance understanding of the content. It is the belief and plan that using clear standard interactions and UI design, will significantly reduce user’s physical and mental costs.</p>
<p><img alt="" src="http://ift.tt/2o36Sg7">source:shutterstock</p>
<h3>2. Empowering design team for scale</h3>
<h4><em>Create a new font for Sing!</em></h4>
<p>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.</p>
<h4><em>Sing! needs to standardize its’ design language</em></h4>
<p>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.</p>
<p>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.</p>
<h4><em>Design team needs to scale up</em></h4>
<p>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 need 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.</p>
<p><img alt="" src="http://ift.tt/2p41bms">source:shutterstock</p>
<h3>3. Increasing product engagement by</h3>
<h4><em>Improve the new user onboarding experience</em></h4>
<p>When new users try a new app, they are learning two things at once: (1) features of this app and (2) how to access those features. Without a clear and standardized UI/UX design, users might not fully understand the individual interface elements in the app and get lost. In order to let the user focus on using the product functions rather than navigating interface designs, we need to understand new users’ expectations and clearly communicate information valuable to them. Overall, the new design should simplify the confusing portions of our app and allow the user to feel comfortable to try and interact with new features.</p>
<h4><em>Increase user retention</em></h4>
<p>At Smule, we closely monitor user retention defined as how many of the new users come back to the app after their first time experience in subsequent days, such as day 2 and day 7. If a user didn’t have a good first time experience, they are less likely to come back on day 2. Through user studies, we found users enjoyed many of the features if they found the entry point. Or they requested features that already existed. These findings indicated that our design navigation wasn’t aligned with users’ intentions. If the design is not helping users know where they are and how they can access the features in their mind, they might get confused and lost their interests to continue to use Sing. With the redesign, we need to come up a better navigation what meet users intention and product business goals.</p>
<h4><em>Improve development and release cycle</em></h4>
<p>By the time we started to consider redesign in 2014, the product features on iOS and Android were not the same. Sing! iOS was more feature rich than Sing! Android. This lack of consistency between iOS and Android doubled the work for the design team and delayed development cycles. Sing! had gained a lot of new users by the time we started to think redesign. We wanted to carry that momentum and speed up our product design and development cycles. With that in mind, we know the redesign needs to improve our internal design team work flow and efficiency. The redesign can cut design and development time by 50%, which will give us more chances to test and release new features with current resources.</p>
<p><img alt="" src="http://ift.tt/2o3lAnb">source:shutterstock</p>
<h3>4. Building sustainable engineering solution by</h3>
<h4><em>Improve development process</em></h4>
<p>Inconsistent UI not only caused usability issues but also created additional work overload for designers and engineers. For example, for a single icon, designers created multiple colors or sizes assets to be used in different scenarios. To make sure engineers placed the assets in the right screen, designers spent almost an extra 40% of their time to spec and create assets for engineers. On the other side, engineers needed to follow the specs, writing customized code to make sure each asset is in the right location. It sounds simple on paper, but when accounting for other variables like screen sizes and platform (iOS &amp; Android), the process became hideous. After talking with engineers, both designers and engineers want to collaborate with each other in a better way. This brought up another perspective on the needs of the redesign: create a systematic approach on how designers and engineers can set up and build product efficiently.</p>
<h4><em>Increase product development quality</em></h4>
<p>It is designers’ responsibility to do the design QA, and ensure the design was implemented correctly. The most frustrating moment for designers and engineer was: engineering fixing a design bug by changing some part of the design, which created another bug. As a consequence, engineers spend more time fixing design bugs, and there were still no guarantee that the implementation will match the design without bugs . We know that it is unrealistic to ask the redesign to address all the design bugs that may be encountered up front, but creating a standard central design guideline on how to set margins, how to create icon sizes, and how to apply for pressed status, etc. would limit the chances that previous scenarios happen.</p>
<h4><em>Prepare for global localization</em></h4>
<p>By the time we started to think redesign, Sing had moved from US centric app to an international product. To serve the community of global users, we localized Sing! from 12 languages to 20 languages. When applying foreign language into an English-based app, the UI could easily break. For example, compared to English, German or Russian takes more characters to express the same meanings. A defined limited space that would normally fit English labels would not work for German and Russian. Without a clear rule on how to set spacing and apply the right hierarchy, our localized languages were either cut off or presented in the smaller sizes. Addressing these issues for each language one by one consumed a lot of efforts from our engineers and QA. We know through the redesign, we need to find a sustainable solution that could optimize for all the different languages that we have or might have in the future.</p>
<p><img src="http://ift.tt/2p3U9OZ" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2o3ekrH">Yeah, redesign(Part 1)</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Yeah, redesign(Part 1)

How to approach redesign on the mobile world

Top Stories