Getting design and development team on the same page!

What makes or breaks a product team?

Strong design principles are one. A clear, effective roadmap is another. But one of the most important, yet overlooked, aspects of all great product teams, are the relationships between the designers and engineers on your team.

“Truly great products are often a combination of two things: a technical breakthrough and a never-before-seen design it enabled.”

Yet many designers compartmentalise building a product into two distinct parts — design and development. This distinction is one of the most dangerous traps a product team can fall into. When the design is seen as a satellite that orbits engineering, it usually comes crashing back to earth.

The problem is we separate design from implementation. In product design, both these things are inextricably linked. A world with terms such as “design freeze” or “handoff” just won’t cut it.

Truly great products are often a combination of two things: a technical breakthrough and a never-before-seen design it enabled. So it’s essential designers understand the possibilities and restraints of the technology they’re working with before they can properly delve into the design.

Design together

Here’s an example. Let’s say you’re designing a native mobile app. Here are some technical questions you might receive from an engineer that can heavily influence your design decisions:

  • Which framework are we going to use for that home screen chart? If we don’t know the suitable one, we should ask the developer for a suggestion and follow the UI of that framework.
  • How long does it take the API to fetch the data for that list-view? If it’s too long, you’re going to need to do more than place a spinner.
  • The API takes a little too long to load user’s loans. What do we display in the meantime?

Questions such as the above should be asked and addressed as early as possible by discussing with engineers. Involve them in the design process, at the end of the day, it’s the developer that actually builds the website or app.

Even though you’re the designer, the developer knows best when it comes to certain other aspects of the user experience (perceived performance, page loading times, miscellaneous features that will crash the browser).

Turning design into reality

Being a great designer requires you to be empathetic, not only to users or clients but also to your engineers. Let’s not forget that all of us are working for the same goal of building a kickass product!

So here are key pointers to turn your design into pixel perfect reality:

1. (Atomic) Design System:

Design System is a list of all the elements you are using in a project. It helps you maintain consistency in the design. Want to know how we built our design system? Take look at this article:

getting-design-and-development-team-on-the-same-page


2. Mockups:

We all have been generating & sharing UI mocks comfortably for many years now. But there are few things which will help us avoid confusion.

Artboard sizes:

Nowadays we have a wide range of devices. Not just web but our mobile platforms also has varying screen sizes! It’s important to decide how will our product look on all those screens? Define the breakpoints and keep in mind the media queries that developers are going to use. Talk with your developer if you don’t know what it is.

Breakpoints and responsive layouts:

Upload an artwork to Zeplin or Google Gallery or InVision with the responsive design (according to the breakpoints that you’ve already set), in other words, share how your design looks in different screen resolutions and devices.

1_G3sPRe46XsvkpOITT1EZow
You think it‘s clear that the design will be horizontally centred at higher resolutions, such as 1920 x 1080 pixels, but developers are not mind-readers.

Tools for designers:

We have developed a Sketch plugin which allows you to quickly generate guides for a selected element and helps you achieve web development’s famous grid (column) behaviour in Sketch. The plugin was featured on SketchApp website and newsletter.

Tools for designers

File names and versioning:

The name of the screen should simply describe its function. If you’re not yet using a version control solution for your designs, you probably should.

Make sure to use consistent casing when naming your screens, whether it’s ‘camelCasing’ or ‘Sentence casing’ or ‘lower casing’ etc.

File names and versioning

We also add 3 number to give the sequence to mockups.

3. Interactions:

Make a flow:  Putting the mockups together is only half the work done. You’d need to stitch the screens together based on the flow using Hotspots (or just make an Interactive Prototype). It helps the product manager understand how the user journey is panning out and helps the developer plan her/his approach to code.

Figure out the fidelity: Not every screen has to be fleshed out with high fidelity prototypes. Few screens could simply be static with explanatory comments, few could get away with platform-specific standard interaction patterns and few might require those custom prototypes. There’s no blanket rule for all the screens, so discuss with your developer & plan accordingly.

Suggested Tools: Overflow, Marvel, InVision, Google Gallery, Principle or craft it directly in code!

4. Specs and assets:

Today with products like Zeplin, Google Gallery, Marvel Handoff or InVision’s Inspect sharing style guides and specifications has never been easy.

