In smaller companies, the same person may perform multiple roles, while at larger companies, the roles become more specialized, and individual people perform each role.
Creating apps with designers
Before any code is written, designers work to create the site’s look and feel through layout, visuals, and interactions. Designers answer simple questions like “Should the navigational menu be at the top of the page or the bottom?” to more complex questions like “How can we convey a sense of simplicity, creativity, and playfulness?”In general, designers answer these types of questions by interviewing users, creating many designs of the same product idea, and then making a final decision by choosing one design. Good design can greatly increase adoption of a product or use of a site, and products like Apple’s iPhone and Airbnb.com.
Jonathan Ive, SVP of Design at Apple, is credited for Apple’s design successes.When building a website or app, you may decide you need a designer, but keep in mind that within design, there are multiple roles that designers play. The following roles are complementary, and may all be done by one person or by separate people:
- User interface (UI) and user experience (UX) designers deal primarily with “look and feel” and with layout. When you browse a website, for example Amazon, you may notice that across all pages, the navigation menus and content are in the same place and use identical or very similar font, buttons, input boxes, and images. The UI/UX designer thinks about the order in which screens are displayed to the user, along with where and how the user clicks, enters text, and otherwise interacts with the website.
If you were to eavesdrop on UI/UX designers, you might hear conversation like, “His page is too busy with too many calls to action. Our users don’t make this many decisions anywhere else on the site. Let’s simplify the layout by having just a single Buy button, so anyone can order with just one click.”
- Visual designers deal primarily with creating the final graphics used on a website, and this role is most closely associated with “designer.” The visual designer creates final versions of icons, logos, buttons, typography, and images. For example, look at your Internet browser — the browser icon, the Back, Reload, and Bookmark buttons are all created by a visual designer, and anyone using the browser for the first time will know what the icons mean without explanation.
If you were to eavesdrop on visual designers, you might hear conversation like, “The color contrast on these icons is too light to be readable, and if including text with the icon, let’s center-align the text below the icon instead of above it.”
- Interaction designers deal primarily with interactions and animations based on user input and the situation. Initially, interaction designs were limited to keyboard and mouse interactions, but today touch sensors on mobile devices have created many more potential user interactions. The interaction designer thinks about how to use the best interaction so the user is able to complete a task as easily as possible.
For example, think about how you check your email on your mobile phone. For many years, the traditional interaction was to see a list of messages, click a message, and then click a button to reply, flag, save to a folder, or delete the message. In 2013, interaction designers rethought the email app interaction and created an interaction so users could swipe their finger left or right to delete or reply to email messages instead of having to click through multiple menus.
If you were to eavesdrop on interaction designers, you might hear conversation like, “While users are navigating with our maps app, instead of letting us know they are lost by clicking or swiping, maybe they could shake the phone and we could instantly have a location specialist call them.”
If creating an app were like making a movie, designers would be screenwriters.
Coding with front- and back-end developers
After the design is complete, the front-end and back-end developers make those designs a reality. Front-end developers, such as Mark Otto and Jacob Thornton, code in HTML, CSS, and JavaScript, and convert the design into a user interface. These developers write the same code that you have been learning throughout this book and ensure that the website looks consistent across devices (desktop, laptop, and mobile), browsers (Chrome, Firefox, Safari, and so on), and operating systems (Windows, Mac, and so on).All these factors, especially increased adoption of mobile device, result in thousands of combinations that must be coded for and tested because every device, browser, and operating system renders HTML and CSS differently.
Mark Otto and Jacob Thornton created Bootstrap, the most popular front-end framework.If creating an app were like making a movie, front-end developers would be the starring actors.
Back-end developers such as Yukihiro add functionality to the user interface created by the front-end developers. Back-end developers ensure that everything that’s not visible to the user and behind the scenes is in place for the product to work as expected. Back-end developers use server-side languages like Python, PHP, and Ruby to add logic around what content to show, when, and to whom. In addition, they use databases to store user data, and create servers to serve all of this code to the users.
Yukihiro Matsumoto created Ruby, a popular server-side language used to create websites.If creating an app were like making a movie, back-end developers would be the cinematographers, stunt coordinators, makeup artists, and set designers.
Managing with product managers
Product managers help define the product to be built and manage the product development process. When engineering teams are small (such as 14 people or fewer), communication, roles, and accountability are easily managed internally without much formal oversight.As engineering teams grow, the overhead of everyone communicating with each other also grows, and without some process, the interactions can become unmanageable, leading to miscommunication and missed deadlines. Product managers serve to lessen the communication overhead, and when issues arise as products are being built, these managers decide whether to extend timelines, cut scope, or add more resources to the team.
Product managers are often former engineers, who have a natural advantage in helping solve technical challenges that arise, but nontechnical people are also assuming these roles with success. Usually, no engineers report to the product manager, causing some to comment that product managers have “all of the responsibility, and none of the authority.”
One product manager wielding great responsibility and authority is Sundar Pichai, who originally was a product manager for the Google toolbar and recently was appointed to oversee many of Google’s products, including search, Android, Chrome, maps, ads, and Google+.
Sundar Pichai oversees almost every major Google product.Testing your app with quality assurance
Testing is the final step of the journey after an app or website has been built. As a result of the many hands that helped with production, the newly created product will inevitably have bugs. Lists are made of all the core app user tasks and flows, and human testers along with automated programs go through the list over and over again on different browsers, devices, and operating systems to find errors.Testers compile the newly discovered bugs and send them back to the developers, who prioritize which bugs to squash first. Trade-offs are always made between how many users are affected by a bug, the time it takes to fix the bug, and the time left until the product must be released.
The most important bugs are fixed immediately, and minor bugs are scheduled to be fixed with updates or later releases. Today, companies also rely on feedback systems and collect error reports from users, with feedback forms and in some cases through automated reporting.
