Apptension

Create Virtual Reality you can touch

SERVICES

• Strategy,
• Concept Design,
• Unity Development, Game Concept Development, MVP Development

Forget costly prototypes for every iteration when designing and developing new spaces! Hyper's goal was to allow users to instantly and accurately preview their design proposals.

Whether testing a new material within a car, or adjusting the interior configuration of a hotel room, you should be able to see and feel results in seconds.

SOLUTIONS

Build Hyper from SDK to a website

TECHNOLOGIES

• Firebase, Unity, OpenVR, Visual Studio App Center

We were approached by Unit9 to function as a tech and creative partner for the project. Hyper required a flawless blend of multiple technologies, like VR headsets, real-time motion tracking of various objects, and allowing for haptic experiences on top of that. Using Unity engine and top VR development technology, we had to create a bridge between the tangible and the virtual.

RESULTS

Industry-changing mixed reality design service

​

Hyper offers a more sustainable design process that eliminates the need to build and rebuild complex prototypes, whilst reducing sign-off times and total spend. We had to overcome some pains with the still nascent VR technology, and research optimal conditions for minimal eye strain. We have also created tools to take advantage of tracking user’s hand movements and tested the solution on scaled-up mock-ups of aircraft interiors.

Overview

Wasteworld is a free Augmented Reality (AR) game designed and developed by Apptension. It teaches children aged 7+ about waste sorting in a playful and engaging way.

Augmented reality technology makes it possible to place the gameplay in users’ rooms, sparking young players' curiosity with an immersive experience.

The challenge: quickly build an AR game that’s engaging for young audiences

When we thought of building an educational, recycling-focused app for children, an AR game was the natural first choice. Young users enjoy mobile content, plus augmented reality would enable us to create an immersive and fun experience.

Apptension’s R&D team took up the challenge of building Wasteworld within a short timeframe (6 weeks) using our own tool for augmented reality apps: App Scaffold.
‍

‍

Wasteworld: Learn how to recycle waste with a mobile game

When we thought of building an educational, recycling-focused app for children, an AR game New Wasteworld players are tasked with an important mission: recycle the waste they see on their screens. Thanks to augmented reality, animated trash bins are placed in users’ rooms, making the game very immersive. The player’s job is to click on different items (banana peels, plastic bottles, boxes) that seem to be lying right on their floor and put them into appropriate containers. As they clean the room, players are rewarded with coins which they can use to add upgrades to their in-game characters. The game promotes good recycling habits and educates kids on different types of waste.

‍

How did we create an AR game in six weeks?

Product Ideation and Strategy — Since we wanted to launch a well-designed and developed game within a short timeframe, we didn’t have time for any mistakes. A thorough product ideation phase helped us to design an appropriate scope for the app.

We’ve gathered the whole Wasteworld team, including people with game development experience, and started discussing the requirements for the game. Each idea then received votes from the team members, based on the effort needed to bring it to life as well as the impact it could have on the finished product. After 3 iterations, we were ready with a roadmap for the next 6 weeks and a list of ideas we could pursue later.
‍

Product Design — Designing augmented reality games is still fairly new territory, so we needed to use the experience of our UX specialists but also cautiously design each element of Wasteworld.

Our priority was to create a very engaging experience, as AR games require physical movement of the player and their undivided attention. At the same time, we wanted the game to be played in a user’s room, so we had to think about the game level and character scaling. We made sure the physical game area and the player’s movement are appropriate for the game’s purpose.

On top of that, we needed to clearly separate the AR part of the game from the non-AR one. Therefore, the player sees a distinct interface until all of the required selections are made. Then, the game guides users to the AR session.
‍

Software Development — Our core tech stack included Unity, AR Foundation, Google Firebase, and App Scaffold—a tool we have created ourselves. It’s an MVC model that helps us to easily create views, menu, etc. It also has some helper code for AR, so we can set up an AR environment, do image tracking, or place objects in the physical world without coding everything from scratch. Thanks to App Scaffold, we were able to get the game up and running so quickly.

We’ve picked Unity as the engine for our game because it enabled us to release the app for both iOS and Android platforms. Of course, we still needed to account for differences these systems have in terms of publishing apps.

Device compatibility was yet another challenge our team faced. On Apple’s side, all the devices starting from iPhone 6s have capabilities to run AR apps. With Android devices, however, AR compatibility is a much more complicated aspect of the project.

In order to maintain the smooth performance of our app on different devices, we had to optimize our 3D models and limit some of the effects. Again, this concern was especially valid for Android devices, where AR libraries consume a good chunk of the available resources.

The product

