SkillFlow — Designing a Slackbot

Hunter Rice
Feb 1 · 4 min read

Personal Project, 2015 | User Experience | Duration: 3 months

🐦 @hunterrice20

Problem

I was seeking to build a deeper foundation for my web development capabilities, and like any fledgling developer, I turned to Stack Overflow for programming help. For the most part, it served its purpose, but when it came to broader concepts, the deferred Q&A format became limiting.

I approached the best web developer I knew and sought to build a more interactive, real-time solution.

Ideation Process

Exploration

I liked the idea of utilizing the tight knit programming community and hackathon space to build the platform on.

Building on Slack was a natural decision, as it would facilitate integration into these existing communities.

User Persona

Starting in the hackathon universe, we would need to populate the platform with both students & mentors in order for the product to be useful and effective. I developed a basic user persona for each of our target demographics, and kept them close by for reference throughout the UX design process.

Human Centered Design

I attended weekly hackathons, conducting user interviews on both students and mentors. Through these conversations, I discovered a major issue that reminded me of my own.

Exploring new technical boundaries felt comfortable to students when mentors were present, but left on their own, their self confidence would wane.

Solution

SkillFlow is a simple Slack integration that places programmers in real-time chats with experienced developers. It would provide the opportunity to expand the student/mentor relationship to the entire development community.

SkillFlow’s Debut @ SlashHack, San Francisco.

User Experience

Designing for this project wouldn’t require my typical UI/UX skills, as my abilities would be considerably constrained to Slack’s limited capabilities. After researching Slack’s API docs extensively, I began wireframing; breaking down the general experience into 4 parts: Tone, Onboarding, Trigger Words, & Incentives.

Tone

This was my first experiment with conversational UI. SkillFlow would posses the qualities of a formal assistant with friendly tendencies.

More human, less robotic. I utilized a few available Slack features like typing indicators (“SkillFlow is typing…”), and lots of fun emoji usage.

Onboarding

Chat bots were a relatively new trend at the time, so my goal was to keep things clear and concise. I gave SkillFlow a simple introduction via Slack direct message, which included its capabilities and simple examples. This would remain in the message thread for users to refer back at any time.

Trigger Words

Students seeking help would simply type their question and let SkillFlow do the work. My partner implemented natural language processing to accurately source the right mentor.

Students would say, for example, “How do I print to console in JS”?

Mentors simply listed their knowledge using “I know”.

Incentives

Lastly, it was critical to align incentives, so I added a touch of gamification. Each conversation was rated, similar to an Uber ride, and both parties earned points for intelligence and professionalism. A user could see their rank of “Programming Prince 🤴”, and gain motivation to answer questions as they continue their journey to the top.

Takeaway

Ironically, working on a tool to help young programmers develop their skills radically improved my own.

Although in just 3 short months SkillFlow was installed over 20,000 times, it will never replace the struggle of one own’s trial and error that comes with building a product.


Hunter Rice

Written by

Product Designer focusing on visual elegance and simplicity.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade