Makeful was reimagined in fall of 2016, it was transformed from a user-generated community into a lifestyle publishing website. As product designer on the site, I was in charge of the UX, and was able to re-examine the overall look and feel to align it more with the content strategy and redefined business objectives.
With roots in the Canadian Maker community, the first version of the site, Makeful Beta, was a user generated community website that grew from a newsletter community into a full blown website where users would upload their own projects to the site based on a weekly theme.
Originally the site targeted women approximately 20-45, and was split between 3 distinctive types of users.
- Professionals - crafters with their own blog who submitted their own projects, to the site but ultimately wanted to drive traffic back to their own blogs.
- Hobbyists - part time crafters with or without their own blogs, aspired to be full-time bloggers.
- Inspiration Seekers - users who came to the site to browse and get inspiration for crafts, but didn’t necessarily submit their own.
Makeful Beta failed for two reasons. For one, despite having a highly loyal core group of users, the site was unable to grow fast enough to support itself. Even though users loved the weekly themes, site traffic was highest on Mondays and Fridays, but significantly lower the rest of the week. The second was that while users loved connecting with and getting recognition from other makers, their main motivation for using Makeful Beta was exposure, and they found it was tedious uploading projects to the site in addition to their own blogs. The result was that without proper funding for recruitment efforts, and resources to fix the site’s issues it was unable to grow fast enough to generate revenue and for business reasons the site pivoted from a user-generated community to a lifestyle publishing site. (For more on Makeful Beta click here)
Strategy + structure
Since the content was now to be created by an in-house editorial team, we were going to have a lot more control over the imagery and articles posted on the site and meant we needed more flexibility in the types of content the editors could create. Since we were basically starting over again from scratch, the initial strategy was for the editorial team create a minimum of 8 clickable articles, lists and galleries a week as well as two DIY videos a month. With this in mind, a sitemap was created, that broke down each page type into component modules to further distill requirements into tangible features. It also mapped out the number of ads needed on each page to reach revenue targets.
Since the site needed to be responsive, wireframes of the key pages were created in three sizes to show how each of the page’s components would scale at different screen resolutions keeping in mind the number of posts that would need to be created each week.
Modern and clean, Makeful’s visual design used lots of white space to allow the images to take center stage. The google font Raleway was chosen because of its many weights and because of its more humanistic letterforms. It was a softer, quirkier alternative to Helvetica that kept the site light and airy while adding a little more personality.
Throughout the iterative process, color came to play a very important role for Makeful. While the initial color palette was kept very minimal, relying heavily on black and white, with pops of bright aqua and pink to indicate interactivity and inject personality. Having only two accent colors started to feel limiting. As a result I introduced Makeful’s full color palette as a way make the the brand feel more well rounded. It was also a great way to make the sites color mean something. Because categories on the site are not fixed, and the editors can change or add new categories to fit their needs, color is used to represent themes. Themes are not only a way to group categories that are similar but also a way to align them with brand’s core values. As a result each of Makeful’s six themes has a color, with the two primary themes (lifestyle and inspiration) utilizing the site’s primary colors of teal and pink.
As part of the visual design process I looked at a variety of competitors from large publishing sites (Refinery29, Brit + Co, Girl Boss, Bustle) to smaller blogs (Studio DIY, A Beautiful Mess) to start figuring out the best way to differentiate the brand while upholding the brand’s values. So, in addition to the new full palette, a set of gradients and patterns were introduced to the brand identity to help the brand stand out from its competitors.
The theme colors, gradients and patterns were introduced throughout the website everywhere from the tops of the cards, around images and playlists as well behind the headlines on article pages which helped both to differentiate Makeful from its competitors, as well as add an extra element of playfulness across the site.
The new brand style was also adapted for the brand's social media.