How to Grow Your App Team

You can find a lot of online resources that help you on your way to make a successful app. Once you reach that point, you're looking to retain or even expand on that success.

This is the moment that you, a single person who has built an app, grows into something bigger, a team that continues building and improving your app. When is the right time and what steps should you take?

When Should You Grow?

You grow your team to accomplish certain objectives. Typically, you hire other people when:

• product development is moving (too) slow
• other skills are required to improve the business
• soft skills and objectives (such as business development and marketing) require more effort to make your app a bigger success

Growing a team can be expensive, especially if you hire multiple people for full-time roles. The first question you should ask is whether the pain has become so apparent that you truly need more people. If that is the case, then, in general, there are two scenarios:

• the app is financially successful
• the app is a success in terms of users and usage
• ... or both

When your app is self-sustaining, it means that it generates revenue for you to be able to grow your team. If it isn't, but you consider your app to be a success because it has become popular, you typically rely on outside investment to grow and pay the bills.

There are several ways to get investment. The typical scenario is to persuade investors to invest in your business. This isn't a simple decision to make and you should carefully research this option before making the jump. Luckily, most investors are also happy to give their advice and opinion on your product, which you can use as feedback and to make a decision.

What if you're not able to get the finances together to scale the team? This typically means that your product isn't there yet, either in terms of users or financially. Your next step should be to investigate and work on the reasons that prevent your business from growing.

Hiring full-time employees is not a necessity. You can decide to collaborate with freelancers or work with a profit-sharing model. This is a much cheaper route to obtain the skills you need to work on your product.

In fact, in many cases, it makes more sense to take this route before building a team, especially if the app is still in its early stages.

Who Do You Need?

Acquiring knowledge that you don't have is the best possible investment.

Building your team begins with understanding the type of profiles you need. In the beginning, your focus is horizontal expansion. What does this mean? You hire people with expertise in areas you don't have.

For example, if you're an engineer, you typically end up working with designers and marketers. Perhaps you're a strong backend person, but you're missing someone who can take over frontend development.

Your next focus is vertical expansion , which means you expand the existing teams to increase the work output. For most products, this means hiring engineers.

Figure out what your product is lacking the most. Is it design, marketing for growth, or quality code?

Don't forget complimentary expertise that might not directly relate to the development of the product, such as marketing or business development. These are important to guarantee that your product continues to grow.

Where Do You Find Them?

Besides the focus on shipping a product, your company culture is also important to attract talent.

There's always a battle for talent. Whether it's for startups or agencies, there is a struggle to find the right people. The market is very competitive right now.

Before you position yourself to potential people who could come work on your app, ask yourself "What is your vision? What makes you different? Why should people care?"

A big difference is that, as the team grows, you're no longer positioning yourself as an individual. You now have a company culture, a way of working and values you care about as a group.

A great example of such a company is Buffer, a company that prides itself on transparency and embraces remote working. Doing a similar exercise by reflecting what is important for your company helps to clearly position your company.

Depending on whether you're looking for freelancers or full-time employees, there are plenty of job sites available and hiring a recruiter at this stage is rarely worth it. Check out Authentic Jobs, Dribbble , and Crew for example.

Collaboration in Small Teams

The first action item after hiring new people is figuring out what the right workflow looks like. If you did everything by yourself, then people now have specific roles and responsibilities.

For example, how does design and development smoothly interact with one another?

The solution is a combination of the right process and the right tools.

It is a big challenge to keep process and tools in balance. Too much process and you slow down your production speed, too many tools and you become inefficient as an organization.

Fortunately, you can figure this out as you go while also taking the right steps listed below.

Start With Responsibilities

By having clarity on who's responsible for what, the risk for conflicts in a team reduces

The starting point is to identify the responsibilities of each team member. You've hired people to do a particular job for you. A great exercise to do is to list responsibilities together. This way, everyone involved has a clear picture who is responsible for what.

In the beginning, this will be straightforward. Design and engineering are very different. But what happens when you hire a visual designer or a user experience designer, and you have a head of design? Then this exercise will be more difficult, but also more fruitful.

Implementing the Right Process
It is important to discuss what the ideal process should look like. Typically there is always a hand-off process, whether it is design assets going to development or marketing data going to the founder.

Ideally, you describe how this process can go flawlessly and how communication errors can be avoided. Based on that, you should have some form of process down.

Product companies, both large and small, typically work with agile sprints (whether it is design or development) and in marketing there's the process of measuring and improving.

