DIY is a community of kids learning skills and sharing what they make. Designing and building for kids is a fun and challenging task – it helped working with a team that are all still kids at heart. I enjoyed coming up with solutions that were engaging, but worked within constraints put forth by things like COPPA.
In addition to working on the website proper and other services I built internal tools like a Skills admin site for our curators and a playground for designers to sketch new web components with our type and base css pre-loaded.
Kids could browse a wide breadth of Skills and get a glimpse in to all
sorts of interests they may not have known they had. If they are signed in a
list of skills in progress could encourage completion earning a patch as
a result. Clientside sorting and grouping made it really easy to navigate the
100+ skills on the page. Any new skills would have a
new label on their card and
that would bubble up to the category navigation to the left. New and noteworthy
skills would display at the top in a banner with a random skill on each page
After launching Extra Awesome we had some room to work on a non-roadmap project. I chose adding support for bookmarking challenges. Kids on the site had asked for the feature before and I always saw the activities you could do on DIY were asyncrhonous so a feature like To-Do's would be pretty beneficial.
On each Challenge detail view a To-Do button would appear as long as you haven't completed the challenge already. Tapping the button would add the challenge to your To-Do list in your portfolio.
Each To-Do item sports time and cost metadata meters. The color of the meter will change depending on how many dots are filled increasing the scannability of To-Do's that might be cheap and quick or expensive and difficult depending on what you're looking for.
One of the last projects I worked on was a refresh of the Portfolio. It was a much needed facelift and a preparation to support new features we had on the roadmap such as custom avatars.
In the previous iteration you couldn't view your entire skill grid. With this update you can now scroll through your entire skill history. The grid was built using an awesome module by Substack with some additional tweaks to meet the intended visual design.
A part of the Extra Awesome offerings is access to your insights on your portfolio as well as your parent's dashboard. We hired Ri Liu for a data viz residency to help craft the d3 visualization and I helped put all the pieces together. We opened sourced two of the graphs used to make up Insights: donutchart and radarchart.
We never got around to making all of DIY mobile friendly, but it was important to get the Join flow in shape as many of the kids and parents needing to verify accounts were using mobile devices.
<iframe src="//player.vimeo.com/video/117758788" width="500" height="888" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen class="article-media">