Red Ventures 2016 Hackathon

Team Luna members Derek, Babak, and Tim hacking the Echo Scribe product

Team Luna participated in the 2016 Red Ventures Hackathon. We built a product called Echo Scribe, a voice transcriber and meeting buddy. We learned some great technologies, met awesome people, and had fun!

Here’s the source code and product landing page.

Invitation

This year, Red Ventures opened their annual hackathon to outside participants. We’re grateful that the local tech giant hosted this event and fostered tech growth in Charlotte.

On Team Luna, we’re committed to lifelong learning. The hackathon allowed us to explore new technologies, hang out on Red Venture’s beautiful campus, and meet talented, and like-minded, techies from Charlotte.

Red Venture’s awesome building

Idea

We entered the hackathon in the voice recognition category. A few of us have an Amazon Echo. Think of Echo like Siri in a Bose speaker. You ask it questions (weather, movies, traffic), play music, listen to audio books, order pizza, and order stuff... all with voice commands! Those commands are called skills. We wanted to make our own skills, get creative with the Echo, voice recognition, and Amazon Web Services.

Goal

Our goal was to use the Echo and voice recognition to help meetings — a source of pain in the business world. We wanted to “show who says what” in meetings. We would transcribe everyone’s voice, or convert their voice to text. That would make a transcript of the meeting for later. Like public minutes.

Problem

Ever had a meeting when you forgot the key points, or someone was missing? Or late?

Solution

Echo Scribe records your meetings and makes a transcript of who says what.

End Product

Echo Scribe, the product we successfully hacked together in 24 hours, records your meetings, transcribes who says what, and has other meeting helpers, like an attendee list, and meeting reminders called “pro tips”.

Product Preparation

We had a couple weeks to prepare before the hackathon. I (Joseph Guerra) organized our process, basic features, and areas of responsibility, in Trello.

Trello board organizing our process and featrues

UX Research

I also prepared by doing some user experience (UX) research. I conducted informal interviews to test assumptions about meeting pain points and validate the voice recording feature.

I created a few UX artifacts. These are physical documents to capture UX research results. I developed a persona — the pretend person who could use this product, and how they feel about it. I assembled storyboards — to show how the persona has a regular meeting, verses a potential meeting with Echo Scribe. I made “How Might We” statements — which are open ended questions to explore potential solutions to the “meetings are painful” problem.

Persona and Potential Product Story Board

These UX artifacts aligned the team. They focused our product thinking and development. We always had the goals of the end user in mind. After all, the best products are useful. They solve a real problems, over products that are simply a clever use of technology.

Interface Preparation

Team Luna member Derek was responsible for the front-end user interface (UI). This would display the “who says what” part of our Echo Scribe app.

Derek prepared by developing concepts — high level ideas about how the app could look. He got inspiration from other recorder and chat apps. He made a few different wireframes.

We went into the hackathon with a general idea of the front-end application and a color scheme.

Some of the wireframe concepts of what the interface could look like

Technology Preparation

Tim and Babak, the team’s full-stack developers, explored the technologies available to build the back-end application. They researched the Echo hardware, Amazon Web Services, and various speech APIs. These tools would control Echo, converts voices to text, and host the application.

Their task during preparation was to conclude that recording a meeting with an Echo was technically feasible… and doable within our skills and 24 hackathon timeframe.

The answer was: kinda.

The technologies we eventually used for Echo Scribe

It turns out that Echo is not good at recording voices for a long time. Yikes! So we decided to use Echo to issue commands (which it’s very good at), but we needed to use a different tool to record voices. We ended up using a laptop microphone and Webkit Speech API.

Hackathon Day 1

Day 1 was all about organizing our features, front-end visuals, and system architecture.

Our concept was this: You walk into a conference room, and tell the Echo to start a meeting. Everyone visits the Echo Scribe web app, on their personal computer (or mobile). Their devices (not the Echo) records their voices, and the web app shows the transcript, in real time. The Echo is used to start and stop the meeting, get helpful meeting reminders, and invite others.

The magic of Echo Scribe was not in voice recognition. The magic was using voice commands to trigger functions (start/stop/invite) in a web application.

I assembled our features and maintained the Kanban Board —a highly effective visual to-do list with three columns: “To-do”, “Doing”, and “Done”. Trello and Jira are good software tools for this. I went with simplicity during the hackathon. I used physical sticky notes on a whiteboard.

The challenge was determining must-have features, over nice-to-have features, given the short timeframe and overall team progress.

UX artifacts on the left and Kanban on the right

Meanwhile, Derek started on the front-end design — how the web application would display the meeting transcript.

Derek coding the front-end

Tim and Babak finalized our back-end system architecture. They started fitting the pieces together. That was the hardest part! These were the pieces we used:

Team Luna working through the Echo Scribe system architecture

We had a few big smiles on Day 1. There were a lot of moving parts, so it was nice to celebrate when they came together.

Big smiles all around with breakthroughs

Actual Hackathon Night 2

The focus on Day 2 was more work to make the back-end pieces fit together. I prepared for the pitch presentation to the judges. Derek continued working on the front-end.

We had more great “Yes!” moments. We shared high-fives after getting lambda to trigger functions on our web server. We cheered when we got sockets working.

Front-end code meets back-end code

I was completely amazed how our front-end and back-end came together. With less than 2 hours in the hackathon, we connected the two. Derek said: “just call these functions in the front-end”. Tim and Babak called them from the back-end. BOOM! They worked. We completed the full end-to-end app.

We got Echo Scribe to record from a single source (laptop). We did not have time to enable multiple sources — as in each meeting participant with their own laptop. The concept was there. The architecture would allow this. We still considered our product a success, and example of working software.

Presentation

We presented Echo Scribe to 4 judges and a group of distinguished guests from Code For Charlotte. We had 7 minutes to explain the problem, our solution, demonstrate our working product, and answer questions.

Echo Scribe web application ready to start meeting

Judgement

We were 1 of 15 teams to compete in the hackathon. We did not place. That’s just fine! Being present, creating a working solution, and learning a ton, was reward enough. Plus we got a sweet picture with judge Betsy, CEO of Tech Talent South, Charlotte-based coding school.

Tim, Derek, Joe, and judge Betsy, CEO of Tech Talent South

Expo

Red Ventures invited all the teams to an Expo, a few days after the weekend hackathon. Everyone had a chance to show their products to Red Venture employees, investors, and public guests.

Echo Scribe during a recording session

We demonstrated Echo Scribe and answered questions. Expo participants bought raffle tickets to vote for teams. All funds went to Code For Charlotte. Red Ventures generously matched the donation!

What’s next?

For Team Luna, we’d like to expand Echo Scribe. We learned a lot. There’s more to learn and finish. We’d like to allow for multiple users. We want to properly display text of multiple people speaking. We’d like to complete the secondary features, like the emailing the transcript, and hooks for slack calendar invites.

Thank you Red Ventures

Thank you for having us, Red Ventures. Thank you for fostering tech in Charlotte and hosting a great event.

And get ready! Team Luna is ready for next year’s hackathon!

Team Luna

At Team Luna, we’re committed to building useful apps, life-long learning, advocating for developers, and fostering the local tech community in Charlotte. We came together in the local meetups. Catch us at ReactJs, CharlotteJs, Docker, Python, Django, Skookum Tech Talks, and Nightshift.

We are Tim Johnson, Brandon Fancher, Babak Keyvani, Joseph Guerra, Alfonso Cabrera, and Derek Piccola.

Team Luna suited up for product launch :)