October 1, 2018 - No Comments!

7 Ways to Improve your Website’s UX

“UX when done right, often stays unnoticed”

Your website is your best salesman. It should not be neglected, otherwise - there’s a huge chance you'll lose your potential clients at the very beginning of a process. It needs to be attractive and well-thought out.

We’ve put together a list of useful tips that will help you boost your visitors’ engagement and keep it stable.

1. Improve Page Speed

Slow page speed evokes frustration in visitors and can cost you a client. A 2-second delay in load time results in the abandonment rates of up to 87%. People access your website from many different platforms. Did you know that 64% of smartphone users expect pages to load in less than 4 seconds? If you want your conversion to be higher, you should meet their expectations. You can do it by:

  • minimizing HTTP requests
  • deferring JavaScript loading
  • reducing server response type
  • choosing the most adequate hosting option
  • performing a compression audit
  • enabling compression
  • reducing sizes of images
  • reducing numbers of plugins you use (and testing them)
  • reducing redirects

If you wonder how to check the speed of your page - you can use a tool offered by Google - PageSpeed Tools.  More detailed info about improving your page speed can be found HERE.

2. Apply adequate CTA buttons

Placing CTA’s on websites became a must-have, but the important thing here is to choose the adequate type of these buttons and apply them wisely. There’s plenty of options to choose among - width, color, size.

If you have some background in psychology, you have the power to create an effective and highly-converting CTA’s, simultaneously becoming the master of conversion optimization.

Among the most popular CTA’s you can find:

  • Lead Generation
  • Form Submission
  • Read More Button
  • Product/Service Discovery
  • Social Media Sharing
  • Closing the Sale
  • Event Promotion

Carefully consider the words used for your buttons. Place a word that will be a clear trigger, something bold with an emotional connection. The perfect example here is FreshMail.

3. Create main categories

Take some time and think about dividing your content into categories. Choose only the most important things to list.

Check the most popular subpages on your website. As for the content in each category - keep it simple. It’s not a place for fancy buzzwords and complicated descriptions -  you have only few minutes to introduce your business. Your main menu should tell a story and be a path to follow by your potential clients. Don't forget the "about" and "contact" category, as they are the most important ones.

4. Simplify navigation

How many times have you left a website because its structure was complicated? When your site is messy, you can’t expect someone to navigate through it with patience. All the necessary information should be accessible right away. If not, your visitors will fastly lose their interests and look for an alternative pages of your competitors. 

Too many details will overwhelm your visitor. The perfect option is to keep it in a range of 3-7. Remove misleading information from your site - people should know exactly what they'll find after clicking a specific category.


5. Make the most of social media

As we live in the world of sharing - benefit from it. Place social media buttons (e.g. Facebook, LinkedIn, Twitter) on your page. It will encourage visitors to learn more about your company and follow it online. It’s your real audience so master the communication on each channel. 

6. Create coherent branding

Make your brand identity coherent and suitable for your business. Add some personal character, something that your visitors will associate with your company. Make it more individual, don't follow the same patterns. The visual identity should match your type of business. Again - it’s all about the psychology of colour. Focus on what’s most suitable for your firm and what values you’re trying to convey with your image. Let your brand tell a story and narrate it well.

7. Place a search box and make sure it works

When placing a search box on your page, remember that is has to be visible. It mostly comes at handy when you have more subpages with detailed information. It’s far more convenient for users to just look something up instead of spending their time searching for the information they need. 

A good idea would be to place a search box at the top of the sidebar or in the header area. When implementing one - check if it works well. If some misspelling occurs, show related items, a 'no product found' is not a ideal option.


Published by: admin in blog

September 6, 2018 - No Comments!

How to Be a Good Tech Leader

As they say, the stronger the team, the stronger the business. But somehow many managers and tech leaders struggle with core management skills and the effective work of their employees. If you're an engineer that accepted a new role - it's time to discover what a Tech Lead job really offers and how to do it right. That's what I did.

A Tech Lead is a mixture of roles and abilities - you should blend your technical expertise with management skills. Easier said than done? I know it may seem hard at first, but with time you'll develop your own style of combining it all.
Your responsibility now is to lead the team of talented individuals - manage their way of work, taks, schedule and possible hazards. You'll be under a lot of pressure now  - but leadership is rewarding (being stressed is completely normal if it's your first Tech Lead role and you have to face new responsibilities).

Tech Lead Main Responsibilities:

  • Maintaining the project technical vision
  • Helping with planning and executing
  • Setting expectations about deadlines
  • Answering technical questions of your team and helping in resolving complicated problems
  • Reviewing the work of other team members and checking its consistency with the project
  • Monitoring team members
  • Giving feedback
  • Ensuring your team understands their roles and tasks
  • Working with other departments

There's many tips worth describing and useful things I've learned so far, but today I want to share some soft basic skills and tested ideas.

Communicate effectively

Solid communication became a common buzzword nowadays. So what it really means for you in practice?  You should learn how to communicate your ideas well and not leave the room if someone doesn’t understand the vision. Being a good listener will help you hear your employees needs and opinions. They need to know you’re a person they can rely on.

What I usually do:
I prepare 1:1 meetings with every team member (one meeting per month) just to talk about projects and expectations. It’s a perfect time to discuss things more freely. After such meeting, you know what should be changed or improved. Most importantly - when done on regular basis it provides you with fresh update.

You’re the bridge between your team and other departments. Choose the right manner of communication and adjust it to various groups of people. The key is to explain technical issues to non-technical people in the way they could understand it without problems.

Find the right members of your team and delegate

Delegating is one of the biggest challenges you'll face when being a Tech Lead, because for a new leader it can be intimidating at first. You won't run away from it though, there's simply too much work do to and you won't be able to do it all by yourself. Delegating means sharing responsibilities and it's a perfect way to empower your team members.

As a leader, you have to recognize the skills of your employees. When recruiting, you should know what you’re exactly looking for. Keep in mind that some developers like to work in long term projects but others don’t. Check their preferences and adjust it to the workflow in your company. When it comes to experience - I think sometimes it’s better to hire an eager to learn person with slightly less professional experience than the other way round. I always focus on the mindset - the ability to think logically and solve problems. 

Choose people that match your needs and your company’s projects.

Play on the same side