Assets and resources:

Exporting assets for the different platform is easy but your developer is gonna love you if you are giving them optimised assets! Use optimisation tools like Kraken, ImageOptim, Optimage or TinyPNG.

Even better if you use SVG.

When you use SVG for your icons or illustrations, you don’t need to worry about devices with different pixel densities. Another advantage is that SVG graphics use up less space, and can be compressed effectively by gzip on the server side.

Think twice before you send an asset larger than 1MB to a developer! Don’t be lazy and send the job off to a developer; you are responsible for the visual quality of the project. Check out this image optimisation guide by Google.

Assets also include custom fonts and copy for your vernacular Apps.

Final Checklist:

1. Don’t be too visionary.The ideas must work.

2. Work with real data in mind and think about a “scalable design”. If there is a long text, what happens? how does it work in other languages? and if in the future will be adding more items to the menu, what happens?

3. Empty states: if you don’t know what they are, find out!

4. Explain the reason for your choices about the layout, colors and interactions.

5. If you speak the language of developers, you can get respect. If you have a good knowledge of programming languages (HTML, CSS, Java, PHP, JavaScript, C #, Objective-C or Swift) you can be one of them and they listen to you with pleasure.

6. Never forget the user.

Conclusion

Although you shouldn’t need another reason to be considerate of your fellow teammates (especially developers, who traditionally, designers find it hard to see eye-to-eye with), using these tips will help you, as a designer, just as much as they help everybody else. Cutting corners to save time only creates speed bumps further down the road, so add a little care and some foresight with your design choices.

Tap the ? button if you care about your developer (and/or you found this article useful).

Have any tips of your own? Let us know ?

Source:- Capital Float’s Medium Blog

More Related Posts

Card image cap
With a dream to revolutionize business lending in India, Capital Float provides loans to small businesses – YourStory

Written by Pardeep Goyal

The Indian business environment is exciting especially now, where every bright idea is turning into a business, big or small. There are over 30 million SMEs in India. Small businesses are run by passionate entrepreneurs, but unlike digital startups, venture capital money is not accessible to them. Despite efforts, some of these businesses are losing out on growth or shut shop due to lack of working capital.

With a dream to revolutionise business lending in India, Gaurav Hinduja and Shashank Rishyasringa are changing the business of money lending with Capital Float.

Initially, Shashank was an engagement manager at McKinsey & Company, where he advised several leading financial institutions, investment funds, governments and foundations on business strategy, governance, operations and risk management. Co-founder Gaurav was running operations at India’s big apparel manufacturer Gokaldas Exports with over 40,000 people and USD 250 million in revenues.

The duo were at Stanford together before they co-founded Capital Float. They considered various business ideas but doing something related to capital was a natural inclination for them. So they decided to take on the money lending problem for small businesses.

How Capital Float works?

According to Gaurav, Capital Float works in three basic steps:

  1. Customer has to apply online,
  2. Submit documents,
  3. He/she gets a loan if eligible in about three days.

Yes, just three days for loan!

He adds, “We make sure to go through as many data points as available, including external data sources to determine credit worthiness. Once we have established that, we have been able to disburse a loan in under three days and in a lot of cases where the loan is small, it happens instantaneously. In the future, we hope to reduce that time for disbursal even further.”

Team Capital Float understands the importance of friendly capital, and is quick to deliver that much-needed finance to promising businesses that approach them. It is rare in India that a small business can get a loan in such a short time from any traditional finance company. Gaurav says, “Besides the swiftness and hassle-free nature of our service, one of the key USP is that we do not charge a prepayment penalty and our products have dynamic tenures that suit our customer’s needs.”

Key Challenges and Motivation

Starting up always comes with its set of challenges. At Capital Float, they went through the motions like everyone else: from the initial days of hiring the right team to defining clear goals, to ensuring compliance.

For startups, challenges are part of the larger scheme of things to survive and grow. Capital Float is an RBI-certified NBFC but registration was not an easy task. “At one point, we almost quit and took a break for a couple of months. But we understood regulation is very important in a complex market like India and we got back on track and persisted with our goals”, says Gaurav.

Gaurav shares how the company started conversations with their customers in the early days: “Most traditional loan providers find reasons to say ‘no’ to an entrepreneur looking for capital, but we look for a reason to say yes.”

The company has come a long way now; it is serving in major cities like Delhi, Mumbai, Bengaluru and Chennai and has testimonials from CFO of Zovi and other big brands.

According to Gaurav, today’s SMEs will drive tomorrow’s billion dreams. “But we need to ask ourselves who the driving and supporting force behind such SMEs are today,” he adds. The dream to revolutionise business lending in the country has kept Gaurav and Shashank going. “The fact that we get close to a hundred applications a day vindicates our belief in what we set out to do: create a capital revolution in India,” says Gaurav.

Being an entrepreneur himself in the fin-tech domain, Gaurav believes that entrepreneurs form the backbone of the Indian economy as the creators of the largest number of jobs and biggest contributors to the GDP. A significant hurdle for most of them is timely access to appropriate finance.

He shares some advice for entrepreneurs working in the financial domain and other budding startups:

  • Compliance is key; never ignore it
  • You should choose investors who share your vision
  • Don’t give up easily; starting up can initially wear you out but it should not bring you down
  • Don’t always hire for skills. Sometimes it’s important to hire for values
  • Don’t make promises to the customer that you cannot deliver on
  • Don’t launch your product in too many markets at once. Have a soft launch first, test it, tweak it and then re-launch the revised product

Gaurav adds, “There are many banks and NBFCs which provide loans to businesses, but you need to become a partner to your customer, not a lender. Use technology and big data to improve your customer’s experience. Understand how different customers use your products in different markets so that you can customise your product to meet their needs.”

Piece sourced from YourStory. You can read the full piece here.

Oct 24, 2018

Card image cap
Why Online Vendors Should Apply for Capital Float’s Online Seller Finance

Are you an online seller looking to optimize and grow sales? Given the highly competitive nature of e-commerce, it’s always advisable to have a cash flow option handy for successful expansion. Furthermore, you wouldn’t want to lose out on market opportunities due to the lack of convenient financing options. And that, is where Capital Float comes into the picture.

In the cut-throat world of e-commerce, having a lucrative financing option at the right time is likely to translate into a significant competitive edge. There are three key occasions, wherein, an online seller may require rapid financing:

  • Respond to an increase in sales by purchasing inventory
  • To be prepared for seasonal fluctuations in revenue, and bridge short-term gaps in liquidity.
  • To widen product portfolio by diversifying into other product segments or to widen reach by operating on a new marketplace

Here are a few compelling reasons as to why you must apply for Capital Float’s Online Seller Finance to maintain your competitive advantage in the business:

  1. Flexible loans that are customized to your need

The exciting features at Capital Float’s Online Seller Finance ensure speedy expansion for your business in a simple manner. As an e-commerce vendor, you can raise funds from INR 1 Lac up to 1 Crore, depending upon your cash requirements. Furthermore, we provide you with effortless repayment modes for a loan tenure between 90-180 days. Our partnerships with multiple, leading e-commerce platforms enables you to acquire our e-commerce seller loans to operate and expand across different online marketplaces.

  1. A quick, hassle-free process

        a) Minimum documentation