VIU is a video on demand service, offering the latest TV productions and music videos, that is taking Asian & African markets by storm. So far, it has been launched in 14 countries, including India, Malaysia and UAE.

Vuclip, the company behind VIU, approached us in September 2015 and tasked us with handling the frontend side of this complex service and developing a sleek corporate website for the company.

The Challenge

Vuclip used to be a mobile app, but the ambition was to build a massive video-streaming website that would offer dedicated content for multiple locations. Performance-wise it was a huge challenge that was tackled successfully thanks to clever optimization tricks.

VIU.com is a single page app, which usually proves to be an obstacle for SEO, but we’ve managed to make it crawlable. Multilingual content indexes properly for different locations.

‍

‍

AngularJS development

We chose to build this website using Angular - due to our expertise with this framework we were able to write a lot of functionalities in relatively short time.

We had to make sure that multiple integrations (players, payments, promo systems etc.) were working seamlessly. Due to VIU’s popularity, it has to be integrated with several external parties (e.g. mobile operators) who are providing access to the service as a perk for their clients.

It is a dynamic project, being constantly developed along with user feedback. We are in charge of implementing and maintaining various analytics tool which help Vuclip (and us) understand what’s happening in the app.

The Process

The team behind VIU is located across continents and timezones, spanning from California, through Poland, to Japan. We had to work closely with teams in India and in the USA, which is quite a challenge when it comes to digital production.

The recipe for success in this case was to follow scrum practices, organize regular standups and make the most of the available tools.

As a result we managed to keep the communication flow steady and make this transcontinental cooperation happen.

We’ve automated our workflow and introduced tools that allow us to respond immediately to any issues. VIU's infrastructure is based on Docker containers to ensure smooth deployment.

‍

The Results

Since the initial launch in India back in 2016, VIU has become one of the most popular VOD services with millions of subscribers. Apart from the mobile-first website developed by Apptension, the service is accessible via native apps.

What started as a small startup, has evolved into a multi-team company, backed by PCCW, a Hong Kong-based ICT corporation.

We’re currently working closely with Vuclip’s frontend team based in India. Our main task is to maintain VIU’s performance and deliver new improvements based on customer feedback.

The challenge

The ever-growing popularity of ad blockers might be interpreted as the proof for users’ hatred against ads. The reality of the advertising industry, however, is not as hopeless as it may seem. In fact, when you ask people how they feel about ads, the vast majority will tell you that they generally don’t mind viewing advertisements apart from the ludicrous and obnoxious ones.

Thinking about how to show an ad to the user without insulting their intelligence, Adquesto came up with questvertising. The concept is based on the assumption that gamification of the experience leads to an increase in the engagement and motivation of its participant. Thus, when presented with a paywall that offers a reward in exchange for solving a puzzle, readers are more eager to spare the advertiser a moment of attention and critical thinking.

Questvertising turns out to have numerous advantages for both publishers and advertisers. The former achieve independence from sponsored articles, freedom to create engaging content, and an increase in revenue. For the latter, the most prominent pros include ensuring an in-depth understanding of the ad’s message as well as budget optimization. Additionally, the user benefits too by getting a relatively easy access to valuable material. In the end, it’s a win-win situation for all the parties involved.

How it works

Adquesto is essentially a gamified paywall. From the reader’s perspective, it involves taking the following steps.

Upon entering the website, the user can see a limited part of the article, e.g. the first paragraph. Then, they run into the adquest which comprises of an advert and a comprehension question with three answers. If the user answers correctly, the rest of the article is unblocked. If, on the other hand, the answer is wrong, the user can retake the adquest after 5 seconds. At the bottom of the article, a reminder ad is displayed. When clicked on, it directs the user to the product’s or service’s landing page set for the campaign.

There exists an alternative path that the user can follow as well. Namely, if they are strongly opposed to viewing advertisements, readers can choose to buy a subscription. It ensures free access to a given publisher’s content for a definite period of time.

The process

When beginning our collaboration with Adquesto in March 2017, little did we know that it was the start of an extensive but exciting adventure.

The development stage spanned 34 two-week-long sprints. Throughout that time, a number of changes regarding both the design of the service and the functioning of the ad display algorithm had been introduced. Fortunately, the close cooperation of Apptension’s team and the client resulted in the successful launch of the final product in September 2018. Since then, we’ve been providing Adquesto with periodic maintenance services to ensure the top quality of their system.

‍

The tech

Our goal was to provide Adquesto with a comprehensive solution that would live up to the startup’s expectations. When faced with the challenge of making the service’s components as light, fast, and easily integrated with the publishers’ websites as possible, we decided to develop a set of web applications. Although each of them serves a different purpose, they remain interrelated in operating the questvertising service.

The technology choices we made reflected the requirements of our client. For the backend part of this project, we decided on Python as the language which offers clarity and fast development of the code, as well as Django as its high-grade framework. To ensure the maximum saving of operational costs while retaining the high quality and efficiency of the service, we went for a serverless solution and used AWS Lambda.

For building the frontend, we picked React JS for a couple of reasons. Firstly, it allowed faster and more user-friendly operation of the single-page applications we developed. Secondly, it made it easier for us to manage the behavior and efficiency of the apps. Finally, due to React JS being a popular library, it was easy for the client’s developers to catch up with our solutions as the project progressed.

The Project

Beauty influencers engage millions of Instagram and YouTube users every day, promoting products viewers want to use.

Conversational commerce platforms connecting retailers with content creators may be an innovative solution for selling products showcased by influencers.

SHOPTHAT approached us with an idea to build a prototype of such a platform. With SHOPTHAT, influencers would be able to choose products provided by cosmetics retailers and tag them in their Instagram posts or YouTube videos. For end-users shopping would be quick and easy, as a chatbot would guide them through the buying process.

The Process

From the very beginning we were working under a strict deadline, as SHOPTHAT requirement was to quickly put out an MVP of the product. We were responsible for frontend and backend development of the platform, as well as building a Messenger bot.

We prefer to start our projects with an implementation of Google’s Design Sprint. It helps uncover risks, generate ideas and find the best solutions for the project. Since we were working on a quick prototype here, we’ve conducted the first kick-off session remotely. A call with SHOPTHAT enabled us to prioritize features, establish the communication process and suggest the tech for the prototype.

Once we’ve successfully delivered a prototype, we could follow up with an MVP. This time, we welcomed SHOPTHAT at our office to conduct design thinking workshops and further discuss how the project should be developed.

Meeting the client at our office gave us an even better understanding of the project’s requirements and business objectives.

The Tech

We chose to use Django for bot development, and React + Redux for building influencer and retailer dashboards.

Being aware of time constraints, we used technology that allowed us to quickly start the project and scale it easily over time. Reusing components for two dashboards, helped us save a lot of time, without the need of running two similar projects simultaneously. To kickstart the development of the project, we used our own React boilerplate.

On top of that we used Elasticsearch engine for browsing the products and D3.js library for quicker data rendering. The FLIP technique helped us to speed up animations.

Delivering the Messenger bot, the challenge was to integrate it with Instagram and YouTube APIs, as well as Shopify and Stripe for payments. As we needed to create custom user flows for people coming from different social networks, we used oAuth authorization and an open source library Python Social Auth to create an authentication workflow. As there are still limited resources regarding commerce conversational platforms, we created our own implementation of handlers to manage different queries the bot had to answer.

Healthcare Web App Development

Mental health problems don’t develop overnight. Early symptoms can be identified over a longer period of time. For most of us, however, it is very challenging to spot these subtle changes.

Psyomics is a biotechnology company founded by Prof Sabine Bahn from The University of Cambridge and Dan Cowell. They wanted to create a tool to explore how people could monitor their psychological well being and develop a better awareness and understanding of their own mental health. Psyomics approached us to help them develop the first stage of the mobile app for a trial phase.

Equipped with the psychological know-how provided by the client, we were able to work with Psyomics on the design and interface to deliver Tresilio.

How does it work?

Tresilio is a mobile web app meant for different types of users: people who consider themselves healthy, those who may have early signs of mental health challenges, but are unaware and help-seeking individuals.
Users can use the app to monitor their mental health, develop a better understanding of potential causes of any challenges faced or get personalised advice on the best options to access further help and support.

Users start by building an individual profile and work on different user selected topics each week, such as relationships or work based. In addition Fitbit is used to passively track sleep and activity data. Users that don’t use Fitbit are asked questions about their sleep and activity levels instead. At the end of the week, the users receive a detailed report with recommendations.

All of the reports are aggregated into a personal profile which includes different aspects of health and wellbeing. This, allows the user to get a holistic overview of their well being.

The Process

We believe that a well-run Sprint Zero is an opportunity to uncover risks and dependencies that can otherwise be overlooked. 

This is why we’ve invited Psyomics to come to our Poznań office and take part in a product development workshop. Since the app’s goal and target group had been already defined, we focused on the product itself. We went through the UX and technical requirements. During Sprint Zero we’ve created the general project flow, designed the app’s architecture and chosen the technologies needed to make it happen. On top of that, we’ve generated the API using Apiary.

As a team, we were responsible with Psyomics for designing the interface and developing and testing the app.

The Design