If you are not on the same side with your employees, it will never be a sincere relationship. When we celebrate success, we know we did a good job as a team. If something goes not as planned, we work at this together and support one another. You can discuss committed mistakes and work on them in the future. The important thing here is to talk - whether it went right or wrong, it's crucial to discuss the outcome.

Celebrate even small achievements. It’s a trigger that motivates people to think outside-the-box. If you reward an outstanding idea or proposal, you can expect many more good solutions to come. Be constructive but if you don't like a particular idea - explain it with good arguments. You should never criticize a proposed solution without mentioning why. 

Build authority

Making difficult decisions is pretty much a daily bread. Learn how to be a good friend but also a leader. It’s important to separate these two spheres. It does not mean that as a leader you have to supervise every movement of your employees. Trust them. I often come across opinions that if you have a friendly relationship with your employees, they won't respect you enough and won't treat you seriously. I would say it's quite the opposite!

Be a friend, but don't be afraid when making a decision that dissatisfies someone. It will rarely happen that you all think the same way. You always want the best for your team and in most cases - you have the broader knowledge about the project, surroundings and relations.


Leading a software team is also about finding the time to code. When you code, other team members see your commitment and skills in real life. Not to mention that you keep your knowledge up-to-date. Remember that you have to prioritize your tasks in order to not have many things on your mind simultaneously. If so, many of them can be neglected. Finding the right balance between coding and managing is a challenging task. Pat Kua in Taking with Tech Leads advice to follow the 30% rule - which means continue to code for at least 30% of your time. 

As you've worked hard to when acquiring your technical skills, you can also work hard to be a great Tech Leader.

Author: Tomasz Strzebak

Published by: admin in blog

August 17, 2018 - No Comments!

Milion złotych to za mało, by z powodzeniem projektować urządzenia

W zeszłym tygodniu NCBR zmienił zasady finansowania projektów badawczo-rozwojowych dla funduszy Bridge Alfa. W praktyce limit inwestycyjny zmniejszył się z 3 mln do 1 mln PLN. Jako Summer Agency jesteśmy partnerem w Shape VC, nowym funduszu założonym po to by finansować i wspierać rozwój projektów B+R i startupów w obszarze elektroniki, automatyki czy technologii produkcji. Pracujemy także jako kontrahent z wieloma startupami, które korzystają z tego rodzaju finansowania. Dlatego też pokusiliśmy się o sprawdzenie, jakie konsekwencje dla projektodawców może mieć zmiana limitu z punktu widzenia rozwoju produktu.

Milion złotych to kwota, która tylko pozornie daje nieograniczone możliwości. Rzeczywistość niestety wygląda zupełnie inaczej. W momencie, w którym będziemy chcieli zaprojektować, wyprodukować oraz sprzedać urządzenie oparte o mechanikę i elektronikę, pojawią się problemy.

1. Tworzenie urządzenia od podstaw

Za przykład niech posłuży nam gadżet z rodziny urządzeń IoT (Internet of Things), służący do analizy ruchu kończyn osób podczas rehabilitacji ruchowej. Załóżmy, że posiadamy grupę trzech świeżo upieczonych genialnych magistrów inżynierów, którzy są przekonani, że ich urządzenie zawojuje świat.

Na początek, poczyńmy pewne założenia, które będą nam przyświecać podczas całego procesu rozwoju naszego startupu.

  • nasze urządzenie będzie małych rozmiarów pudełeczkiem ze zintegrowaną ładowalną baterią litową,
  • urządzenie będzie posiadało radio w standardzie Bluetooth Low Energy - tak, aby informacje o ruchu można było przesłać do telefonu lub tabletu rehabilitanta
  • urządzenie będzie posiadało zaawansowany układ pomiaru ruchu, składający się z akcelerometru, żyroskopu i magnetometru cyfrowego
  • w celu optymalizacji zużycia energii i zajętości pasma radiowego, proces analizy i obróbki danych zrobimy na samym sensorze
  • od samego początku będziemy współpracować z lekarzami i rehabilitantami nad rozwojem urządzenia - tak, aby zmaksymalizować jego przydatność
  • urządzenie dystrybuowane będzie w EU i US 

2. Finansowanie spółki i kosztów z nią związanych

Następnie zabieramy się za proces projektowania urządzenia. Tutaj zaczynają się pierwsze problemy finansowe. Przede wszystkim jako świeżo powstała spółka nie posiadamy narzędzi niezbędnych do prowadzenia projektu, koniecznie jest więc zakupienie stanowiska dla naszych inżynierów:

  • Dla elektronika absolutne minimum przy początku pracy to komputer wraz z licencją na oprogramowanie do projektowania płytek PCB (około 40 tys. złotych), podstawowe wyposażenie laboratoryjne (multimetr, oscyloskop, zasilacz) to kolejny wydatek oscylujący w granicach 20 tys. złotych. W rzeczywistości jest to minimum często całkowicie niewystarczające, w szczególności przy bardziej skomplikowanych projektach
  • Stanowisko dla programisty systemów wbudowanych – komputer z oprogramowaniem (6 tys. złotych), proste stanowisko laboratoryjne do uruchamiania elektroniki składające się z programatora i zasilacza to 7 tys. złotych
  • Stanowisko programisty mobilnego (kolejne 9 tys. złotych)

Tym sposobem, jeszcze dobrze nie zaczęliśmy pracy, a z naszego portfela wydaliśmy już znaczną kwotę na sam sprzęt niezbędny do jej wykonania. Rozpoczynamy proces projektowania pierwszego prototypu naszego urządzenia.

3. Tworzenie prototypów oraz testowanie urządzenia

Po pół roku intensywnej pracy nad naszym urządzeniem, mamy jego pierwszy, działający prototyp. Kosztowało nas to jednak dużo. Każdy z naszych inżynierów potrzebuje wypłaty (załóżmy 8000zł brutto). W perspektywie 6 miesięcy, uwzględniając koszty pracodawcy i składki, wyniesie nas to 144 tys. złotych. Dodatkowo musieliśmy wyprodukować nasze prototypy (wraz z kosztem elementów oraz druku pierwszych zaprojektowanych na szybko obudów kosztowało to około 10 tys. złotych).

