UI/UX

We worked closely with our client to develop wireframes for each screen and use case, as well as the entire navigation flow. After revisions at this top level, we moved on to design, where we polished the original wireframes to get the final look.

The result was a fun, light-hearted, cartoony style that matched the goals of the app.

Once design was ready we had a solid foundation to begin with architecture and development of the app and its backend 💪

Karma Pea Mobile Screenshots

Custom Back-end

PHP Logo

PHP as always has a huge market share and is used commonly in the web. It’s great because it is flexible. It doesn’t require too much rituals to get working on it, and it is easy to build with.

With Karma Pea, we built custom RESTful web services for the Karma Pea app to consume, using the PHP Slim framework to handle routing.

Working with Slim was a great experience. It made CRUD routing dead simple and worked well with our object oriented architecture.

For authentication, we built a custom token-based auth flow. We handled image processing using the Imagemagick library, which converts images to thumbnails and optimizes them as needed, as well as auto-orienting them so the app can display them correctly. Once the images are ready they are stored in an Amazon S3 storage.

The back-end interacts with the https://aws.amazon.com/sns/ service, for getting our push notifications out to all users. SNS makes it simple to manage both iOS and Android devices, and along with some custom code, we were able to manage all devices and perform custom operations on them as needed.

App Front-end

The app is built with one of our all-time favorite tools, Adobe AIR.

The great thing about Adobe AIR, is that it is thoroughly battle-tested, it is cross-platform (one code base that works anywhere), and it is fun to develop for.

Sadly, Adobe AIR has gotten less popular than some of the other cool tech we use , like React Native, but we feel there is still a place for it in the market, specially on games, or animated physics apps like Karma Pea 😁

DHO Studio Screenshots

One Tap Gym Flow

The Goals

The primary goal with One Tap Gym was to create an MVP (minimum viable product) for the Google Play Store that stood out from other apps by giving users access to workout content from YouTube in an easy to use manner.

With an oversaturated category such as workout apps, another goal was to provide something unique to the market, that hasn’t been done before.

UI/UX

Our plan was to target users that want the opposite of the typical workout app, and create a more “opinionated” app, that takes out all the work that comes with lining up a workout video, determining what body part the user should workout that day, and for those who like using YouTube content, having to go through the standard YouTube app, which can become a big hassle when searching for workouts and affects user engagement.

The result was a workout app that is inviting, easy to pick up and use, focusing on bringing workouts to the user quickly to keep them engaged, not only within the app, but also in their workout goals.

We favored descriptive buttons and icons over instructions, as well as inspirational content that reminds the user that they can accomplish their own life goals.

We also removed the barriers to get to a workout video as much as possible: One button tap takes you to a workout they can begin right away.

Technology

The plan for the technology behind One Tap Gym revolved around the idea of creating an app that was very easy to maintain and adjust as users discover it and provide feedback.

It made sense to go with a server-less approach where most of the business logic sits on the front-end, and only minimal work was necessary on the back-end. There is only a thin layer between the app and the YouTube API which also does a lot of the heavy lifting for us.

This approach keeps the app lean and scalable, and easy to update 🙂

AWS Lambda and API Gateway

We utilized AWS’s awesome Lambda (cloud functions) service to create a very simple and straight-forward way to query the YouTube API.

This thin layer allowed us to transform the results in a simpler format that the app could understand. It also gave us a global space outside of the app, for adding additional customizations to our data and logic as needed.

We used the AWS API Gateway to build a simple RESTful service that bridges the app with the Lambda function. We provided development and production endpoints to allow us to develop new features in the future without affecting the production endpoint.

YouTube API

YouTube

The YouTube API is utilized to bring queries formed by the app to be searched in YouTube. Our back-end is in charge of communicating with YouTube, and returning results to the app.

Cross Platform Mobile App

Adobe AIR

Adobe AIR was our weapon of choice for this project. As always it is a great development experience, and the shareable codebase always wins for us.

We used the Starling framework which utilizes device GPU for very fast performance. The UI was built with Feathers, a UI library for Starling. The screens were laid out pretty quickly using an HMTL-like format called MXML, which Feathers supports.

The app is careful to not generate too many unnecessary calls to our API by caching queries locally. These queries expire after a short time and allows the app to make fresh API calls then.

devstimate-screenshot

react-native

Our front-end uses React Native, which we are big fans of due to the speed of development, hot-reloading, and of course its cross-platform approach which means we work a lot less to bring the app to our target platforms.

The app uses the React Native Firebase library to bring native Firebase features into React Native.

We currently are using anonymous login into firebase, realtime database, and remote config features. As we listen to our users and continue to develop we will continue to implement other Firebase features.

You can say the heart of the app is Redux which handles the global app state, and React Redux Firebase helps us glue Firebase and Redux very seamlessly into our screens.

Other notable libraries we use in this project:

devstimate screen designs

Serverless Architecture

Built With Firebase

Firebase is great because it handles so much of the tedious back-end work.

We fully rely on the realtime database, without any additional code logic on the server to get the user to manage their data. This has saved a huge amount of hours and allowed us to bring a prototype version to testers quickly.

Firebase’s Remote Config feature lets us update our estimate templates easily through the Firebase console, without having to push out new app versions.

We will be adding more Firebase features down the road and continue on the great groundwork we have laid so far 🔥🔥🔥