The idea behind Tresilio’s interface design was to make it readable and playful at the same time. The app is based on Google’s material design, so the interface feels easy and familiar. Since Tresilio is an app that relies heavily on surveys, we had to make sure that the questionnaires were engaging and mobile-friendly. As a result, surveys include various vertically-oriented sliders and multiple choice questions, making it easier for the user to provide accurate answers on a narrow screen.

The Tech

The questions and results seen by the user are determined based on complex algorithms. Given the delicate subject matter, everything had to be executed precisely, so that the reports received by the users were accurate.

Security and data protection were critical to ensure user confidentiality were protected at all times. This was evaluated and implemented at every stages of the design, build and testing.

We’ve built a Django-based admin panel which enabled our client to load new questions, change their values and manage the biomarkers’ orders. Celery is used to distribute reports and emails (managed with Mailchimp API).

To handle the frontend part of the project we decided to use React, an open-source JS library. The project is divided into small reusable bits, Material-UI helped us to implement the standard Material Design components. It provided us with the flexibility we required: Tresilio, created as web app for the MVP stage, can be turned into a native mobile app faster.

We had to figure out a way to translate complex medical knowledge into insights that can be understood by people browsing the app. We decided to visualize the data using different kinds of interactive graphs. Each graph is built with D3 and rendered using Canvas. This solution improved the performance of the graphs, since SVG animations would be too slow on Android devices.

Questions for the user are presented in an engaging way, with sleek microinteractions. Tresilio is a mobile-first web app, so, in order to maintain good user experience, we had to implement different views for different mobile devices.

Interactive experience for Bloomberg’s New Economy Forum

Economic power is shifting from Western countries to new economies, experts say. This change opens new markets, but also requires new leaders to influence the course of this economic transition on a global scale. Bloomberg’s New Economy Forum aims to support this change, serving as a community for leaders to promote innovation, collaboration, and inclusiveness.

For NEF’s inaugural event, held in Singapore on November 6-7, 2018, we’ve been tasked with developing software to power video installations and interactive data visualizations provided by Schema.

Scope of work

Schema, a research and design firm that turns information into action, approached us to build software to power data visualizations they’d created for Bloomberg. The scope included seven video installations presented on custom pillars and interactive maps operated on Microsoft Surface Hub’s touch screen.

Our work included synchronizing multiple screens, rendering the maps, and optimizing performance of an application running on the touchscreen to enable user interactions.

Working with Schema, based in Seattle, WA, we had to collaborate across time zones. To keep our client in the loop, we set up biweekly online calls and Jira updates on the progress.

The tech

To render the maps, we used React, Datamaps, and D3 libraries, as well as PIXI.js. The application was optimized for Internet Explorer, since we used Microsoft Surface Hub to present the maps in Singapore.

We also had to implement a pause and play mechanism for the pillars. We decided on using the Octopus software to trigger the videos on all pillars and Millumin2 to display them.

During the event itself, our frontend developer assisted the client in installing the videos on the pillars and supported them on the spot.

The project

Once a futuristic dream, smart domestic appliances are now part of our everyday reality. With a number of new devices being introduced to the market every year, home appliance manufacturers tend to look for ways to stand out from the crowd and make customers aware of their core values. And what better way to send such message than providing consumers with an interactive and fun experience involving the brand?

Bonsaininja asked us to collaborate on a project which would emphasize the uniqueness of their client, Candy Group. As a result, we undertook to deliver software for operating a facial and emotion recognition screen which was showcased at IFA Berlin 2018.

How does it work?

Bonsaininja’s aim was to clearly communicate their client’s mission: providing households with innovative and bespoke solutions. To help the Italian studio achieve this goal, we brought to life an interactive facial recognition booth.

When approaching the brand’s stand, the visitors could interact with the screen in order to determine their personality type and the matching Candy Group’s product. Once they stood in front of the screen, their face was scanned for age, gender, and 6 basic emotions: happiness, sadness, surprise, anger, fear, and disgust. Facial expressions allowed users to make choices: positive ones served to accept and negative ones to decline.

The first action they had to undertake was to make a couple of selfies and choose the perfect one by smiling at the screen. Then, the stand’s visitors were shown a set of pictures and asked to react to each of them. On the basis of their choices, a psychological profile of the user was created and correlated with a given home appliance. Once the process was over, the results was sent to the visitor via email and printed out as a postcard on the spot.

The process

When approaching us, Bonsaininja already had the concept and its design in mind. Our job was to execute it by taking care of frontend and backend development. With only 6 weeks to deliver the final product, we went for Kanban methodology and worked in a release cycle based on a week-long stages. The hard deadline in sight influenced the technology choices that we made as well.