Selecting the Right Tools
Once you have defined what the ideal process looks like, the next step is defining what the right tools are to accomplish this. For example, for an ideal design workflow, you could use invision. To manage development sprints, you may want to collaborate using Pivotal Tracker. For task management across the board, Trello could be an option and to smoothen communication Slack is certainly worth considering.

Based on who is responsible for what and how you ideally collaborate, it will be easier to select the tools that fit the workflow of your team. Also, the people you work with often have their own preferences in terms of tools. It doesn't hurt to ask what they would prefer to use.

Iteration

As great products are a constant process of iteration, so are great processes the result of iteration. Better processes = a better product.

In the teams I've worked, I noticed a big difference in the happiness and productivity of employees. One factor is crucial, are the people in the company open for change (in the widest sense).

Typically, if your app grows, then so does your team and the corresponding processes in the company. What's important is that how you collaborate as a team is constantly changing , for the better.

Based on feedback of the people you work with, you will learn better ways to work and communicate. Perhaps a process you thought would be useful is actually a big frustration for the team.

Keep an eye out. Improve how you work together with your team and the results will be fruitful.

Making Product Decisions

The role of product owner can help teams to pursue the same product vision.

One of the more complicated challenges as your team grows is the ability to make the right product decisions.

While previously you were able to make product decisions by yourself, now there are multiple voices in the room and each might have a different opinion of what the right approach is for the future of the product.

This is why the role of product owner exists in many companies. The product owner is the person responsible for listening to everyone. Each individual looks at a problem from their own perspective, whether it's business, user experience, or technology. With the combined information, the product owner tries to make the correct decision. The underlying idea is that the decision made by the product owner is also the course the company takes.

When it comes to taking product decisions, it is important to be transparent and communicating clearly why a particular decision might be the better one.

Growing Even Bigger

When you have a team and you're working on improving the product, it seems that there's always more work than you can handle. This is something that won't ever change, whether you're working with five people or 500.

During the hiring process, there's a constant process of optimisation, in an effort to try and retain output and productivity as the team scales. It's the biggest challenge any growing organisation faces and there's no secret formula. Every company struggles with problems as they grow.

Conclusion

Finding the financial means to expand your team is one of the biggest hurdles to take. Once that is completed, the next challenge is to figure out what you need, who to hire, and how to collaborate.

Getting all of the above right is a continuous journey, but the results are very worthwhile and significant improvements for the growth of your product.
Written by Sven Lenaerts

If you found this post interesting, follow and support us.
Suggest for you:

Build Apps with React Native

The Complete Android Developer Course - Build 14 Apps

The Complete Android & Java Course - Build 21 Android Apps

Android Application Programming - Build 20+ Android Apps

iOS 10 Message Extension App Reskinning without Coding

How to Hand-off Photoshop and Sketch Designs With Sympli_part2(end)

Sharing the Project

Once the project has been exported it’s ready to be handed off to the dev team. Collaborators can access the project via a link which can be copied and emailed directly from the Sympli web app, or from the plugin in Sketch or Photoshop.

Downloading Assets

During the export process Sympli will have prepared and uploaded all the assets you defined in your source design document. These assets can be downloaded all at once via the Download All button in the Sympli app, or individually by hitting the grey downward pointing arrow icon to the right of the item.

Each asset can be downloaded as a bitmap (PNG) or a vector (SVG) file.

When downloaded as bitmaps the images will be downloaded at each of the resolutions specified during project setup, e.g. 1×, 2×, 3×.

Once exported to Sympli you can also use “mapping” to rename assets on the fly. The “mapping” system will remember the old name of the asset and associate it with the new one you have added, so if the source file is re-exported assets will be updated correctly but retain their new names.

Web App Tools

Inside the web app you’ll see a little bar running down the left side that provides you with some helpful tools.

Layers
By expanding the layers tool you’ll get a complete representation of the layers in your original source document. This is particularly helpful for selecting layers that might be obscured behind other layers and hence difficult to select with a mouse.

Rulers
The second tool is a set of two intersecting rulers whose crosshair you can drag around the page to measure the distance between the UI’s edges and the rulers’ center point.

Adding Comments
The third tool provides the ability to add comments through which you can communicate with your team. Activate the comments tool, click a position on the design, then type your message in and click Send.

Sympli CSS Generation

One of the features available in Sympli’s web app is automatically generated CSS. You will probably want to write your own responsive layout code given that Sympli’s CSS is pixel perfect and absolutely positioned, but when working from Sketch designs there is some great copy & paste CSS generated for things like gradients, backgrounds, text settings, shadows, borders and so on.

