Bringing Pixo to life with an interactive app

When our business development team came to us with a big idea and a question, we put our consulting skills to the test. Our Director of Business Development, Danielle, frequently represents Pixo at trade shows. But she realized that as a tech company, we weren’t bringing a lot of tech to show off. She felt we could showcase our values and capabilities through a fun and interactive app. Trying to catch and keep people’s attention at a busy trade show can be tricky. To address this, we consulted with our new Proposal Writer, Leah Rainey, to come up with a plan. Leah proposed choosing one of our values for each of the letters of Pixo. P for ‘people,’ I for ‘inquiry,’ X for ‘eXperience; and O for ‘openness.’

The original plan was quite ambitious. We wanted to make sure the app was accomplishing its goals before getting too far into the process. Pixo’s process values Agile development. Agile prioritizes making small, deployable changes based on user feedback. This feedback drives future features and how we approach the next steps. With that in mind, we started with something we could complete by the next trade show: the ‘P’ experience! This way, we could get plenty of feedback on the concept before delving into the I, X, and O experiences.

Showcasing our values

The ‘P’ experience shows attendees that we put people first in our projects. We value people over process and bring your concerns and needs to the forefront of our approach. Leah designed a camera-based experience around the idea that our “focus is on you”! We wanted to give our business development team a way to stay in touch with attendees after the show. Additionally, we wanted the user to walk away from our booth with something unique to share. Normally, we would approach this with a static form. We realized emailing them a selfie with a topical frame would be a fun way to achieve our goals.

Tech stack considerations

There are many tech stacks that provide the foundation necessary to bring this idea to life. We considered Unity because it’s well-suited to game-like elements. After thinking about scope, we decided to keep things simple and use HTML and CSS instead. Limiting ourselves to using these tools would force us to hone in on the true goals of the app. As an added plus, we could easily and cheaply host a static website through the Amazon S3 static web hosting. For hosting, we used a blend of AWS S3, CloudFront, and Lambda. Thanks to the always free tier benefits of these, we’re able to host this experience for $0.00001725/month. Compared to a typical t4g.micro EC2 on-demand instance (~$7/month), this works out to be 405,000 times cheaper!

Our engineers have experience with many front-end frameworks, including Angular and React. For this, we decided on the lightweight framework SvelteKit. SvelteKit layers routing and static site building on top of Svelte components. At Pixo, we like to create “starter kits” to hit the ground sprinting. Our engineer, Andrew, has been working on a starter kit for Svelte over the past year. The Pixo Experience app was the perfect opportunity to try it out. We had our first version ready to host within half an hour. With the foundation built, we were ready to make Danielle’s dream come true!

At first, the idea was to have 4 screens, each with their own letter of Pixo. Since we started off with only one screen, we wanted to make sure the whole word was still represented. This also meant we needed to adapt our original idea for animating the landing screens. We needed some motion to catch attendees’ attention, but not something too complicated. By animating parts of the ‘Pixo’ SVG separately, we came up with a cute ‘wiggle’ animation. We created the beautiful and cinematic P animations all through simple CSS. It’s amazing what it can do.

One challenge came up when implementing the camera view. Using html2canvas and standard HTML canvas techniques, we arrived at a first version. This looked great but felt awkward to position. Our colleague pointed out that selfie cameras mirror the camera content. We gave it a shot, but we accidentally mirrored the banner overlay too! After a good chuckle, we flipped only the camera part of the image for an intuitive selfie experience.

Another challenge was sending emails, the only dynamic part of the project. If we had the static site send the emails, we would run into two problems. First, we’d have to bury AWS SES API access keys in the public Javascript, which is a security risk. Second, we’d trigger spam filters since the user’s device wouldn’t match the DKIM/SPF settings. To minimize cost and achieve this behavior, we used an AWS Lambda function with an API Gateway to expose it.

We are unveiling our new experience at the HighEd Web 2024 conference.  We love this opportunity to show off our skills, so stop by our booth if you are attending.  What’s your big tech idea, and how can Pixo help you make it a reality? Let’s connect and dream about the possibilities together.