To apply for our eCommerce seller loans, you need not furnish a heavy stack of documents. All we would need from you are your bank statements of the last six months and KYC documents credentialing you and your business.

         b) Zero collateral

We provide unsecured loans, meaning we don’t take collaterals as guarantee for loans. You won’t be asked to pledge your property or vehicle to avail a loan from us. Our loans are bereft of the anxiety that are often associated with loans against collateral.

        c) Loans against marketplace sales

Our motto is to help businesses to ‘Break Limits’. We understand that many a time, businesses with potential are hampered by the lack of finance. We are committed to change that. You can avail Online Seller Finance on the basis of your proven sales on e-commerce marketplaces, receiving up to 150% of your average monthly sales.

  1. Apply anywhere, any time

While financial institutions like nationalized banks, private banks and traditional NBFCs not only take weeks to sanction a loan, but they also have tedious application procedures, Capital Float ensures immense flexibility in the process. We have designed a handy mobile app through which you can apply for a loan from anywhere, as long as you are connected to the internet. The four-step online application procedure is not only user-friendly, but allows you to raise funds without losing on precious time.

External financing is an excellent tool for you to grow as an online vendor and keep operations smooth. Capital Float’s sole aim is to bridge the current gap in the market with innovative and flexible credit products for online enterprises like yours. That said, Online Seller Finance is just the product you need to fulfill your finance requirements in a smooth, hassle-free manner.