Następnie, przystępujemy do testów naszego urządzenia wraz z pacjentami. Po trzech miesiącach pracy oraz wydanych kolejnych 70 tys. złotych wypłaty, dochodzimy do wniosku, że algorytmy, które zaprojektowaliśmy w urządzeniu nie do końca skutecznie pokazują ruch nogi. Dodatkowo mamy problem z krótkim czasem pracy na baterii, urządzenie zawiesza się od czasu do czasu, bez możliwości zresetowania go. Ponadto obudowa, którą wydrukowaliśmy jest niewygodna dla pacjenta i nie utrzymuje się w odpowiedniej pozycji.

Czas, by zebrać wyniki testów i przystąpić do kolejnej pętli projektu. Wiemy już jednak, że posiadamy problem z algorytmem. Pojawia się więc pomysł, że algorytm najlepiej wykona znajomy specjalista. Zwracamy się do niego z prośbą o pomoc i szczęśliwie składa się, że akurat może poświęcić trochę swojego czasu na zapoznanie się z problemem. Nasz budżet właśnie znów się uszczuplił, ponieważ wycenił on usługę na 300 tys. złotych. Niestety tak wyglądają realia.

Mija kolejne 6 miesięcy,  lecz mamy już kolejną iterację urządzenia, która wydaje się tą docelową. Elektronika działa poprawnie i nie jest już kłębowiskiem kabelków. Algorytm zaczyna działać już całkiem nieźle, a dodatkowo zrobiliśmy na drukarce obudowę, która nie przeszkadza w czasie badania. Nasz proces kosztował kolejne 100 tys. złotych, ale pozwoliło nam to przystąpić do certyfikacji.

4. Certyfikacja

Niestety, tutaj znów napotykamy problemy. Pokazaliśmy urządzenie jednostce, zajmującej się certyfikacją i dostaliśmy informację, że musi ono spełnić cały szereg norm i standardów.

  • Badania na bezpieczeństwo urządzeń – koszt wraz z badaniem baterii to około 40 tys. złotych
  • Badania Radiowe wraz z EMC oraz badaniami do FCC + dodatkowo opłata za korzystanie z interfejsu Bluetooth – 100 tys. złotych
  • Badania na zgodność z dyrektywą medyczną - 200 tys. złotych

Decydujemy się na przeprowadzenie dokładnej analizy by upewnić się, że urządzenie ma szansę przejść te badania. Zatrudniamy więc specjalistę, który wykona ekspertyzę w laboratorium. Koszt takiej ekspertyzy wynosi 30 tys. złotych. Okazuje się, że mamy jednak problem w torze radiowym i potrzebne jest wykonanie kolejnej iteracji projektu z odpowiednią oprawką. Tym razem zlecamy przeprojektowanie toru ekspertowi tak, by zyskać pewność, że nie będzie już dalszych problemów. Kosztuje nas to kolejne 50 tys. złotych oraz kilka miesięcy produkcji prototypu. W międzyczasie pracujemy nad zaprojektowaniem porządnej obudowy do naszego urządzenia. Nie mamy jednak takich kompetencji, więc wzornictwo i projekt mechaniki zlecamy profesjonalnej firmie. Koszt takiej usługi wynosi 200 tys. złotych. Obudowy trzeba wykonać w technologii wtrysku, do którego potrzebujemy form za 150 tys. złotych. Mija kolejne 6 miesięcy projektu, które kosztuje nas 100 tys. złotych w wypłatach.

Zbliżamy się powoli do pilota produkcji naszego urządzenia. Produkujemy 100 sztuk, służących do jego promocji oraz do badań normatywnych. Jest to koszt około 20 tys. złotych. Badania trwają kolejne 6 miesięcy, po tym etapie przystępujemy do produkcji masowej urządzenia (5000szt). Okazuje się, że na tym etapie potrzebujemy oprzyrządowanie produkcyjne (w tym tester automatyczny, który kosztuje około 200 tys. złotych). Dodatkowo, jako młoda firma musimy zapłacić za zlecenie produkcyjne z góry. Wraz z montażem, wkładaniem do pudełek itd. kosztuje nas to kolejne 150 tys. złotych.

Warto dodać, że na uwadze musimy mieć również koszty marketingu i sprzedaży, które sprawią, że nasz projekt zostanie zauważony i zainteresuje odbiorców.

Podsumowując projekt naszego prostego urządzenia, od konceptu do wykonania kosztował nas on niecałe 2 miliony złotych. Niestety musimy przygotować się na tego rzędu wydatki, jeżeli chcemy poważnie myśleć o projektowaniu nowoczesnych urządzeń elektronicznych. Warto dodać w kontekście programu Bridge Alfa, że w naszym przykładzie nie uwzględniliśmy prac badawczych, będących w wielu przypadkach podstawą innowacji, stąd wprowadzony właśnie limit może mieć negatywne skutki dla rozwoju dobrych technologii. Mamy nadzieję, że nasz post przyczyni się do zrozumienia, dlaczego.


Published by: admin in blog

August 7, 2018 - No Comments!

Amazing in-app animations with Lottie library


Everyone knows that with creating a beautiful and eye-catching app comes a lot of UI/UX designer’s work. Amazing animations and graphics play an important role in convincing customers to dedicate their time to an app.

So the first thing is to design such app graphics but the second issue is to implement it in our application by a mobile developer.

Is it really that though?   

You may have already asked yourself a question: “Well, there has to be an easy way to implement such things, right?”

YES! Today I'll introduce to you the astonishing library - Lottie. It was created by an AirBnb team and developed to simplify adding animations to your application. With Lottie you can make your app more vibrant with only few lines of code.

With this short tutorial, you will learn how it can be done in few simple steps. I will show you how to add it to the Android app. It's also available in iOS, web and react native.

The very first steps

At first, you need to add a Lottie library to your module build.gradle file in the dependencies section. At this moment, the 2.5.5 version is the newest one.

You can always check the latest version at this site - https://github.com/airbnb/lottie-android