Our involvement in the project continued up to its presentation at the IFA in September 2018. During the trade show, one of our developers assisted the client in the software-related aspects of setting up and managing the performance of the stand. He was also responsible for adjusting the experience to the dynamically changing conditions such as the lighting.

Facial and emotional recognition is an interesting technology in its own right. However, it’s worth mentioning that the experience we created has turned out to be highly entertaining for the audience. In fact, even though IFA 2018 was overflowing with hi-tech, the software we developed has contributed to making Candy Group’s stand one of the hottest spots at the trade show.

‍

The tech

Being aware of time constraints and the need for speeding up the development process, we chose visage|SDK™ as a basis for tracking and analyzing facial features and emotions in real time.

For the frontend part of this project, we decided on React.js which ensured high responsiveness and fast performance of the software. Additionally, using our own React boilerplate allowed us to speed up the process and make sure we meet the hard deadline.

As far as the administration panel was concerned, our choices were Node.js, Strapi, and MongoDB. These solutions enabled us to carry out the project quickly and to take into account our client’s top priorities resulting from the real-time nature of the experience: speed, efficiency, and reliability.

Fuse movie art and modern technology into an augmented reality experience

SERVICES

• UI/UX Design Unity Development

Apptension was approached by The Mill, a VFX and Creative content studio, to deliver an AR mobile app promoting Welcome to Marwen - a new Robert Zemeckis film by Universal. We were to partner with The Mill’s technology team to transport app users into the movie itself.

SOLUTIONS

Advanced AR technology and master storytelling

TECHNOLOGIES

• Unity

Users are introduced to the app and its technology by Zemeckis before the scene plays. Inside the scene, users can meet the characters and explore the environment. They can even snap a photograph from their favorite angle and then share the image on their social platforms as a Marwen digital postcard. Additional activities include character bios, photo galleries and behind- the-scenes content.

RESULTS

A seamless blend

​

Aurelien Simon, Executive Producer of Emerging Technology at The Mill in Los Angeles, comments, “This impressive AR app drew upon numerous skillsets, tools and software solutions. From planning and architecting the app, mapping interactivity and reinterpreting the beautiful CGI assets from the movie for seamless real-time use. Given Robert Zemeckis’ inspiring history of revolutionary VFX innovations at the cinema, this project was the perfect opportunity to showcase a new approach to second screen content within the entertainment industry.

Build a website that tells a life’s story

FULL SCOPE OF WORK

• Web app development.
• Quality Assurance

We were approached by a creative studio we worked with on previous projects (Clubhouse Studio) with a new challenge. A boutique publisher, Hoxton Mini Press, released an amazing collection of books about the history of East London, and in particular, one very interesting human being (can’t say more, no spoilers!). We were to create an immersive, storytelling website, which would be a key cog in the book promotion.

SOLUTIONS

Engage users and immerse them in memories

FULL SCOPE OF WORK

• Web app development,
• Quality Assurance

Human stories are not easy to tell, let alone with a website, of which we see hundreds every day. How to make users stop for a second? How to make them want to dive even deeper into the nooks and crannies of the less flashy London boroughs? Through smart interaction design and using additional input methods, like eye-tracking via the user’s camera, we created something more akin to an RPG game, than a simple website.

SOLUTIONS

Critically acclaimed experience for a critically acclaimed book

FULL SCOPE OF WORK

• Web app development,
• Quality Assurance

As a technical partner, we were responsible for the smooth development and technical aspects of the challenge at hand. The site won numerous awards and moreover, it received positive feedback from major stakeholders. The story is told via a unique, dual perspective of main heroes, and playful interactions helped attract organic visitors without any paid media.

PepTalk is a virtual motivation platform built for teams and individuals around the world. Through the site, it is possible to choose from over 400 real-world experts to deliver live bite-sized sessions on over 40 topics. Whether that’s from a world-class athlete to unite and empower your team or a renowned entrepreneur to give invaluable insight into your business, PepTalk provides the personalized nudges you need to achieve your goals.

Product workshop & software prototyping

PepTalk’s founders approached us in 2019 to discuss their product idea. We had previously collaborated on different projects, so they trusted our technical expertise and project management skills. 

We kicked off the project with a product workshop, something we often recommend to our clients. The goal was to validate the technical feasibility of the client’s early concept for the app.

Thanks to the workshop and prototypes, we were able to approach the software development stage of the project with a clear plan for the product development and a tech toolkit we were confident in.

Product Development

For the launch of PepTalk, we built two platforms, a website with the catalogue of Experts where users could schedule and book their PepTalks and a webapp to host the live calls. Collaborating with PepTalk’s Product Owner and following the principles of agile project management, we were able to continuously deliver tested functionalities and respond to change requests quickly.

Once the early version of the product was ready, the client started gathering feedback from reviewers that was used to keep improving the product and develop new features.

Technical challenges, and how we solved them

One of the priorities for our client was to make sure that PepTalk’s website is indexed in search engines and that the browsing experience is seamless. Our solution for this need was to use Gatsby.js, a React-based framework that helps us build static sites that load quickly and are efficient for search engine crawlers. The site’s smooth performance was further boosted by AWS Cloudfront—a fast content delivery network (CDN) solution. 

Of course, the content visible on PepTalk’s website, e.g., the list of available experts, needs to be regularly updated. We used Contentful as the CMS so that the client can edit the site freely. We also figured out a way to ensure the latest version of the website is rendered as a static page. Using GraphQL, we gather the changes from Contentful and notify AWS via a webhook that a new landing page should be rendered. In a matter of minutes, a new version of the website is served as a static page. 

One of the biggest challenges we had to solve was to manage the process of scheduling PepTalks. We needed to take many variables into account, including the expert’s availability and previous bookings as well as the possibility of the expert and the customer being in different time zones. The PepTalks themselves are operated via Twilio’s WebRTC-powered solution. This choice allowed us to configure different types of video calls (one-to-one, one-to-many) and create a custom interface.

Another feature that was important to our client was managing payments from the customer and expert’s payouts. In order to securely handle different currencies and cross-border transactions, we used Stripe’s payouts capabilities. 

We’ve designed PepTalk’s infrastructure to be scalable, performant, and cost-effective using tools like AWS Fargate, the Serverless framework, and AWS Lambda. Epsagon enables us to keep track of what’s going in different elements of the architecture and monitor potential problems. 

Final dash

Apptension’s team, consisting of frontend and backend developers as well as two QA specialists, ensured that PepTalk is properly tested and prepared for customers to use it. Testing video calls is challenging given the multitude of factors which must be considered, such as different devices, operating systems, and video calls’ features. Ultimately, both us and the client were very happy with the level of quality we were able to deliver.

Hub for tomorrow’s indie brands

FULL SCOPE OF WORK

• Web development, Technical direction, QA & Analytics, Project management

Magic Dusk approached us to build a platform for influencers, on which they could easily build their own brands and merchandise with expert assistance every step of the way. The distinct feel of the beauty industry and a commerce module were to compliment the application.

SOLUTIONS

Rock solid foundation

FULL SCOPE OF WORK

• Shopify, Liquid, ECMAScript 2016 (JavaScript), SCSS, Yarn, Slate

With the UX and Design in hand, and an e-commerce engine chosen, we went on to develop the platform itself. Using top frontend technologies and taking from our experience acquired in similar projects, we completed the platform and its administration panel, CMS and all the functional capabilities. Additionally, social media integration was implemented, and the project was delivered in time.

SOLUTIONS

Uncommon brands experienced differentlyWith Magic Dusk’s platform, budding brands and top influencers can create a natural extension of their current businesses, and reap benefits from working on a well curated and supported platform. From product development, logo design, through manufacturing and commerce - the experience is built on a powerful technical foundation that lets creativity free.

Alternative to expensive headhunting

FULL SCOPE OF WORK

• Product Development
• Product Maintenance
• Quality Assurance

For the largest commercial architectural and design projects, hiring is very challenging and expensive. Middlemen are often paid an equivalent of a one-year salary for the hire, and hiring itself can be flawed and biased.

The client set out to build an alternative - a service that connects top interior, landscape, urban and architectural designers with prospective clients, and overhauls the hiring process to find the right fit more often.

SOLUTIONS

Better candidate - employer communication

TECHNOLOGIES

• Backend (PostgreSQL 9.6, Django 2.0, Python 3.7, Google Kubernetes, Spinnaker, Docker, Nginx, Bjoern), Frontend (React 16.4.0, Redux, ECMAScript 2016 JavaScript, JSX, Webpack, Babel)

Clients in this industry have very specific requirements, which had to be presented in an accessible way. Same goes for the candidate's skills and experiences, which vary greatly. We used a custom-made algorithm to match profiles and allow the client to adjust the matching engine according to their preferences.

In the next step, the anonymized matching system connects candidates and clients, eliminating some early biases like gender and candidate’s appearance. All the data had to be easy to pull out of the system and sent to the business analytics API.

RESULTS

Easy matching, easy hiringWith Tessellate, both candidates and clients have a much clearer picture of the level of their compatibility, and easier access to better candidate data. The hiring process itself is more streamlined and fair, and the cost of hiring is significantly lower than industry standards.

Accountability, made public

FULL SCOPE OF WORK