Wait no more. Take your online business to the next level with our online seller loans. Click here to apply.

Oct 24, 2018

Card image cap
Why SMEs should go digital

The Digital SME

If you’ve been reading the papers over the last year, you must have come across the words ‘digital’ and ‘SME’ on almost a daily basis. From the the ‘Digital India’ initiative by the government to cut red-tape, bureaucracy and dare I say even corruption, to the KPMG-Snapdeal report on how going digital (or selling online) has helped SMEs increase their turnover and profitability, there’s a lot of excitement in India about SMEs going digital.

Over the past few months I’ve been asking myself a couple of questions:

  • Do SMEs really understand what “going digital” means?
  • Do SMEs know what are the benefits of going digital?


Going Digital: What does this really mean?

Depending on which report you read, SMEs can sell products online for prices between ₹1500- ₹3000. So does this mean the SME has now gone digital? I think not. This just means the SME now sells its products online and therefore has a greater reach, which to be honest is a great achievement in itself, but the SME still has to adopt technology internally for it to go truly digital. A modern digital SME is powered by solutions that are spread across multiple functions: From Customer Acquisition to Risk Management to Operational Efficiency to Enabling/Empowering Workforce. Adopting new age technological solutions internally will allow an SME to achieve scale and more importantly operational efficiency at a lower cost. Some of the largest start-ups have managed to scale globally because they have successfully done this. Firms like Practo, AirBnB and Uber for example, have successfully incorporated technology in their internal processes which has allowed them to grow globally at a rapid pace.

The rapid growth of technology has given SMEs:

  • Access to Enabling Infrastructure through increasing device penetration and an enhancement in internet connectivity.
  • Availability of economically feasible enterprise solutions and services along with a thriving mobile applications (apps) ecosystem.
  • Customers who have adopted technology and ecosystems that are allowing this adoption through key initiatives.
     

Going Digital: Key Benefits

4 areas are likely to be directly benefited if SMEs adopt technology:

A) Customer Acquisition

Technology can be leveraged to access clients in distant geographies and create a greater visibility among target segments. Personalisation in engagement and customer relationships, for both new and existing clients, can be managed in a more efficient manner. The immense data that is captured using technology will allow SMEs to develop customer intelligence which will then allow them to optimize sales and engage with various ecosystems to open new sales channels.

B) Operational Efficiency

Automation and streamlining of core processes will allow the SME to become more efficient, reduce wastage and utilize resources in an optimal manner. This will allow them to enhance the customer experience and optimize their supply chain management through better visibility and control over logistics. With efficient processes in place, SMEs will be able to choose suitable potential partnerships that will fit their internal processes and not cause any disruption,

C) Workforce Enablement

Technology can go a long way in identifying workforce shortfall and identifying key areas of skill development needed within the organisation. A number of digital tools are now available for employees to collaborate and for the SME to monitor employee productivity. Web based solutions for skill development and training for employees will help the SME ensure that employees are empowered with new tools and concepts on a regular basis

D) Risk Management

With use of technology comes the responsibility to protect the information the firm has gathered. Data Security becomes paramount for customer/employee data as well as the company’s financial information. Digital solutions for preventing such leaks would strengthen the organisation. Technology can also be used to safeguard and monitor physical assets through the use of surveillance, asset control and tracking solutions.

There has never been a better time for SMEs in India to “go digital” and leverage technology to incorporate financially feasible solutions.

Akshay_Sarma

Akshay joined Capital Float after completing MBA from Judge Business School, University of Cambridge. Following 6 years with Deutsche Bank across various functions and geographies, he opened a French Italian bistro in India. At Deutsche Bank, Akshay worked across risk management, structuring derivative products, trading Indian government bonds and structuring and executing assets financing trades.
Akshay manages Capital Markets at Capital Float.

Oct 24, 2018