Dependencies {
  implementation 'com.airbnb.android:lottie:2.5.5’

The next step is to add a LottieAnimationView in your layout xml file.

  app:lottie_loop="true" />

As you may have thought already.. “I have a library, a special view to show this animation, but.. where the heck is the particular ANIMATION?!” Here comes the main part.

Preparing the main part - animation

You can create your own animation by using Adobe AfterEffects + Bodymovin plugin to export it to JSON file. But it's a more advanced process, usually created by graphic designers. Today, we’re going to focus on using premade JSON files from https://www.lottiefiles.com

It's a very helpful page, created to share animations with other people. You can use it as long as you want, but remember to mention the author in the ‘about’ section in commercial app.

Let's take a look at this animation of a man riding a motorcycle.


Don’t ask why.. it’s just eye-catching 🙂

Adding animation to the project and making it work  

There are two ways of adding your desired animation to make it work (it is added in the layout xml file):

  • by using app:lottie_fileName="motorcycle.json"
  • or app:lottie_rawRes="@raw/motorcycle”.

I recommend you to use the second one, then you'll be able to use a static reference to this file, not just by using it’s name.

To make an animation loop and auto play on creating an activity, I' am adding these two lines of code to the activity_main.xml file:


So, my xml file looks like this below:

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    app:lottie_rawRes="@raw/motorcycle" /> 

And MainActivity.kt is as simple as it can be:

class MainActivity : AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {

Now, we can click “run project” and see how much we are talented! 🙂

Helpful hints 

If we won’t add an autoPlay attribute to our layout xml file, the animation won’t start immediately after creating the view. We are able to start it at any time we want, by adding some code to our MainActivity.kt file.


The above line allows us to achieve the same thing as the app:lottie_autoPlay="true" line of code in xml file. It's really helpful when we don’t want to start the animation immediately, but later on.

The same thing happens with a loop attribute. It decides if our animation will loop endlessly. We could also remove it and achieve the same by kotlin code.

lottieAnimationView.repeatCount = ValueAnimator.INFINITE

If we use ValueAnimator.INFINITE, it loops infinitely. But what if we want to loop it only 3 or 5 times and stop? Nothing easier! Instead of ValueAnimator.INFINITE, you can just add an Integer value, defining number of repeating count. So it will look like the code below:

lottieAnimationView.repeatCount = 3

What if you want to run your animation for a certain amount of time? Let’s say, for 5 seconds? Just add the below code with handler, which after 5 seconds (value in code is in milliseconds) will pause your animation. It's that simple!

    }, 5000)

The same steps are required to start it after some time, by replacing lottieAnimationView.pauseAnimation() with lottieAnimationView.startAnimation().

MainActivity.kt file with stopping animation after 5 seconds:

class MainActivity : AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {

    lottieAnimationView.repeatCount = ValueAnimator.INFINITE
    }, 5000)

Listening our animations 

Another cool option is adding AnimatorListeners to the animations. Let’s take a look at another animation – a favourite icon. You like something sooo.. you want to show it! Or maybe you just want to save something for later. What about making it more vivid with Lottie? : )

I choose this one - https://www.lottiefiles.com/72-favourite-app-icon - it’s beautiful and makes a good interaction with users.

At first, let’s replace app:lottie_rawRes="@raw/motorcycle" with app:lottie_rawRes="@raw/favourite_app_icon". Another step is to remove the looping from animation and auto play, because we don’t want to run it on start. That’s how LottieAnimationView looks now:

  app:lottie_rawRes="@raw/favourite_app_icon" />

When do we want to run it? I’m going to implement it while clicking on  the animation area. It’s handy and intuitive.

In the second step, I’m removing the previous code, which was responsible for stopping the animation after some time.

Now my MainActivity.kt file looks like the one below:

class MainActivity : AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {

    lottieAnimationView.setOnClickListener {
      if (lottieAnimationView.progress == 0f) {
      } else {
        lottieAnimationView.progress = 0f

  private fun startAnimation() {
    val animator = ValueAnimator.ofFloat(0f, 1f).setDuration(500)
    animator.addUpdateListener { valueAnimator ->
      lottieAnimationView.progress = valueAnimator.animatedValue as Float

As you can see, I've added a click listener to our animation view, where I am checking if the progress of animation equals 0 or something else (eg. 100). If it’s a zero (the star is unchecked), I’m running the startAnimation() function. In other case (the star is checked) – it's getting unchecked. That’s the “hard” mechanism of checking and unchecking the star : ) It’s not difficult!

In the startAnimation() method, we are initialising a ValueAnimator object, which changes some value from the starting point to an end, in defined time. In my example, it's defined to run for 600 milliseconds, you can change it as much as you want 🙂 One can also change the starting and the ending point. If you want, you can change values in parentheses in ValueAnimator.ofFloat() function. Let’s assume that your idea is to stop the animation in the middle – easy peasy!

Just write

ValueAnimator.ofFloat(0f, 0.5f)

..and the rest of the previous code.

Finally, we are adding an update listener to the animator, which with every step of changed value updates the value of progress in our lottie animation. The last step is to run start() method on animator and that’s all! You’ve just mastered the ability to like/unlike something in your future app.

Wasn’t it simple? I think working with lottie animations can be fun! There are lots of other features and moments in which it could help us save a bit of our precious time! 🙂

Happy coding!

Author: Bartłomiej Rolek, Android Developer

Published by: admin in blog

July 31, 2018 - No Comments!

Summer Agency Recognized as a Leading B2B Company in Poland by Clutch.co

Striving to be a truly premier tech firm, Summer Agency is comprised of well-trained professionals who can deliver to your company a variety of services, including hardware, software and design, with experience in fields ranging from retail to healthcare. It has become evident that our strong work ethic has caught the eyes of businesses everywhere, as we are now listed
on Clutch’s press release for the leading B2B service providers in Poland!



In order to make the B2B networking process simpler and smoother, Clutch performs research on every company that establishes a partnership with them. A profile for each company is set up on Clutch’s platform to give other businesses the opportunity to access information without having to use their own time and efforts to conduct the same research. Therefore, when businesses are looking for partners with whom they can most productively collaborate on projects, they can turn to Clutch and readily have a list
of relevant firms with all the data they need to make their decisions.


Clutch’s proprietary research methodology gives visibility to firms on the platform when they collect a number of positive reviews. Clutch confirms the quality of our work with the outstanding 5-star rating we maintain in addition to our inclusion into the aforementioned press release. This we owe to our clients, some of whom have taken the time to submit wonderful reviews recounting their time with us.:


Their engagement and effective organization played a crucial role in the project’s success.
- Edward Mężyk, CEO, Datarino sp. z o.o.

We are fully satisfied with the services at this point. The team’s competencies have been great since the start of working, particularly for management, app development, graphic design, and prototyping.
- Laura Czarniecka, Keepylife Strategic Advisor, Leanpassion.

Thanks to the cooperation with Summer Agency, the product development was significantly faster. As a result, we were able to put the product on the market without any major problems.
- Mike Grzes, CTO, Photon Entertainment.


If that isn’t enough, in addition to being recognized on Clutch, Summer Agency was also featured by The Manifest, Clutch’s sister website, on their publication for Top IT Outsourcing Companies in Poland !

We are eager to continue establishing new relationships that, through our combined efforts and resources, will produce results that solve real-world problems and make positive contributions. To find more great reviews of our client experiences, check
out our Summer Agency profile on Clutch!


Published by: admin in blog

July 24, 2018 - No Comments!

5 Reasons Why Your Business Needs a Mobile App

If you run your own business, you should at least think about building a mobile app. The number of mobile users has been steadily increasing and investing in such solution brought benefits to many companies. Apps can reach your target audience in a way your website never will. Think about all those benefits you'll gain if you take one step towards..technology.

Today we'll introduce 5 reasons why a mobile app is suitable for your business. Ready?

#1 Customers will notice 

Where are your customers and how can you reach them? The answer is simple - we all use our smartphones every single day so this can be a perfect place for your business to bloom. It can be even more effective than your company's website. The message behind creating an app is clear - your company is innovative and not afraid of challenges in the modern world. Think about the value that the app can add to clients and if you'll do it right, they'll certainly love it!


The future of mobile is the future of online. It is how people access online content now.
Phil Nickinson, Editor of Android Central


#2 Brand awareness will increase

Creating a proper marketing plan for your business and including an app in the strategy is definitely a great idea. It will make your brand look modern and up-to-date.

When users browse the list of available apps, they can pay attention to your brand and to what it stands for. Mobile apps are a great advertisement as they educate their customers and give them information about your company. BUT you need to provide some really useful features and good UX. Later you can use a mobile app as an ad that your customers will see directly on their phones. Push or in-app notifications can be insanely helpful to create better communication with your customers. (Want to know more about it? The difference between these two can be found HERE)

#3 Customer loyalty and engagement will be better

Keeping your customer engagement high is definitely a tough task. Did you know that the level of engagement mobile apps provide is much higher than provided by a website? You need an instant interaction with customers. By enriching your app with some loyalty programs you can easily share promotions or discounts.

And the amazing part about it? Your users can access all the information 24/7 using just their phones. If you add the messaging feature, they will easily reach you - it's much more convenient for them to text instead of call.

#4 You'll gather useful data and customize your offer

Through the mobile app you can access data and collect necessary information. It’s the best source of knowledge about your customers. The data will give you an insight into clients demographics and you'll simply better understand their demands.

It will help you establish the most appropriate marketing strategy and what's important - you'll be able to adjust your offer to clients needs.

#5 Your revenue will grow!

It will be your new channel to increase sales as your target audience will be much bigger. Your business with an app may be perceived as a global, not a local brand. Mobile apps can work as your medium to expand to other markets and build a wide customer base. 

Examples can be multiplied, let's have a look at Domino's Pizza. After creating a mobile app they saw a 28 % increase in UK online sales! Now more than half of their company's orders are from mobile devices.

Take advantage of your competition and strengthen your position on the market. Offer your clients something unique. Learn how to benefit from technology and use it as a powerful marketing and sales tool.

Need an advice regarding your app idea? Contact us at office@summer.agency! 🙂


Published by: admin in blog
Tags: , ,

July 3, 2018 - No Comments!

Launching a new product – steps and common misconceptions


This is the initial article that summarizes necessary steps that get you from your idea of a product to a finished version. It should comply with regulations and be manufactured with reliability. I will discuss here only the issues connected to engineering problems and I will omit business topics (i.e. business plans, distribution types), as they are a separate group of problems.

Creating a device that functions may seem to be an easy task, but the preparation of the product for production is a different story in the engineering world. In order to go smoothly through the whole design process, one should consider following some guidelines. However, keep in mind that they’re not sacred and can be reshaped, bent or even broken. Before you do that, please just ask yourself if you really, really need to do it.

I will divide the product design process into several subtopics:
1) Concept
2) Working Prototype
3) Final product prototype
4) Certified product

Then I will briefly discuss these points, as each step is a broad topic for several articles.

1. Concept

Let’s start with a nice and popular quote from software engineers:

“Weeks of programming can save hours of planning”

At the concept stage we should not only think about the shape and features of our device, but also do some serious planning and quite a bit of research. Ideally after this stage we should have a more-less detailed roadmap to our holy grail, which of course is a certified product freshly straight out of the factory. The results from this stage should be:

1) initial shape of the device,
2) initial casing documentation,
3) final/desired functional description,
4) regulations requirements,
5) REALISTIC production volume forecast,
6) estimated price target.

The information from all these points forms what we call - the Technical Documentation. Why is it so important to prepare all this information at such an early stage of the project? Why not leave the production and certification problems for later stages?

“But I just want a working prototype fast” – you say.
“We need to show something working to out investors ASAP, preferably next week” – I hear.

Well, if you can sacrifice the time and money for a quick prototype, which will be almost entirely redesigned in the later stages, then it’s fine. Usually, you will lack time or money and in some cases both. The earlier you'll start thinking about late design problems the better you can deal with them. Be aware, that you shouldn’t spend too much time on this stage. If you are caught in the endless loop of concept designs and decided to just scratch that 17 th prototype, then it's a clear signal that something is not right. Analysis paralysis is a pitfall which can affect you and will result in delay in the project.

I want to underline the fifth point regarding volume forecast. This may be quite hard to calculate because at the end you don’t know how your product will be received by the market. This parameter has a large impact on the design process, because it will determine the available technologies that can be used in the production. Furthermore, it defines prices in BoM and the amount of testing that must be performed on each piece.

Quantity tips:

Volume and mass production make low prices, so you should think twice before comparing the price of your 1000 devices to the price of 10 million devices from Singing Sam.

2. Working Prototype

