CXCMYK short.png

todoolie

Project Overview

ToDoolie is an online platform that helps homeowners accomplish tasks around the home by hiring “helpers” who tend to be college students with flexible schedules.

Challenge

Our team, Design Armada (5 students enrolled in Flatiron School) were tasked with redesigning ToDoolie’s marketing website to help them better articulate the services they offer in order to grow their customer base. The existing site was not clearly defining their product to customers and investors, and many customers had to reach out by phone to have their questions answered. Our goal was to work as a team to research competitors and determine a new design direction that fit their existing style.

ToDoolie Mobile Hero.png
Target Audience

ToDoolie can be used by just about anyone, but their primary base consists of older homeowners. Young helpers and potential investors are crucial to ToDoolie’s success but were lower priority for this project.

woman.jpg
Primary: homeowners
  • Mostly suburban white female approx. 45-70+ years of age

  • Older clients generally can not perform the task themselves 

  • Occupation varies 

  • Client users have a sense of pride in one's home

Teenager.png
secondary: young helpers
  • Generally college students and young adults under 21

  • May have limited to no job experience

  • Young people looking to earn money on a flexible schedule

Competitive Analysis

To gain an understanding of the current landscape for gig-economy services specializing in tasks around the home, our team evaluated six competitors. Our goal was to compare and contrast their visual language and identify areas of opportunity to differentiate ToDoolie from their competitors.

 

Companies Evaluated: Taskrabbit, Lawn Guru, Papa, Handy, Taskeasy & Lawn Love

key takeaways
  • Greens & blues were most common colors

  • Competitors sites lacked a clear brand personality, all very similar and plain

  • Full color photography of happy people help with a positive tone

  • Sans serif typography was standard

  • MIcrointeractions were limited, if any, in competitors sites

Our primary goal was to bring some more personality and color into our redesign. Due to the older age of the primary users, we didn’t want to stray too far from established design systems, but we agreed that the experience could be more inviting and friendly than the style of their competitors. ToDoolie needs to be modern and appeal to younger users, but functional and accessible for older users.

Style Development

Each team member created divergent stylescapes as we began to define the look and feel of the new ToDoolie site. Some designs were inspired by the existing ToDoolie branding, while others explored entirely new directions. The following are my initial style explorations.

ToDoolie redoolie

Using the existing brand palette, this stylescape explores duotone images and a more legible typeface.

1 - ToDoolie ReDoolie.png
happy place

This style expands on the palette to achieve a friendlier tone with a slightly feminine flavor.

2 - Happy Place.png
Tame the Wild

My final style is the most experimental, by creating a more masculine and outdoor tone inspired by scout badges.

3 - Tame the Wild.png

We conducted a desirability testing sessions with existing ToDoolie customers, and ultimately the participants and the client decided that moving forward with a refined version of the existing palette was most desirable. To see the final style direction that we moved forward with, please click here.

Wireframes

After a brainstorming session with the client regarding hierarchy of the content, the team began to develop wireframes for the redesigned site. I began with some loose concept sketches before moving into Sketch to start establishing a working layout. My initial concepts were influenced by my “Happy Place” stylescape, but our decision to move forward with a different style, I simplified my designs to align with that direction.

Our team made the decision to focus on the desktop site before mobile, as the client expressed this was the main point of entry for their older customers. In retrospect, the team should have focused on mobile first, as this is the standard for modern web design. I think our final designs would have been much stronger if we started small then worked our way up, instead of trying to shrink our designs.

ToDoolie Home Wireframe
Desktop Prototype v1

Once wireframes were established, the team continued to develop individual prototypes in preparation for the first round of user testing. My intention was to keep the designs approachable with the use of bright photography and use the brand colors to highlight areas of importance, and keep the page from looking flat. 

 

By creating a carousel for cards, I was able to establish a simple three column layout that can serve multiple purposes. In this case, the cards are used to highlight popular jobs and customer reviews.

 

Even though it was out of scope, I decided to incorporate a pricing estimate and a booking flow to further encourage new customers to engage with the website. My intentions were to reduce the amount of ambiguity around the service to paint a more refined picture of what ToDoolie can do for their customers.

User Testing

My team and I conducted several user interviews and testing with the desktop prototypes to collect feedback and recommendations from existing ToDoolie customers. 

 

Users appreciated how easy this prototype was to navigate, especially the proposed booking flow. They found the toned down palette paired nicely with the bright photography made the page welcoming and inviting, and the carousels intuitive and engaging. 

 

This prototype was ranked highest amongst our participants, so the team began the process of working collaboratively on the final prototype, and development of a mobile version.

Home Desktop v1.png
Final Prototypes

By working collaboratively, our team was able to build and refine on my initial prototype to create something accessible and inviting while still representing the ToDoolie brand. Background colors were changed to a soft grey, with alternating white “bubble” sections to break up the page. Each team member had different responsibilities but we were still able to produce a cohesive website. 

 

Our designs were translated to fit smaller mobile screens, and subtle microinteractions were designed to create a more engaging mobile experience. For example, a hamburger navigation is utilized to make better use of the screen size.

The final desktop prototype can be viewed here. The final mobile prototype can be viewed here.

ToDoolie Final Devices.png
ToDoolie iOS mockups .png

We conducted a final round of user testing, focused on both mobile and desktop versions. Our participants continued to rate our designs very highly, and some even preferred our mobile version over the desktop. Some keywords and phrases we heard most commonly; Simple, intuitive, fun, youthful, professional and user friendly.

 

As for the client, all major stakeholders were overjoyed at our teams hard work an dedication to helping improve their brand image. Our team worked together to assemble our assets in Zeplin for smooth handoff to their developers. They remarked how impressed they were that our team was able to go above and beyond the initial scope of the project, and they were very eager to implement our designs as soon as possible.