3. 01 ABOUT JAKT
WHO WE ARE
3
JAKT is a leading design and development consultancy that
uses technology to solve problems for entrepreneurs and
corporations. Our team’s diverse background and
complementary skill-set allows us to take a unique approach in
combining business and technical expertise. We collaborate with
our clients on their goals and objectives, and adopt the role of
Interim CTO for the duration of the engagement. We love to
push the envelope by selecting only the most promising and
challenging technical problems to address.
4. 01 ABOUT JAKT
LEADERSHIP TEAM
4
✤ Anthony Tumbiolo
Anthony has a passion for building technology-enabled businesses. His technical
background is complemented by his training in strategy and corporate development
from NYU’s Stern School of Business.
✤ Joshua Kehn
Josh is a life-long software engineer with expansive experience designing
durable and highly scalable software solutions for both consumer facing and
enterprise applications. He is best known for creating “The Workplace.”
5. 01 ABOUT JAKT
TECHNOLOGY WE USE
5
✤ Design
Photoshop, Illustrator, InDesign
✤ Mobile Development
iOS, Android, PhoneGap, Cocos2d-iPhone, Cocos2d-x, Unity
✤ Web Development (client side)
HTML, CSS, LESS, SASS, JavaScript, jQuery, d3.js, AngularJS
✤ Web Development (server side)
Python, Node.js, Ruby, PHP, Groovy
✤ Frameworks
Django, Rails, web.py, Pylons, Grails, Express
✤ Databases
PostgreSQL, MySQL, MongoDB, Redis
✤ Virtual Reality
Oculus
6. 01 ABOUT JAKT
SOME OF OUR CLIENTS
6
✤ Entrepreneurs & Startups
We work with entrepreneurs to build their first product and prototypes. We will help define the product
feature set and design a workable solution targeting specific early-stage goals.
✤ Funded Startups
Funded startups come to us for a variety of services and implementations. Often, these companies have
already validated demand for their products and require an auxiliary development team to enhance their
current platform, provide strategic advice or assist with User Experience and User Interface design.
✤ Large Companies
We have the technical expertise to help corporations solve a variety of technically challenging problems or
augment their existing development efforts.
7. 01 ABOUT JAKT
SOME OF OUR CLIENTS
7
We’ve worked with companies in…
10. RCHERY
THE PROJECT
10
Rchery is a mobile advertising platform designed to
reward users with real money when Brands send them
targeted advertisements to their mobile device. Rchery
approached us to build the entire platform from scratch.
There were three major components: an API, a web
application and an Android application.
11. RCHERY
OUR APPROACH
✤ Android First
11
We decided to go Android first because we
wanted to test this in Sweden and the majority
of users have Android there. We also wanted
to take over the home screen to serve ads
and this isn’t possible on iOS right now.
✤ Separation of Concerns
We split the application into it's major
respective areas. The front-end was built in
Angular, the back-end API was built with
Django and the Android application consumes
API.
✤ Why Django?
Solid REST API development. Backed with
years of development sanity. Database
transactions, authentication, timezone
support, security, all baked-in from the start.
✤ Why Angular?
High-performance front-end with enough
flexibility to rapidly develop as the API
matures. Simplified HTML structure means
more functionality and less grind per
developer hour.
Angular Android
Django
12. RCHERY
USER EXPERIENCE
✤ Android
Developing the right user experience for Android required a
month long dive into the platform. Everyone on the team
added an Android phone to their every day carry. This
gained valuable perspective into how applications function
aesthetically and offered insight into how the presentation
layer could be refined for a pleasing seamless experience.
The main thought was the app should get out of your way as
fast as possible allowing you to be rewarded and move on
with your life.
✤ Dashboard
12
The Marketeer is the focal point of the dashboard.
Immediate access to overall statistics, custom campaign
targeting with population estimates, secure campaign
approval and launching, and deep insight into the
workings of a campaign came together in a flexible and
powerful way with the dashboard experience. Because
it's all driven on Angular the entire site can be served
with a few assets and one JavaScript file out of an S3
bucket. Immediate load time. Immediate results.
Android
Dashboard
13. RCHERY
WEB DEVELOPMENT
✤ Rapid API Development
The API was rapidly built out with a full collection of data models.
Permissions were overlaid on top of that to ensure fine-grained
control over each aspect of the system. There are four different
major user levels which control a majority of access. Specific
brand and campaign controls are implemented as separate
permissions.
✤ Front-end Development
Rapid prototyping was done to understand what works best from a
users point of view. This also started simulating load on the API
through which various updates were made to ensure consistent
performance.
✤ Refinement & Testing
Once the pieces were in place a staging environment was
configured with over 40,000 campaigns actively running. This was
used to simulate real load on the system and identify points of
failure under high capacity. Each point was addressed and either
permanently fixed or identified for monitoring.
13
Campaign Results
14. RCHERY
ANDROID DEVELOPMENT
✤ Prototyping Animations
A key requirement of the Android application was a
seamless promotion serving layer of interaction. We
started by prototyping the full-screen cover that displays
the promotion after the unlock action
(USER_PRESENT) is received by the app. By
prototyping this before developing the full user
application we were able to make the promotion serve
incredibly smooth and seamless for a user.
✤ UI Development
Once the promotion was prototyped the UI skin was
developed for the promotional content, wallet, signup,
and preferences screens. Several screens such as
FAQ, Terms of Service, and Privacy were added as
web views to allow Rchery to later update any of those
without pushing a new version of the app.
✤ API Integration
The polished UI was then coupled with the API.
Remaining kinks around payload information, asset
resizing, and sending users actions were worked out.
Because the UI had been developed separately it was
simple to isolate and solve issues.
14
15. RCHERY
RESULTS
15
✤ Swedish Trial Success
In July a Swedish trial with approximately 300 users was launched. The focus of the trial was
proving the system could function in the wild under a small closed group of beta users. The
application performed remarkably, serving advertisements and collecting statistics with ease.
✤ Expansion + Launching with Major Brands
Based on feedback we are now polishing the Android app and web dashboard before we
do a full rollout in Sweden. This is scheduled for early November 2014 and will include
large brands such as H&M and Scandinavian airlines. Upon successful expansion to
Sweden we will then bring the Rchery platform to the US market.
17. IDEO
THE PROJECT
17
IDEO approached us with a very interesting project.
They had just worked with the San Francisco Unified
School District to redesign its food system and wanted
to create a unique and interactive web case study to
display their work. We knew we had to do something
really innovative with this to make it really stand out
and get the attention it deserved.
18. IDEO
OUR APPROACH
18
✤ Rapid Iteration
The timeline for this project was very tight. In order to meet the deadlines for launch we took the initial
design and developed a common design language that would work across all sections. With that in hand
we broke the case study into sections and handed those off to individual developers.
✤ Section-based Development
Each section had a new twist: sliding horizontal panorama images with callouts, animated falling fruit,
interactive audio for each student. These major themes needed to blend nicely together but also
needed to be built rapidly so that the cohesion on the entire site could be visualized by the team.
Working on each section independently allowed the vision to come together and later any rough
transitions were handled with high attention to detail.
✤ Audio Visualization
The second-hardest technical component was also one of the smallest. The audio visualizer up in the
navigation bar indicated when audio was playing and offered convenient mute controls. We used a
small canvas element in order to draw and animate each visualizer bar according to whether or not
audio was playing. Next, event listeners were attached to offer mute functionality based on the audio
controller.
✤ Panoramic Images
There are three grade levels represented and each had it's own sliding panoramic image. While the
site was not designed for mobile—not a fully responsive site—it had to work across varying desktop
sizes; a 27" monitor had to handle the site just as well as an 11" Macbook Air. We implemented
dynamic image resizing and on-page performance tuning. This allowed each panoramic image to
slide freely and smoothly during the entire scroll.
19. IDEO
CUTTING EDGE WEB DEVELOPMENT
19
✤ Heading 1
Description
✤ Heading 2
Description
Video Walkthrough - CLICK ME!!
20. IDEO
RESULTS
20
✤ A case study unlike any other
We are extremely proud of the site we built. The features we included were very difficult to
build and came together to create a great story for the viewer.
✤ Press
Our work was featured in articles written about the project, such as this article in Wired:
http://www.wired.com/2014/04/how-to-reinvent-the-school-lunch-and-get-kids-to-eat-better/
22. WALL MURAL
THE PROJECT
22
Real Hit Media approached us to create an iPad and
iPhone application called Wall Mural. Currently if you
want to view how an ad would look on a billboard, or
how a painting will look in your home, you either need
to imagine it or Photoshop it. We built technology to do
this - something that did not exist until we built it.
23. WALL MURAL
OUR APPROACH
23
✤ Solve two superlative technical challenges first
Before we could build the full iPad and iPhone applications we had to solve two extremely difficult
technical challenges: advanced photo stitching and image perspective transformations. We wanted
to solve these first because the entire app would not work without us overcoming these hurdles.
✤ Create advanced photo stitching technology
The app needed to allow the user to take wide field of view photographs so that they could
capture entire surfaces from constrained positions, for example the inside of a closed room. For
that we needed to include linear panoramic capabilities - linear projections, rather than the
commonly seen spherical projections, were needed to preserve straight lines in the composite
image.
✤ Perfect image perspective transformations
The app needed to allow the user to project images onto surfaces in perspective, thus it had to
quickly handle 3D perspective transformations between the source image and the destination
surface.
24. WALL MURAL
USER EXPERIENCE
✤ iPad First
The iPad was a primary consideration since it displayed the
overlay on a wall so well. We focused our user experience
design on the iPad version keeping in mind that this would
become a universal application and would handle the iPhone
later.
✤ Measure Twice, Cut Once
One key to the entire mural process was having a user
accurately describe where the corners were. In order for this
to happen we had to make it incredibly easy for them to
pinpoint exactly where on the picture they were. We
developed a ring concept where the corner selector can be
repositioned by touching any part of the outside ring. Now a
user can see where the selection is being made while
adjusting it.
✤ iPhone Compatibility
24
After completing the layout for the iPad version we shrunk
down all the storyboards and started fitting into the
iPhone's smaller dimensions. Because we had kept the
universal app concept in mind at the beginning of
development we only took two weeks to fully fit the
iPhone version. Starting with the right requirements and
keeping those in mind saved time and effort with the
iPhone version.
iOS UX/UI
25. WALL MURAL
IPAD + IPHONE DEVELOPMENT
✤ Take a Picture
We developed the standard single-image take but
also added a multi-shot photo stitching mode which
allows the user to capture surfaces that are larger
than can fit in a single image. This way the entire
surface can be covered without imposing limitations
on a user.
✤ Preview Your Mural
25
Murals are designed for flat surfaces, but skew
gets in the way of a correct preview. Take a
picture at any angle, highlight the corners, and
we'll instantly correct for skew allowing you to
preview murals. We connect to Bigstock, Getty
Images, and our own Wall Stock image libraries
to provide the user with many vector-based mural
options.
✤ Purchase
Once a mural is found we prompt the user for
exact dimensions of the surface. Then we
calculate the price per square foot and offer a
one-step checkout process to have their mural
delivered. Options include peel-and-stick or glue-based
backing options as well as installation
services.
Take a Picture
Preview Your Mural
Purchase
26. WALL MURAL
RESULTS
26
✤ Created two new technologies
1. Vertical plus horizontal photo stitching. Right now the native iOS camera allows for horizontal
panoramas. We created technology that enables both horizontal and vertical photo-stitching.
2. Recreated Photoshop in a mobile app. Something that would previously take hours now can be
done in an instant from your mobile device.
✤ Amazing iPad and iPhone applications
The result of creating these two new technologies was applications that allow the user to project and
manipulate images in real time onto a photo of any rectangular surface, even if that rectangular
surface does not have a single vantage point from which to be captured. We are starting with allowing
users to buy wall murals for their home but the applications for this technology are numerous.
✤ Launching publicly in November
We are in beta testing right now. Both the iPad and iPhone versions of the app should be available in
November 2014.
28. STYLE COALITION
THE PROJECT
28
StyleCoalition is a platform that allows brands to create
and track marketing campaigns with some of the
biggest influencers in fashion and beauty online. They
came to us with a very basic site that was not scalable
and did not provide measurable analytics to brands.
We were approached to completely rebuild the
application from scratch, ensure the platform could
support their growth, and expand drastically on the
existing feature set.
29. STYLE COALITION
OUR APPROACH
29
✤ Custom Design
The old StyleCoalition web application had an aged design. We gave it a complete overhaul moving
the site into the 21st century. Dominated by the purple tunes it is gracefully responsive to some
mobile devices, specifically tablets.
✤ Powered by Django
We used Django's expressive production-ready toolset to quickly produce an initial version and
allow Influencers to connect all their social accounts. Then we progressively added new features
such as Influencer Lists, Content Portals, Analytics dashboards, and redesigned search and
personal profiles.
✤ Humongous storage to power custom analytics platform
In order to fetch, retain and analyze all the influencer data we use MongoDB and Redis to offer
fast document-style storage from individual social networks. Because the response documents
for each network is different, Mongo's schema-less design performed beautifully. Redis offers
fast in-memory caching of analytics and site search numbers.
30. STYLE COALITION
WEB DEVELOPMENT
✤ Flexible Content Ingestion
Our system supports content ingestion from a number of social
accounts in addition to personal RSS/Atom feeds. This flexibility
includes pulling titles, permanent links, contextual information such
as favorites, likes, comments, and image data.
✤ Zero Friction
30
Influencers on the platform need to do nothing different. They
operate completely as usual tweeting, blogging, and pinning with
whatever tools they desire. By integrating directly with their social
account we bend over backwards to support any post type on the
service. Zero friction means they don't need to do anything special
to be part of SCX.
✤ Enterprise Grade
The StyleCoalition platform is built for maximum flexibility and
connectivity. Additional accounts can readily be added. All the
campaign information, account metrics over time, and platform
information is recorded for historical analysis. Wonder how many
friends you had on November 12th 2013? We can tell you that.
Content Portal
Campaign Analytics
31. STYLE COALITION
RESULTS
31
✤ Platform growth
StyleCoalition is an exclusive platform. Before working with us, the site could only handle 50 users. After
working with us, StyleCoalition has grown to 370 approved influencers. This may not seem like a lot, but
that is just because StyleCoalition is exclusive and has limited this number. What’s really impressive is
that among these 370 influencers they represent 39.1 million monthly unique visitors to their blogs, 86.1
million page views, and 73.7 million social followers. That is some serious fire power.
✤ Automated systems
We automated a large majority of the work StyleCoalition employees had to do. We studied their
manual processes and automated whatever we could so that the team could focus on growing the
business and not tedious tasks
✤ Advanced analytics and reports
We created an advanced analytics platform that captures thousands of data points from 8+ sources
(e.g., Facebook, Twitter, etc) for each campaign and reports how each influencer performed.
33. LIBRARY FOR ALL
THE PROJECT
33
Library for All is a non-profit organization who’s mission
is to unlock knowledge to those without access to
books in developing countries. To do this they aimed to
create an ebook reading and distribution platform, a
much cheaper and scalable alternative than physical
libraries. They initially used a third-party app with
localized ebooks for a pilot program in Haiti. This
application validated their concept and worked for the
pilot; however, it was subpar in terms of extensibility.
We were tasked with creating a custom version for
Library for All so that they were not restricted by a third-party
app and could expand quicker and however they
wanted.
34. LIBRARY FOR ALL
OUR APPROACH
34
✤ No Internet? We’ll work around this.
Constant internet access is a luxury we take for granted. The system we were building was designed to
be deployed in a local environment with little or no open internet communications. This meant building
solid syncing platforms both from the local tier, inter-device, and across the public web.
✤ Your Content, Delivered
Books are a scarce commodity, but power and access is as well. Because the local server couldn't be
school-wide we posited the idea of a library room. Students come in, pair their device with the hub,
and browse and download books. Once the books are downloaded they can be read anywhere or
shared with other students cross-device.
✤ Mustang Performance in a Civic
The devices we ran the application on are a far cry from even moderate hardware such as a Nexus 5.
These devices ran old versions of Android with lack-luster browsers. Lots of our time went into
identifying and solving performance issues. We also recommended including a statically-linked
browser with the application. This increased the overall application size but also provided a much
needed performance boost. By boosting performance we also increased battery life allowing students
to read longer into the night.
35. LIBRARY FOR ALL
DEVELOPMENT
✤ Built for Sync
CouchDB powers all the database design. It's master-master sync topology
allowed us to sync between devices, device to the local sync server, and the
local sync server to the open internet.
✤ Books Anywhere
With device-device syncing solved we opened up all sorts of possibilities
where students can share books with each other. If someone doesn't have a
particular book they can always head over to the library to sync new books.
The catalog of books is stored on the device so new titles can be queued up
to download as soon as the student enters the library.
✤ Today, Tomorrow, and the Future
The open internet in our system diagram can be expanded to allow direct
device connections. Users with any open internet access can use the Library
for All reader application to reach out and read content as it's made
available. Our open-source design means no vendor lock-in or restrictions on
expanding the platform.
35
Sync Diagram
36. LIBRARY FOR ALL
RESULTS
36
✤ 0 to working prototype in less than 3 weeks
With a tight timeframe to launch, we were able to go from nothing to a full
working prototype in less than 3 weeks
✤ We go to Haiti and test the app!
We actually went to Haiti to install the app on devices in Haiti and watch
students use not only the application—but also a tablet—for the first
time. This was crucial because we learned of technical limitations that
you could only learn by using the app while in Haiti. Based on our
learnings we were able to improve the app before continuing to roll it out.
✤ New countries being added!
Our goal was to build the foundation for a platform that could be
expanded to all developing countries. Since the initial deployment in
Haiti the app has also been deployed in Congo. This continues to be an
amazing experience for everyone on the team because we built
technology that is really changing the world.
38. SQUAD UP
THE PROJECT
38
SquadUp is an event ticketing platform. After building
their alpha product, they engaged us to redesign and
rebuild the front-end of their web platform and build
their iPhone application.
39. SQUAD UP
OUR APPROACH
39
✤ Understand the business & goals
To redesign an existing product, you must understand the problem the product is trying to solve. After
working with SquadUp’s founders, understanding their business and their vision, we were able to
effectively redesign their web platform.
✤ Implement unique features
When building the iPhone application we knew we couldn't just copy what already existed in the event
ticketing space. So we decided to push the envelope a bit and added in both chat and the ability to
create events from the app. At the time, this was the only event ticketing app that allowed this.
40. 40
• Marketing Page
The homepage acts as a scrolling
marketing page to describe the
apps features
• Encourage Event Creation
Event creation was the #1 business
goal when we did the redesign so
we made sure users saw it right
when they landed on the homepage
• Event Pages
Each event gets it’s own unique
page to present event details and a
chat / social gallery
• Easily Buy Tickets
Our checkout flow is very simple
and easy to use
SQUAD UP
WEB DESIGN + DEVELOPMENT
Marketing Page
Encourage Event Creation
Event Pages
Easily Buy Tickets
41. SQUAD UP
IPHONE APPLICATION
41
Discover Events Check-in at the event
Create Events
Buy Tickets
Event Pages
42. SQUAD UP
RESULTS
42
✤ User base growth
Within months of the web application design relaunch, SquadUp’s user base grew from 5K to
over 50K
✤ Increased event creations and ticket sales
We focused on making it as easy as possible to create events both on web and mobile.
Since our redesign and release of the mobile app SquadUp has seen exponential growth in
both events on the platform and ticket sales.
✤ Increased user engagement
By implementing the chat feature for each event, user engagement has increased in the
iPhone app for each event.
44. 03 TESTIMONIALS
WHAT PEOPLE SAY ABOUT US
44
✤ “JAKT had a working version of our app up and running in about the amount of time I've seen most other
organizations draft a statement of work.”
— Michael Oneppo, CTO of Library for All
✤ “My startup partnered with the JAKT team to build a graphics-heavy analytics platform. Their
responsiveness and work ethic was second to none. They were constantly engaged and updated my team
while coming up with some creative suggestions on design, workflow and product specifications. They
were quick studies in picking up our language of choice for the web platform and were versatile enough to
exceed all our initially established deadlines and targets. If you’re looking for technology partners who will
plug right alongside your team and help you get out of some tough deadlines, then I strongly recommend
working with JAKT.”
— Isaac Asiamah, Founder of Darwynn
✤ “JAKT kicks ass. Incredibly sharp and talented, they’re both so easy to communicate with, which is crucial
to having your vision manifested onto the interwebs. I truly enjoy working with them. They’re the best
developers I’ve worked with: diligent, deadline-oriented, always on the same page — if I could hire them
full-time I would.”
— Edlin Choi, Founder of EatTribal
✤ “The team at JAKT definitely over-delivered! Knowledgeable, professional, accommodating, & highly
skilled, I couldn’t have asked for a better development solution.”
— Dino Decespedes, Founder of Guidebits
✤ “The JAKT team worked with our tight time frame, and provided an excellent product on a limited start-up
budget. I am very happy with the results, and continue to use JAKT for our ongoing web site needs.”
— Alan Silbert, Founder of BitPremier