SkillFlow — Designing a Slackbot

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.

Want to read this story later? Save it in Journal.

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.

--

--

--

Product Designer focusing on visual elegance and simplicity.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Programming Languages in the Era of the Cloud

The Future of Work is Simpler and Scarier Than We Think

Testing Redis Clients in Node.js with Testcontainers Node

Magento 2 Architecture: In What Way It Is Better Than The Magento 1.9?

Single Table DynamoDB Data Modeling

Ever since I was a little boy, I have only ever wanted to be a Doctor.

Teaching Programming with Twine

[LeetCode]#104. Maximum Depth of Binary Tree

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hunter Rice

Hunter Rice

Product Designer focusing on visual elegance and simplicity.

More from Medium

Data usage and why I should be concerned for my well-being.

To get noticed, you have to create an engaged workforce and practise active listening. Here’s how.

CH05 Programming Challenge

How To Push A Negative Story Off The Front Page Of Google

How To Push A Negative Story Off The Front Page Of Google