This is the stage at which most of the start-ups think that the design work is done, and it is finally time to start production along with preparing rakes for the money inflow. Unless you’re aiming for <100pcs annual production, you still have a long way to go. The prototype at this stage should prove the functional feasibility of the project and should give clear signs that reaching the final shape of the device is doable.

3. Final product prototype

This stage should end with the product in its final form.

This prototype should not be a subject to any design changes apart from changes resulting from the certification process or from production feedback. Modifications here are costly and require significantly more effort than at earlier stages. Why is it so hard to change things here? Because the designers have to assess the impact on the whole design. Power budgets, thermal budgets, mechanical integrity, PCB layout, etc. must be verified again to ensure proper device operation.

One of the extreme cases that I can recall from my experience was when my colleague had to add a single 0603 resistor onto his PCB. It took him 2 weeks of layout redesign, because the PCB was already so densely packed that he had to move most of the components and traces to make space for the new resistor.

Optimization to BoM, production costs, reliability, testability are main topics for the designers at this stage. These require experience in the field and are main causes why start-up fail or underestimate budget and effort.

As Arthur M. Wellington said:

“An engineer can do for a dollar what any fool can do for two”

Investing work and time at this stage will result in huge savings in the future, simply because the product will be cheaper and you will not get as many service returns.

4. Certified product

When I ask start-ups about where they want to sell their product here's what they say:

Of course, we want to sell it in Europe and USA… and China would be nice, and Japan too… oh and Brazil…”.

Believe it or not, but there are many different markets that have various requirements (often they exclude one other). When you hope that one can design and certify a device that will cover the whole world - it is just wishful thinking.

Let’s take a look at the two most common markets:

  • EU
  • USA

For the EU the product must comply with proper directives. Usually, these will be EMC and LVD, but if you have a radio installed then it will be the RE directive (RED). For the US market FCC and UL are most common certificates.

In general, as a manufacturer, you must show that your device is safe (fire, electric shocks, battery explosion, thermal, mechanical hazards, etc.) and will not disturb nor be influenced by other equipment (radio emission, conductive emission, radio immunity, ESD immunity, etc.).

Depending on the market, you will have to present documentation to respective institutions in order to gain the certificate. Some institutions, like UL, take this a step further and make the tests themselves. Additionally, depending on the product classification, UL will perform cyclic audits not only at the final assembly site, but also at suppliers’ sites.

At the end the costs associated with certification will be covered by the manufacturer (i.e. you). For reference, full FCC and UL certificate for a simple wearable device can cost roughly 20k$-30k$ and can take several months to finish. If you want to cover other markets, then the corresponding institution will also have their own fees. Think over carefully on which markets you wish to operate, because each one requires significant resource investments.

Summary and remarks

There's a certain saying that designers use:

“We design well, fast and cheap. However, you can choose only two options”.

Keep in mind that if you’re pushing one aspect you will have to pay with the other. This short article only indicated and summarized common problems that need to be addressed during the design of any product.

In the following article series I will try to discuss each problem more thoroughly.


Author: Rafał Widórek, PhD


Published by: admin in blog
Tags: ,

June 14, 2018 - No Comments!

Animate common interactions with Angular Animations

Angular offers
@angular/animations package that enables you to write complex, hierarchical transitions in a declarative way. The package is still in the experimental state as of Angular 6, yet it’s totally usable, and it’s not like such fact has stopped us before, is it?

Low-intermediate understanding of Angular is assumed.

The very first animation

Well, there is no good way to describe UI animations with words so below I present to you an editable example. We have buttons that can change the Angular version number very rapidly, modeled after admin dashboard in Angular HQ 🌞.

I wanted to capture few nice things about Animations:

  • It’s simple to define multi-step transitions that look natural, just add more items to an array.
  • You can duly on computed values with *
  • Inserted and removed elements can be animated easily
  • With state(), you can apply inline supporting styles that are active as long as the specified state. They sit next to transitions and are grouped conceptually
  • Framework provides many common state change expressions like :increment

Why should I care?

True, we already have many ways of creating motion on the web and Angular apps support them all. Animations package seems somewhat redundant at first sight, but it exists for a good reason. It provides seamless integration of many animations with themselves and also with the framework. You can of course mix them with other solutions where appropriate.

Previously, to achieve hardware-accelerated motion you could use:

  • CSS transitions that offer a simple way of declaring basic, two-state changes with constant duration. You can make duration variable by binding to style.transition-duration but it feels hacky at best.
  • CSS animations - more complex, you can describe keyframe sequences, declare (possibly infinite) repetitions and so on but you can’t express relations between various elements of the page.
  • requestAnimationFrame that allows you to make imperative animations, and you certainly could use power of RxJS to create neat reactive animations but it will require additional glue to tie everything back into framework in many cases. (Nevertheless it’s a viable, novel solution for certain problems, greatly explained in this talk by Ben Lesh, creator of RxJS)

Angular Animations in a nutshell

  • It’s a bunch of functions that you compose in a certain way (a Domain Specific Language if you prefer).
  • Animations are triggered by changing value bound to @triggerName. They mix well with change detection, component lifecycle, and other framework concepts.
  • Can be externally disabled for whole element subtrees with @.disabled synthetic property. You can for example disable animations for initial page load and later transition between routes.
  • You can pass parameters along with state values and interpolate them inside animation definitions.
  • They offer callbacks named @triggerName.start and @triggerName.done that greatly improve over for example transitionend event.
  • You can save your declarations in separate files and reuse them in many components.


The official guide for animations was, let’s say, not sufficient, during Angular 5 era and before, so reading is discouraging. Animation parameters is one example of poorly documented, yet powerful feature.



There are some things you must ensure when setting up your project with Angular Animations

  • First of all check if @angular/animations package is installed
  • Import BrowserAnimationsModule in your AppModule.
  • Now you can add @-prefixed properties to your templates.


There is also NoopAnimationsModule for when you want to disable animations globally. Without importing either animation module any template with animation-specific symbols will fail to compile.

Wiring everything up

In the Component decorator you can pass an array of animation definitions. Most examples do it inline, but it can become messy very fast and it doesn’t support reusability, so we will go with the good practices from the start.

import { squash } from './squash.animation';

 animations: [squash],

You can see a shortened squash.animation.ts file below. Basic animation usages will start with topmost trigger() containing array of state() and transition() functions that I’ll explain later in the article.

export  const squash = trigger('squash',  [
 state('*', style({
 'text-transform':  'uppercase',
 transition(':decrement',  [
 animate('100ms', style({
 transform:  'scale(0.9, 0.9)',

Finally, you need to bind something to animation property. Value can be anything as long as it makes sense for the animation definition.

export  class AppComponent {
 version =  6;

<p [@squash]="version">...</p>


import {  
  state, transition,  
  style, animate, keyframes,
  group, sequence,
  query, stagger, animateChild,
  animation, useAnimation,  
} from '@angular/animations';

Whoah, it’s very intimidating at first and I probably shouldn’t have frightened you with this complete list of DSL functions, but don’t worry as you’ll only need to grasp 4-5 of them to begin with. I’ve grouped them into related groups for your convenience.


Some time ago there was another way of importing animation building blocks but it was removed as of Angular 6 and deprecated earlier.

One of the pain points of Animations package is that all of the above functions return internal metadata and sadly it won’t tell you much. The same thing is with overly complicated input parameters. That’s where tutorials come into play.

I’ve listed below some simplified definitions of most common functions in Typescript pseudocode. You can actually omit some things, for example treat some single-item arrays as just items, but they needlessly make everything harder to grasp.

trigger(name: string, definitions: Array<state() | transition()>)

It will be the outermost function you’ll use most of the time, at least at the beginning. It defines name of the property you will use to bind your state variable. trigger('example', ...) <=> <div [@example]=value></div> .

definitions is an array of composed state() and transition() functions. Conflicting definitions are evaluated from left to right.

state(name: '*' | string, style: style(), options?)

It applies inline styles when bound value matches name argument. Wildcard * always matches.

transition(stateChangeExpr: string | Function, steps: Array<Step>, options?)

Defines visuals that happen after bound value changes.

stateChangeExpr in it’s simplest form is a string in the form of fromState => toState, but there are some special rules. Keep in mind that state values are converted to strings before comparison.

  • <=> to defines two-way transition.
  • * matches any state.
  • void is a special state that means nonexistence. It’s something different than null (here we go again 🙄…). The elements are in this state before insertion into DOM and after removal.
  • :enter and :leave are quite handy shortcuts for void => * and * => void, respectively. You can pair them nicely with *ngIf and others.
  • :increment and :decrement are nice example of behavior that otherwise would be only possible with custom function. They match numeric changes, I’ve used them in an example at the top of the article.

In contrast to state(), applied styles are removed after animation is done, for example transition(..., [style(...)]) does nothing, because it lasts for 0 frames.

style(css: object)

It defines actual styles. css properties can be written in camelCase or dash-case. You can use value computed from the element with * - it enables for example expanding accordion menu. For example:

  height: '*',
  transform: 'scale(1.3, 1.2)',

  lineHeight: 3,
  'text-transform': 'uppercase',

animate(timings: string | number, styles: style() | keyframes())

First function in this listing that actually creates motion. timings is a number of milliseconds or string in format duration delay easing. Only duration is required. Parts of the format behave like CSS transition counterparts, but the order is different. In the basic scenario you compose animate() with style(), and transition happens from the state existing before animate() to the one specified with style(). You can chain multiple animate()together and mix them with standalone style() to create multi-step transitions. You can omit second argument in the last animate() to transition to styles declared elsewhere, i.e. plain CSS.

keyframes(steps: Array<style()>)

Instead of chaining multiple animate() together you may wish to specify many steps as an array in composed keyframes(). By default they will stretch evenly over duration of animate(), but you can override it with special style property offset taking 0-1 ratio value.

animate('300ms', keyframes([
 style({color: 'indianred', offset: 0}),
 style({color: 'cadetblue', offset: 1}),

It's the same as

animate('300ms', keyframes([
 style({color: 'indianred'}),
 style({color: 'cadetblue'}),


animate('150ms', style({color: 'indianred'})),
animate('150ms', style({color: 'cadetblue'})),

Random yet useful info

Endless animations

That’s a bummer with Angular Animations - there isn’t a built in way of declaring them, but you can emulate it in many ways, for example by declaring universal transition * => * and changing trigger in @triggerName.donehandler. I won’t go into details here but you get the idea.

Order of execution

Animations happen after things that trigger them. For example, when animating :leave state change, ngOnDestroy gets called just before animation starts. Similarly :enter transition happens after ngOnInit and whole first change detection cycle.

Animation parameters

Take a look at the following example. Template-style {{interpolation}} can be used to bind dynamic values, for example mouse coordinates. You may need to provide defaults as params key in - previously omitted - last argument to almost all DSL functions.

someControl: FormControl;

@HostBinding('@triggerName') animation;

handleClick() {
 this.animation = {
 value: 'state',
 params: {  
   offset: this.someControl.value,  

trigger('triggerName`, [
 state('state', style({  
 transform: 'translateX({{offset}}%)',  
 }), {params: {offset: 0}}),



In Angular 5 and before, Animations were fully powered by Web Animations API, whose support is currently spotty. Dynamic features of Angular Animations still rely on this API, but it’s something out of scope for this article. There is a polyfill available if you need it.

That’s all

I hope that this article explained briefly the basics of Angular Animations. There are many more nice bits about this package, unfortunately scattered around many places. I highly encourage you to read API docs. Play with more advanced functions - I haven’t even touched query() and hierarchical animations. Check source code if you wish. Happy hacking.

Tomasz Błachut


Published by: admin in blog
Tags: , ,

May 14, 2018 - No Comments!

Hybrid vs native apps. What suits you best?

Choosing the best approach for an app development can be tough. Your users have to obtain the best UX possible, other way - they'll stop using the app and will probably never return.
In this article we’ll discuss pros and cons of a hybrid and a native app. At the end, you’ll be able to make the right call for your project.

Wander no more.

What is a native and a hybrid app?

Native app
is a software program, developed for use on a particular platform or device. A native app has the ability to use device-specific hardware and software. Such apps provide optimized performance and take advantage of technology (for example GPS).

Hybrid app
combines features of native and Web applications. As they work through Web technologies,  they seem more flexible and easier to update.

Three important issues you MUST consider when choosing between native or hybrid are:

  • the purpose of an app
  • the benefit you’ll gain
  • the budget

Cons and pros of hybrid apps.

Hybrid apps come with such drawbacks as:

  • Poor UX - creating a great UX when building a hybrid app is hard. You often have the one and only chance to make a good impression on the user, and you won't achieve a native-like experience with hybrid. 
  • Lack of native features - be aware that some features offered by Android or iOS won't be available.
  • UX problems and lags - a significant drawback, that can frustrate your user. And probably it will, as hybrid apps can be problematic when it comes to the performance.
  • Lower efficiency - they are considered as slower than native apps.

..and we jump straight into pros!

  • you may save time and money - as you won't need to develop different versions of an app for IoS or Android
  • development process is relatively easy - you won't need a big team of developers working on the project.
  • hybrid app is good for BYOD policy - it works on different platforms and is compatible with various devices.

Native apps cons and pros.

If you're not convinced whether to take your chance with hybrid apps, compare its characteristics with the native ones.

There are few cons that you should keep in mind:

  • they are considered as much expensive
  • the process of development is longer
  • the cost of app maintenance and app updating is also higher for native apps, especially if this app supports more than one mobile platform


But, if you choose to go with them, you can expect also..

..many good stuff coming.


  • native apps are more user-friendly - they provide better user experience and performance.
  • they get approval of the app stores and marketplaces - the users are assured about their safety, so they're more willing to explore the app.
  • iOS and Android features are available - developers are provided with all needed tools therefore the process is much more convenient.
  • internet connection is not always required - it's an important feature considering the fact, that often the user doesn't have an access to the WiFi.

What should you choose?

Take a moment and decide which works best for you. What are your project's resources and objectives?
Every type has its cons and pros, that's why you have to choose individually. If you want to provide the best quality, choosing a native app will be a good decision. As good as a hybrid app looks, it seems convenient and flexible only at the beginning.

Investing in better solutions eventually always brings benefits. Deliver best experiences and build great UX for your users. They will certainly appreciate it!

More detailed information about hybrid and native apps will follow in one of our e-books so stay tuned! 🙂 Got some questions in mind? Drop us a line at office@summer.agency! :).


Published by: admin in blog

April 25, 2018 - No Comments!

Embedded systems development process. Step by step.

Before we begin my friend, with some obvious definitions, let’s start from the other approach.

Developing embed is like climbing a high mountain without trails. You see the summit that is your goal and you have to climb it with your partner, the hardware. Together you must make the way upwards. In well organized teams both partners help each other not because there is some obligation but because the cooperation gives more than hostility. On the way upwards, to obtain a perfect product, hardware is the one that’s slightly less flexible. It’s hardly modified and makes basis for software. Remember,  that without hardware, peripherals software cannot communicate with the outside world. Before starting, a predicted way to the top is pointed out as well as some stop points. For climbers that would be camps, for products that would be milestones. There is much more in common with hiking and developing products. There are unexpected problems like avalanches or hardware faults. Sometimes our estimated way is insufficient or unable to obtain, so there must be found a new one. I’d like to take you, my friend, on this journey with me. I will show you all my tracks and tricks on the way to obtain a perfect product. Ready? If yes, let’s start!

First, we must make some research where to go. Usually there is a meeting handled with a client where a main goal is discussed.

So how to get to a camp?    

After that meeting, there should be carried another one, but now the team involved in developing that product should also be present. It’s an internal meeting with a hardware engineer and at least one embedded software developer. Usually a mobile software developer is also there. On this meeting, the way to the top is discussed. Where to start and how. This is where engineering part begins. We take a map and plan our way. We point the most risky parts of development. Also, we set some milestones usually connected with functionalities and test steps. First stop will be our base and it’s usually the first prototype.


Usually, creating the first electronic version of a product takes few weeks. So does it mean that embedded developers have nothing to do? Wrong! There are evaluation boards with microprocessors. If you have the right one you can start building your software. That boards have connectors to which peripherals can be connected just like in the finished device, so you can start writing your code. It’s like trekking to the first base. You get out from a plane or a bus and then you see...your mountain! So you see your mountain but it’s an inaccessible region. You must take your backpack and ramble to a place where you’ve started your journey. This is the moment when you can learn your microcontroller. Every manufacturer has its own product and support policy. Especially in a low level, so if it’s a new processor, the work must be done from the beginning. 

You have already written some code. Maybe you have set some peripheral drivers and the main loop outline when the first prototype arrives. It’s like setting a camp. You know, you have found the valley at the map and you seek for a good place but there is no such thing around? I known that from the embedded point of view. Useful things are patient and oscilloscope. Remember not to give up and check if a microcontroller do what we desire. Nothing can be left for later because there may be lack of water or because peripheral cannot work in the way we want it to work. This part must be done in the coordination with a hardware designer. If any hardware faults are spotted, they must be replaced in the second iteration.

We reached first base, what’s next?

Attack the summit? No, not yet. Now it’s a moment to explore the slope. Making progresses, testing abilities, writing drivers and the main program. We have all the components and starting from now, we have to make it work perfectly. Functionalities are being laboriously added. It’s like rigging and making camps on our way upward. No one can make this way fast, every step and every rig must be added carefully. If you want the program to work efficiently, it must be well organized. Similar situation is with the trail that must be set reasonably. In other way, it would be dangerous or the program will hang. Continuous tests are extremely useful.
Then you write software tests that continuously check if software has any bugs. They may be prepared by the main product developer but also they should be examine by a software engineer outside the project. 
They should start from the first day of developing.

The test shows lack of bugs and our software is ready..

Is it the end of our journey? No, it’s not! Now is the moment for testers that will use your device and tell you if there’s something to change or which parts are not intuitive. If a tester is not technical, the result will be better.
It's the moment of a summit attack! You are almost there! You’re tired, but you still strive for success. You go back to find that one line that make your code not optimized. It’s the longest part and it can be parallel to clearing stones. When it’s finished, the first release ends. It’s like achieving the goal, standing at the summit. Your work is finished. You made it.

The return.

After all you have done, you have to come down from the summit. How to do it? Usually in the easiest way. For developer, it means providing support after releasing the product: fixing bugs or adding new features. Nevertheless it’s a different story. Maybe next time I will bring it up. Here the research and development ends. Thanks for walking this way with me!

Goodbye my dear friend!

Published by: admin in blog