• Frontend development, Technical direction, Production management, QA

PEFA (run by the European Commission, IMF, World Bank and several governments) is the world’s foremost public finance accountability institution. It issues a sizable report, which is a snapshot of the public financial performance of countries.

The goal was to provide users with state-of-the-art designs, visualizations, interactions, and an overall smooth experience. We joined forces with Schema Design as their technical partner.

FULL SCOPE OF WORK

• React, Redux, ECMAScript 2016 (JavaScript), JSX, styled-components, Webpack, Babel, React VX

Chock-full of data points to be visualized, and with rich interactions, the report website needed a strong technical lead and the best of frontend technologies. Using the designs provided, we worked to let every data point be easily accessible and to make the code light and bug-free.

With the report updated in regular intervals, the infrastructure can be re-used for future editions, if needed.

With more than 200 custom charts and the clean, thoroughly tested website front-end, the client was ready to present their findings to a much broader public, through a more interactive medium. In this way, PEFA was realizing its public mission more effectively.

How to purchase ANYthing within a one-click maneuver

BACKEND TECH

• Python 3.9,
• Django framework,
• AWS ECS containers,
• AWS Lambda worker

blkbx approached us with the idea of creating a simple-checkout application that allows you to sell items through social media, ads, and QR codes. The main premise of such a product was providing the ability to sell items simply by using a blkbx seller account and linking it to the Stripe app. Thus, the payment could be easily generated for virtually any product, while the buyer could purchase it in one click using Apple Pay, Google Pay, or regular card payments. Having the pitch in mind, our dev team rolled up their sleeves and started the work.

Accelerating the sales process for the sake of sellers’ and customers’

We broke the project down into three phases – to define the scope of work, implement + test the app, and fine-tune it for a better user experience. The first phase included thorough planning according to the initial idea and technical requirements. During the second phase, we deployed the first version of the app and started working on the UX improvements. The third stage is currently in progress and is focused mainly on optimizing the application, simplifying the registration system, and Stripe integration for sellers.

The collaboration with blkbx has also given us the perfect opportunity to use our own SaaS Boilerplate product, too. Just to give you a clear idea – our SaaS Boilerplate is an out-of-the-box toolset that will help businesses build impeccable software without tedious work.  

For this project the Saas Boilerplate was used to accelerate the work and optimize the processes associated with configuring and building the blkbk application. We used it to constitute the basis of the server infrastructure and provide the main tools and functionalities used on the client-side, such as: the authentication system, authorization, payments, and email templates generation system.

Now, with the right toolset, blkbx provides sellers with simple and mobile-first payment stacks that allow you to present products with 1-touch checkout.

FRONTEND TECH

• WebApp (React 17.0.1, Styled-components, GraphQL, Redux, Redux-Saga, Relay, Storybook);
  Stack (Gatsby, React 17.0.1, Styled-components, Ramda)

Now blkbx is the mobile commerce experience for everyone, everywhere. Making it effortless to sell products through social media, email, online ads, and in real life via flyers, videos, or billboards. Simply clicking a link or scanning a QR code will launch the blkbx stack with its embedded 1-click payment and order confirmation. Using blkbx's dashboard, vendors can set goals, track key metrics or inventory, and create assets for their next ads in a single interface. How cool is that?
 

Combining the presented backend with the fresh-new frontend and design

The company’s main request for Apptension was development of the frontend part of a new and improved version for their existing system for tracking the growth, cropping, and storage of their product. The main purpose of such an app was to be used by the employees as an internal tracking tool.

The client expected our team to develop in Vue.js v2, which was something completely new for us in comparison with the usual React that we employ for most frontend projects. This meant that we needed to quickly bring our Vue.js v2 skills up to the same level that we would provide if the project was created in React.

The client has also entrusted us with creating the design for the system and, from their side, was involved in refining and reviewing all parts of the design.

SERVICES

• UX/UI Design
• Frontend development
• Quality assurance
• App development

We were presented with a fully-prepared backend with great documentation from the client’s side and the working ADFS login logic. The front end was a clean slate and we started creating the setup that makes us feel confident with the code we create - tests and storybooks. For Vue.js v2, we used similar packages to what we would normally choose when working with React.

We developed a complicated system consisting of multiple pages, most of which could be grouped into forms for creating and updating objects, lists of those objects, and also detailed pages for each of them.

The design that Apptension specialists provided was based on the UI system Buefy, which was previously used in the client’s project and proved to be an easy- and comfortable-to-use basic component source.

We decided to introduce E2E tests right from the start of the QA-ing process. Cypress is our usual tool of choice, however, it wasn’t compatible with the given ADFS authentication provider, so we needed to think of a workaround. As a result, our devs came up with combining Puppeteer and Chromium to obtain new cookies and check their validity regularly. The other issue to resolve was matching the permissions on the back end and front end. Namely, from our side, we had to make sure that the frontend side reacts properly and displays only those options according to what comes from the back end. With the help of the same Cypress, our dev team managed to mock up the permission layout and, thus, properly test the completed front end.

FULL SCOPE OF WORK

• Frontend development: Vue.js v2, Vuex, Vue Router, Buefy, scss, jest, vue testing library, storybook
• QA: Cypress
• Design: Figma

Now, the company (that would prefer to stay anonymous) can not only enjoy the practical benefits, but also a pleasant interface that puts minimum pressure on the storage capability. Regardless of the client’s desire to work on the backend heavy application, Apptension’s proposed solution seems to work perfectly in tandem with a piece of code in a relatively unpopular language. Now, this cannabis producer can effectively control the process of redefining the purposes of their product even easier. 

A complex android app to reduce anxiety before the tedious home management process

We’ve got a request with an idea of a new startup for the South African market - Home+ App. The initiative included a complex Android application that would consist of 3 main submodules and a provider-homeowner marketplace for managing household services. Basically, users should be able to coordinate the service providers in their area, pre-pay for the electricity, and get a dedicated security team for their homes.

FRONTEND STACK

• React 
• React Native

The product was released in several phases, with MVP being the home maintenance service. First of all, we released the closed beta version of the online marketplace to properly test it out. The beta version and the initial open MVP took 3 months of preparation before launching to a selected group of customers. After 1.5 months, they were followed by the electricity purchase feature in the next major version update. Some of the additional features included the ability to purchase prepaid electricity tokens, and trigger an emergency security service response directly to the home.

The mobile app was developed in React Native with Python microservices, Admin Panel web app - using React. The cloud infrastructure is set up on AWS. 

BACKEND STACK

• Python
• Microservices

Currently, the app is only released to the public on the Google Play Store. However, in the very first month after release, it already got 15k of downloads. Thousands of users had relieved the stress of ordering and paying for a variety of services - now gardening, housework, prepaid electricity, and security management are a few clicks away. The company also plans to develop the application further, expanding the feature-set. 

Since its launch, LESS_ has become highly popular among users reaching 400k downloads. Valued by its users and investors, it became one of the top 3 shopping apps in Poland and secured a second round of investment.

The app has become a tool for change towards less stuff and less waste. It allows users to keep upgrading their style while simultaneously supporting a sustainable lifestyle and reducing textile waste.

The buying and selling process taking place in LESS_ is pretty straightforward. It all begins with a seller taking quality pictures of clothes or accessories to whom they wish to give a new life as well as choosing the type of offer they’re interested in: auction or buy now. Once a buyer expresses interest in purchasing a given item, the two get in touch to discuss payment and shipping method.

Flairs.ai is a team insights platform for Technical Leaders: a SaaS and On-Premise platform that connects with team tools and delivers interactive insights for technical leaders about teams' trends.

The platform helps to explore trending libraries, frameworks, and technologies in your organization, discover automatically technical skills of your team, and see the technical perspective of all projects and teams' involved.

This immersive experience has helped young Canadians to realize there are 101 better things to do than driving under the influence of drugs. The experience was launched as part of a national “Don’t drive high” campaign organized by Tweed, Uber & MADD Canada a week before the legalization of cannabis in Canada.

We were tasked with creating a website where users could find a list of 101 things to do instead of driving high, including a game where they can pop some bubbles, and of course educational content. It also had to offer a limited amount of Uber promo codes which users could redeem upon visiting the site.

Community-driven microsite for the global launch of Roma

The Mill, a VFX and Creative Content studio, approached us to deliver a microsite promoting Roma, a new film from Alfonso Cuarón. 

Roma follows Cleo (Yalitza Aparicio), a young domestic worker for a family in the middle-class neighborhood of Roma in Mexico City. Delivering an artful love letter to the women who raised him, Cuarón draws on his own childhood to create a vivid and emotional portrait of domestic strife and social hierarchy amidst political turmoil of the 1970s.

 

Teamdeck is our first major in-house product. The tool combines resource scheduling, time tracking and leave management to help companies manage their teams effectively. Typically, Teamdeck is used by creative agencies, software houses, finance & product teams that manage multiple projects at the same time. Being a software house ourselves, we understand the challenges that these companies are facing and had a solid idea of how to solve them.

Services
UX / UI / Branding / Product Development / Frontend Development / Backend Development / Quality Assurance

Tech
AngularJS + D3 + Pusher + Yii2