Allow me to share a couple of quick tips that may be helpful when creating UI elements to be converted into CSS by Sympli.

• The first is to be mindful that CSS can’t handle blending modes in the same way as a design app. For example, CSS drop shadows don’t support the typical design app shadow blending mode of “Multiply” so they should instead be set to “Normal”.
• The second is that when creating borders I found setting them to the “Inside” position gave the most accurate reproduction in Sympli’s CSS.
• Thirdly, if you do want to have Sympli generate CSS for you I recommend working with Sketch; in my experience thus far it will give better results than working from Photoshop documents.
• And finally, with designs from both apps sometimes linear gradients can run in an unintended direction, so double-check on your generated CSS as you go.

Getting Dimensions

Sympli makes it quite easy to get the size of different design elements as well as the spacing around them. Click on an element in the design, or select it via the “Layers” tool, and you’ll see rulers appear with dimension readouts as seen below:

You’ll get the dimensions of the element itself as well as its distance from the edges and near neighbors in the layout.

Text and Font Info

When you select any text element, if you look at the display on the right side of the web app you’ll see a readout providing the font family, font size, alignment and text color. You’ll see code with all these items in the auto-generated CSS section as well.

Below the read out, it’s also possible to click the button labelled Copy to grab the content of the text item, ready to be pasted into code.

If you select the third tab on the right labelled Aa you can see all the font families used in the current design.

Additionally all the fonts used in the overall project are visible in the Summary section, which we’ll talk about shortly.

Color Extractions

Color are automatically extracted from your documents and can be accessed in RGB or Hexcode form.

You can view the colors used in any element of your design by clicking it to select then viewing the information in the panel on the right.

You can also see a complete color palette detected from your design by ensuring nothing is selected, then clicking the second tab on the right panel with the droplet icon.

As with fonts, all the colors across the entire project can be accessed from the Summary area. Let’s take a look at that now.

Summary and Brandbooks

To reach the project Summary screen go to the top level page of the project then select the Summary tab, located after the Designs tab. Here you can see all the colors and fonts used throughout the entire project.

This selection of colors and fonts can be saved out into what is referred to by Sympli as a “Brandbook”. Brandbooks are comparable to style guides, allowing you to keep track of colors and fonts associated with particular brands.

Handling Changes

If changes need to be made to the source documents, adding them to the corresponding Sympli project can be done in essentially the same way as the initial export. Select the artboard that has been modified, then run the export process we described earlier.

If you are viewing a design via the Sympli web app when a modification is uploaded it will detect the changes and prompt you to open the updated version.

Written by Kezz Bracey
If you found this post interesting, follow and support us.
Suggest for you:

The Complete Web Developer Course - Build 14 Websites

Bootstrap 4 Rapid web development framework HTML CSS JS

Learn Responsive Web Development from Scratch

Create Complete Web Apps without Coding

Build Apps with React Native

How to Hand-off Photoshop and Sketch Designs With Sympli_part1

Let’s take a look at Sympli; a collaboration platform for designers and developers. It works with Xcode, Android Studio, Sketch and Photoshop–in this tutorial we’ll cover the designer’s perspective, then in a follow-up post we’ll see how Sympli works from a developer’s viewpoint.

Familiar Pain Points

When you have a team working on an app UI, (be it for an Android, iOS or HTML5 project), the transition phase from design to code often becomes rocky, inefficient, and sometimes a little bit painful.

Once a Photoshop or Sketch-based design is finished it’s typically forwarded, as is, to the dev team. From there the dev team are left to extract image assets, measure up dimensions and manually figure out the colors, font settings and text content that needs to be translated into code. If alterations are made to the original design files, transferring updated documents via Dropbox (or email) is slow, clunky and difficult to keep track of.

All these steps add significant time to the development process, and on top of that, require coders to access and learn design apps they would otherwise have no need for. This means extra money spent on software licenses, and on paying for the time spent manually handling tasks that fall into the “no man’s land” in between designing and coding.

This is where Sympli steps in to propose a solution. Rather than having developers handle these “in between” steps manually, Sympli aims to automate the whole transition process. Once a designer has completed their UI they export it to Sympli, which then automatically handles asset preparation, layout dimension measuring, color palette generation, font setting extraction and more.

Devs can then forget Photoshop or Sketch even exist, and instead view designs via Sympli where everything they require to get straight into the business of coding is available for them.

Designers need only install the Sympli plugin for Photoshop or Sketch, both of which are available as free downloads:

Coders have the option of using the plugin for Android Studio, the plugin for Xcode, or Sympli’s web app for HTML5 & CSS based projects. These three are all free to use for a single project, so if you’d like to follow along as we walk through this tutorial head to sympli.io and grab yourself an account.

This article is the first in a two part series. We’ll start by looking at the design side of the equation, covering how best to setup your design documents and export them to Sympli. We’ll also keep a focus on web oriented coding, looking at how the Sympli web app works. In the tutorial subsequent to this one, we’ll step into using Sympli with Android Studio and Xcode.

Let’s start at the very beginning: getting the Sympli plugin installed into your preferred design software.

Sympli Plugin Setup

The first thing you’ll need to do is head to the downloads page, then grab and install the Sympli plugin for your preferred design app; either Sketch or Photoshop.

After installation, in Sketch you can access the plugin under Plugins > Sympli > Export to Sympli. In Photoshop you’ll find it under Window > Extensions > Sympli.

Note that when you run the plugin the first time you’ll need to sign in to enable communication with your Sympli account.

Sympli Projects

“Projects” are the core of working with Sympli. Each project can contain a number of “Designs”, or screens, and you can have multiple source PSD or Sketch files feeding into a single project if you choose.

Projects can be created for Web, iOS or Android with 1×, 2× and 3× resolutions supported for each. As mentioned earlier, in this tutorial we’ll be focusing on web, and there will be another tutorial coming soon to focus on iOS and Android projects.

You can create a new project online via the Sympli “Projects” interface:

Alternatively, you can do so from the Projects tab in Photoshop plugin:

Or in the Sketch plugin, by clicking Create New Project then choosing your preferred options:

Using Artboards

Whether you’re working with Sketch or Photoshop, the best way to prepare designs for syncing with Sympli is through using artboards. Each distinct UI mockup should be in its own artboard, for example:

The reason for this is that after exporting to Sympli, (which we’ll cover later), each artboard will be picked up and processed separately. You’ll then be able to access them individually in order to grab their assets and code related information. Each artboard will be visible as a “Design” in the Sympli web interface, like so:

Design Resolution

Sympli is built to be aware of scaling requirements for 1×, 2×, and 3× resolution. It will do things like dividing layout dimensions by two or three where appropriate, so it’s important to know beforehand what scaling factor you need so you get the right results.

For example, if you are designing a 2× resolution UI for the iPhone 6, which has a display size of 375px by 667px, you’ll need to ensure your artboards are each twice that size at 750px by 1134px.

When you export a 2× web project to Sympli it will halve all the dimensions in your layout, including those output in generated CSS code, (we’ll talk more about CSS later). Your 750px by 1134px artboards will be recognized as 375px by 667px Sympli designs with 2× resolution, as pictured in the bottom left corner of the screenshot below.

Preparing Assets for Export

Sympli will automatically extract assets for you at all the required resolutions, but you’ll first need to tell it which parts of the design should be converted into images. The process to do this is a little different between Sketch and Photoshop.

In Sketch, select the layer or group for the element you want to have exported as an image then click the Make Exportable + button at the bottom of the right column.

The first time you click the button it will prepare a 1× resolution image for export, so you’ll need to click it additional times for extra resolutions such as 2×, as seen below.

If you’re working with Photoshop, select the item’s layer or group, then in the Sympli plugin panel’s Assets Utility tab click Mark as Asset. It will add the prefix “AST:” to the layer, hence marking it as an asset. You can also manually rename layers to add this prefix instead if you prefer.

Exporting to Sympli

When your UI design is ready, select the artboard(s) you wish to export. If you don’t already have a project setup you can do so now via the Sympli plugin for your design software. As part of this process you’ll be given the option to sync / export your design right away.

If you already have a project setup, be sure you identify the correct one in the Photoshop / Sketch plugin then press the corresponding Sync or Sync Now button.

Sympli will spend a moment exporting images and uploading your designs. Once your project is exported you can view it from Sympli’s “Projects” page. From here you can select any design / artboard and go into it via the Web App for closer inspection.

Written by Kezz Bracey
If you found this post interesting, please follow and support us.
Suggest for you:

Build Apps with React Native

The Complete Android Developer Course - Build 14 Apps

The Complete Android & Java Course - Build 21 Android Apps

Android Application Programming - Build 20+ Android Apps