LittleHoots

Memory capturing made easy

Within a team of four, I redesigned client LittleHoots' popular memory keeping and sharing native iOS app, helping parents capture the funny things their kids say and memorialize them forever.

It’s never been easier for parents to snap a quick photo of their kids growing up and share it with friends and family—yet with this ease, our memories are more scattered than ever. Parents have miles of photos and videos in their camera roll, notes living in journals, scrapbooks, across devices, social media, the cloud…

‍

Enter LittleHoots: The mobile memory-keeping app helping families worldwide capture over half a million quotes, conversations and stories with their children. My team and I redesigned the LittleHoots app to make memory keeping easier, more customizable, and more valuable for parents.

MY ROLE

In my team of four, I served as Project Manager and UX researcher and designer. I was responsible for keeping our team on track and on deadline, user interviews and generative research, synthesizing insights, as well as assisting our lead designer in taking our design from early concept sketches to the final prototype.

TIMELINE

3 Week Sprint (Jan 2022)

TOOLS

Figma, Google Surveys, Miro, Notion, Zepelin, Zoom

METHODS USED

Heuristics, Competitive & Comparative Feature Analysis, Secondary Market Research, User Interviews, Affinity Map, User Persona, User Journey, User Flow, Site Map, Problem Statement, Feature Prioritization, Sketching & Design Studio, Prototyping & Iterating, Usability Testing

Challenge

LittleHoots' current mobile app had not been updated in a while and was experiencing stagnant growth and meager conversion rates from trial users. It lacked the design customization and ease of drafting and saving memories that users needed in order to capture the funny and cute memories of their kids.

🎯 Project Goals

Improve usability and efficiency
Grow engagement and convert trial users
De-prioritize underutilized features

🌱 Design Opportunities

Improve information architecture
Give users customization in their designs
Modernize visual layout

The following are concept designs for a student project during a User Experience Design Immersive program at General Assembly.

THE SOLUTION

A better way to save and share those funny moments with kids

‍

We worked to deliver a solution that met the needs of both existing users and prospective users, with features including:

01

Easy and intuitive steps for drafting

02

Design tools to customize each "Hoot"

03

One-stop-shop for printing images and books

View Prototype Desktop Prototype

Impact

The new LittleHoots app introduces a brand new customization studio for parents to add their unique flare to memory cards (Hoots), a draft function to quickly write on the go, and a one-stop-shop for ordering a photo book right from the app.

‍

Here’s what a few users said:

Quote from users about how impactful the new app design is

We tested a variety of screen flows that met the goals and needs of our users, and here's how our design improved people's experience:

17.76 seconds faster

Users completed the flows 17.76 seconds faster

26.7% more direct completions

Users completed the flow 26.7% more directly

4.8/5 easiness rating

We improved easiness by 0.9 points (from 3.9 to 4.8)

My team and I were able to give parents more control, customization, and an easier experience with their memory keeping from the redesigned LittleHoots app. How did we go about this process of redesigning?

‍

How was the existing LittleHoots app performing?

Some of the first things we did to understand how the LittleHoots app was currently performing was conduct a heuristics evaluation and usability tests of the app. We wanted to see what’s currently working and not working for users, as well as assess its compliance with recognized usability principles.

‍

Compost USA insight card from user interviews

Key takeaways

Green checkmark to represent a Key Takeaway

Access to composting sites and services

Resources, education, and accurate composting information

Validation, incentives, and ways to visualize impact

THE EXISTING APP

How was the existing LittleHoots app performing?

‍

Image of a competitive analysis of insurance companies

Key takeaways

Not a single provider or app allows you to add other insurance providers to their own

Most apps are clunky and buggy

Lemonade is the most modern and intuitive for today's user

THE EXISTING APP

How was the existing LittleHoots app performing?

‍

Home screen for new users

Key takeaways

Red "X" mark to denote a change we would be making

Home page should be more inviting to new users

Text/stroke weight is thin for accessibility standards

Existing hamburger menu

Key takeaways

Confusing labels led to trial and error

Taxonomy needs updates to improve findability

Drafting and tagging screen

Key takeaways

Too many steps to create a new Hoot

Need to decrease redundant steps for clarity

BUSINESS RESEARCH

Taking a peek at the competition 👀

We conducted a competitive and comparative analysis of features to understand how social media brands, third-party printing services, and photo editing tools were serving their customers. This helped us identify that LittleHoots needed to double down in the design customization space, and consider letting go of its social media vertical.

Key takeaways

We needed to provide a single place for users to view all their insurance policies

We needed to create a way for users to view upcoming bills and see payment schedules in one place

We needed to create a helpful visual tool for users to better take advantage of their benefits

Key takeaways

Too much time was wasted searching across multiple sites for the right information

It is difficult to know what composting services are nearby, and whether they will pick it up or offer a place to drop compost off

People feel good when they know they are making an impact, and they want to be able to see this to feel inspired to keep going

IDEATION

Prioritizing features

We took these core insights from research and began the ideation process. We first prioritized the most important features and capabilities needed to solve our persona’s challenges and goals. We began to sketch these out with a design studio to explore various concepts and ideas.

Key takeaways

Location services (GPS and ability to use a map) to find pick up/drop-off options

Tracking and/or incentives for people to view their impact

Educational resources and information

USER RESEARCH & SYNTHESIS

What did we hear from users?

With a clear sense of the business and performance of the current app, we interviewed 7 prospective users and 7 existing LittleHoots users. We wanted to learn about their motivations for memory keeping, as well as understand existing users’ pain points, frustrations, and favorite features within the app.

‍

From prospective users, we learned:

‍

From existing LittleHoots users, we learned:

‍

Key takeaways

We needed to provide users with a way to look back on and receive reminders of milestones, memories, and anniversaries

We needed to create a way for users to draft and save notes in LittleHoots

We needed to provide a way for people to customize their designs

We needed to create a path for users to select their Hoots and order photo books right from the app

PERSONA

Who are we designing for?

We summarized our research and the needs, challenges, and goals of our target audience by creating a single, fictitious "persona.”

‍

Meet Anna! 👋

‍

‍

JOURNEY MAP

What do users need?

We mapped out the process that Anna would go through as a new LittleHoots user to capture, create, and share her memories with her children. We learned Anna’s pain points, frustrations, and emotional experience through each step, in order to see opportunities for new features and modifications for existing features.

‍

Key takeaways

We needed to create an easily accessible draft function right in LittleHoots that keeps unpublished Hoots safe for future sharing.

We needed to streamline the Hoot creation process, with fewer screens and questions in order to get the important details down quicker.

We needed to prioritize customizable designs for users to make their Hoot unique.

We needed to create a memory and "time-hop" feature, to remind busy parents of their kids' quotes from months and years prior.

We needed to think through designing an integration feature with an existing third party printing service (like Chatbooks) to quickly create a photo book.

IDEATION

Prioritizing most-needed features

We took the core insights we discovered in business research, user research, and usability testing of the existing site to guide our design process. We conducted two UX methods — the MoSCoW Method as well as the Feature Prioritization Matrix — to help us prioritize the features we wanted to deliver in our product redesign. As a team on a deadline, we wanted to be sure we were focusing on the right thing.

Eliminating features

Must-have features

"Inner Circle"
Users prefer existing social media sites

"Hootstream"
Replace with Instagram integration

Shopify
Focus on Chatbooks integration

Write and save drafts

Simpler memory creation process

Customizable designs

Reminders of past milestones

Easier process to design and print books

PERSONA

Who are we designing for?

We summarized our research and the needs, challenges, and goals of our target audience by creating a single, fictitious "persona.”

‍

Meet Anna! 👋

‍

‍

JOURNEY MAP

What do users need?

‍

Key takeaways

We needed to have clear, concise language (not legalease) for users to better understand their coverage details

We needed to build a seamless sign-up process that pulls personal information across all accounts

We needed to make one app, similar to a digital wallet, for all insurance policies

We needed to create the option to align payment schedules across all accounts

We needed to provide better diagrams and data visualization to view benefits, deductible, expiring benefits

IDEATION

Prioritizing most-needed features

We took the core insights and began the ideation process. We first prioritized the most important features and capabilities needed to solve our persona’s challenges and goals through feature prioritization.

Our must-have features included:

Image of feature prioritization sticky notes

Insurance cards

Single sign-in to all accounts

Payment/billing information

Ability to schedule bills together

Clear coverage details

"Add new" insurance cards quickly

SKETCHES

Early design concepts

We began to sketch key features out with a design studio — a rapid-fire approach to quickly explore various concepts and ideas, and collaborate with team members to identify the best ones. We wanted our designs to accomplish three main goals:

‍

Add a new insurance policy and view policy card + details
View all payments and schedule bills together
View benefits, particularly FSA benefits remaining in account

‍

We chose the best designs from each of our sketches to bring into mid-fidelity.

Early hand-drawn sketches of PoliFolio insurance app

Home/dashboard screen

Add new insurance policy

View payments and schedule bills

View benefits dashboard

SKETCHES

Early design concepts

‍

Add a new family member to the app
Create Hoot and save it as a draft
Design a Hoot with more robust customization
Select photos to create a photo book in Chatbooks

‍

We chose some of the best designs from each of our sketches to bring into mid-fidelity.

Early hand-drawn sketches of LittleHoots redesign

Adding a new child to profile

Create a Hoot and save as draft

Design a Hoot with custom selections

Select photos to create a photo book

MID-FIDELITY → HI-FIDELITY USER TESTING

Testing with users

In order to see if our product was helpful to users, we went through two rounds of usability testing, with a total of 10 users. We gathered feedback and data and made revisions to address problem areas. After our first round of feedback, we updated our designs to hi-fidelity.

‍

Below are the major areas for improvement we gathered from our users over two rounds of testing:

Minimizing distracting details

PoliFolio insurance app screen in black and white

Users tried to click the text rather than the “+” when it was on the left side

Users spent time trying to read the fine print on the insurance card page

We moved the “+” buttons to the right side and made the full text clickable

We removed the insurance details from the screen to keep our users focused on the main card function

"I didn't know which category or button to select"

Screen image of PoliFolio insurance app in black and white

Users got confused between clicking on “Insurance Subscriptions” or “Payments” right beneath it in order to view their billing

Many users overlooked our “Combine Payments” button as it didn’t visually stand out

We provided better naming conventions and consolidated these categories into “Billing & Payments”

We boosted the contrast and color to make it clearly look like a button

Confusing flow

Users got tripped up on the ‘combine payments’ page because there was an overload of information

Users were uncertain if they had completed the task when they saw the Congratulations page because there was still a call to action

We simplified the screen to show a breakdown of fees and the new payment schedule options

We simplified the language and removed the CTA to show users they had finished the task

MID-FIDELITY → HI-FIDELITY USER TESTING

Testing with users

In order to see if our product was helpful to users, we went through two rounds of usability testing, with a total of 10 users. We gathered feedback on mid-fidelity designs and made revisions to address problem areas for our hi-fidelity design.

‍

Below are the major areas for improvement we gathered from our users:

Flow confusion

Screen capture of LittleHoots mobile app in black and white

Users had a hard time understanding the taxonomy and labeling of buttons

It wasn't intuitive who was speaking during each part of the conversation

Users couldn't navigate between pages without misclicks and trial and error

Screen capture of LittleHoots mobile app in color

Simple steps to start a conversation

System now automatically highlights the alternating speakers to decrease number of clicks

Flow now consistent with text messaging for improved learnability

Visibility troubles

Screen image of LittleHoots app new design in color

Users were confused if the small 'x' on the design tool overlay would cancel their selection or just close the overlay

Users had trouble seeing which selection of the design tool was the active page

We added a checkmark on one side and an 'x' on the other (confirm or cancel) and made both larger to improve visibility

We changed to a tab form to show the active page more clearly

Icon issues

Several users did not associate the 'shopping bag' icon with creating a photo book

Users were confused about the "upload" icon and concerned it would send their photos to a text or post

We changed the shopping bag to a custom book icon

We switched to a paper airplane button, but then switched to a "Done" button and displaced the account avatar to improve usability

Introducing the new LittleHoots app!

Take a look at some of the major updates we made to improve the user experience for busy parents.

Adding a new family member

The process to add a family member or friend to your account.

The new process of adding a family member to the platform is streamlined with fewer steps within a new “Account” section—where users can quickly see their family in one place, alongside their own account details and information.

Drafting a Hoot (Memory)

Draft a Hoot process with easy access and saving.

Users were drafting their Hoots in emails or notes on their phone because the previous LittleHoots did not have a draft function. Now, users can pause their draft at any stage and never worry about losing or forgetting what their kids have said.

Designing a Hoot

The process a user would take to design and customize their "Hoot"

Users unanimously expressed wanting the ability to customize their Hoots, add sophisticated designs, and have greater ability to edit past Hoots. We developed a robust editing and customization design tool right in the app for users to have much more choice in their designs, which according to testing, already boosted the value of the LittleHoots product.

Selecting & sending Hoots to Chatbooks

The process a user would take to select the images/Hoots they'd like to create a photo book with.

One of the greatest values that users identified with the LittleHoots app is the possibility to physically memorialize Hoots into a photo book. We designed an integration with Chatbooks for users to select their Hoots right from the app, and seamlessly customize in Chatbooks.

ADDITIONAL PRODUCT HIGHLIGHTS

✨

And there's more!

We created several additional features to improve the user experience. These include:

iPhone homescreen showing LittleHoots widget

An iPhone widget for quick draft access right from the home screen

iPhone home screen showing LittleHoots app home page

Dashboard with memories to resurface past Hoots and funny stories

iPhone homescreen showing LittleHoots notifications

Push notifications to remind users to finish drafting their Hoots

Welcome to the PoliFolio App

Take a look at some of the major features we incorporated to aid users in their access, organization, and understanding of insurance.

Single sign-in and policy dashboard

Home dashboard with all policies available

My team and I knew that PoliFolio needed to come across as immediately valuable and trustworthy from the get go—so we decided to use a single-sign on API (Okta) so users would feel confident signing into all accounts through PoliFolio. We created a dashboard of individual “insurance cards” (a truncated version of their policies) to live on the main screen, and made these scrollable so they could quickly access the policy they needed.

Adding new insurance to the app

Process of adding a new insurance policy to the app.

We wanted one of the core features of the app to be an easy way to add new insurance to the app—as users expressed changing insurance frequently with new jobs and other life changes. Here, they can add a new policy to their dashboard by seamlessly finding their insurance provider and adding their policy number.

Combining and scheduling payments

Viewing all billing schedules together, with option to combine payments

Some of the biggest pain points were heard from users was about hidden fees, payment scheduling, and unknown bills. PoliFolio pulls all insurance fees and bills into a single app and offers a place to both view these details, as well as combine all premiums into a single annual or monthly payment.

Viewing your benefits

Dashboard of benefits across accounts

Users overwhelmingly expressed annoyance with realizing their benefits had expired and they didn't know about it. PoliFolio provides users with a dashboard of all their benefits across accounts, so they understand what to take advantage of before losing things like a healthcare visit or a flexible spending account balance.

SKETCHES

Early design concepts

We took these core features into our design studio, to start to sketch out wireframes and user flows. We wanted our end product to accomplish the following, so we focused our designs here:

‍

Locating the nearest site to drop-off compost
Finding helpful resources, like what can and can’t be composted
Viewing personal composting statistics and data on their contribution to positive climate action

Below are some of our first sketches from Design Studio.

Sketches of early concept designs for Compost USA app

Homepage/Dashboard

Local services and geo-location screens

Educational resources section

Visualizing and quantifying impact

MID-FIDELITY → HI-FIDELITY USER TESTING

Testing with users

In order to see if our product was helpful to users, we went through two rounds of usability testing, with a total of 14 users. We gathered feedback and data and made revisions to address problem areas. After our first round of feedback, we updated our designs to hi-fidelity.

‍

Below are the major areas for improvement we gathered from our users over two rounds of testing:

"These button names are too similar.."

Screen image of compost app home page in black and white

Users were not sure what the difference was between "How it Works" and "Education" buttons

Screen image of compost app home page in color

We changed "Education" to "Educational Resources" and "How It Works" to "About Compost USA"

"What is the difference between 'pick-up' and 'drop-off'?"

Users were not sure what “Local Services” meant on the homepage

Users did not immediately know the difference between “pick-up services” and “drop-off services”

We added more details about pick-up and drop-off rather than using “Local Services” on the home page

We incorporated helpful diagrams and additional language to help users understand their options

Location unknown?

Screen image of compost app location service in black and white

Users tried to enter their zip code because it was front and center on the screen, but we also showed the location as Denver

When users selected a local site on the app, it wasn’t clear to them which they had chosen

Screen image of compost app location service in color

We created a delayed pop-up to show users that the app was detecting their selection, and they wouldn’t need to enter a zip code

We made a micro-page for each individual compost site so users could find relevant details

Introducing... Compost USA!

Take a look at some of the major features we incorporated to aid users in their compost journey.

Convenient compost drop-off locations and pick-up services

Process of finding a local area to drop off compost

My team and I knew that one of the biggest hurdles for users was lack of local resources and infrastructure to make composting work for them. We wanted to prioritize accessibility to these resources first and foremost, both to show users where they could take their compost if their city does not pick it up, as well as a service to have someone come collect your compost on a schedule that works for your household.

A new hub of accurate educational resources

Screens showing trusted educational resources on composting

In our research, we discovered that many people have a vague idea of composting, but it hasn't become a daily part of their life because they feel like they wouldn't do it correctly. They expressed frustration with the amount of resources online—sometimes conflicting—and didn't know which to trust to get started. We've put together an Educational Resources page to be a composting knowledge base for users to find exactly what they need.

Impact dashboard shows your personal contribution

Dashboard with personalized compost impact

We learned from users that it's not always easy to change behavior unless you are (a) incentivized to do so and (b) can see your direct impact. We knew we'd have to create some sort of validation and digital representation of each user's impact, to encourage them to continue to compost and contribute to climate action. We designed a dashboard to measure metrics like pounds composted, soil replenished, food diverted from a landfill, and more.

🖥️ Don't forget desktop

Desktop view of Compost USA

Because a website as resourceful as Compost USA will often be viewed on a desktop or laptop, we created a responsive desktop view. Users can now find the same experience of Compost USA on both mobile and desktop.

NEXT STEPS & REFLECTION

In the rearview

‍

Next steps:

If we had more time as a team, we would have loved to:

Build a tour/tutorial to highlight changes for both new and existing users when they open the app, to get accustomed to new design updates
Add a flow that allows users to select photos within the “My Hoots” page and add to a photo book (rather than having to go to the book/shop icon first)
Test the new design with existing users, to understand and assess how they like the new experience

‍

Reflection

This project started out as a seemingly massive scope for a 3 week sprint— to evaluate the existing app, scrap parts of it that weren’t drawing in users, and re-design the full thing with user-tested insights. But as soon as we dove in, we could prioritize and manage client expectations to map out the project appropriately for the time given. Here are a few of the lessons I learned:

‍

Business strategy <> UX 📈

I really enjoyed the cross-functional role that my team and I could play on this project. Not only were we UX designers, but we were also making research-informed business strategy suggestions which have already helped LittleHoots prioritize its core features and stand out in the things it does really well: capturing, designing, and sharing the “pint-sized” perspectives of kids. Ultimately, our goal was not only to improve the UI and usability of the app, but to reestablish its unique value proposition to users, think long-term about resourcing and up-front investment in necessary features, and to set itself apart from other memory keeping apps as well as the likes of Instagram and Facebook.

Next up

PoliFolio

All your insurance policies, in one place.

I designed a responsive website for home composting, including pick-up/drop-off, resources, and data tracking.

Compost USA

Easy and accessible composting for all

Memory capturing made easy

‍

Enter LittleHoots: The mobile memory-keeping app helping families worldwide capture over half a million quotes, conversations and stories with their children. My team and I redesigned the LittleHoots app to make memory keeping easier, more customizable, and more valuable for parents.

Challenge

🎯 Project Goals

🌱 Design Opportunities

THE SOLUTION

A better way to save and share those funny moments with kids

01

02

03

Impact

17.76 seconds faster

26.7% more direct completions

4.8/5 easiness rating

My team and I were able to give parents more control, customization, and an easier experience with their memory keeping from the redesigned LittleHoots app. How did we go about this process of redesigning?

Read more about my research and design process below ⬇️

THE EXISTING APP

How was the existing LittleHoots app performing?

Key takeaways

THE EXISTING APP

How was the existing LittleHoots app performing?

Key takeaways

THE EXISTING APP

How was the existing LittleHoots app performing?

Key takeaways

Key takeaways

Key takeaways

BUSINESS RESEARCH

Taking a peek at the competition 👀

Key takeaways

Key takeaways

IDEATION

Prioritizing features

Key takeaways

USER RESEARCH & SYNTHESIS

What did we hear from users?

Key takeaways

Who are we designing for?

What do users need?

Key takeaways

IDEATION

Prioritizing most-needed features

Eliminating features

Must-have features

Who are we designing for?

What do users need?

Key takeaways

IDEATION

Prioritizing most-needed features

Our must-have features included:

SKETCHES

Early design concepts

SKETCHES

Early design concepts

MID-FIDELITY → HI-FIDELITY USER TESTING

Testing with users

Minimizing distracting details

"I didn't know which category or button to select"

Confusing flow

MID-FIDELITY → HI-FIDELITY USER TESTING

Testing with users

Flow confusion

Visibility troubles

Icon issues

Introducing the new LittleHoots app!

Adding a new family member

Drafting a Hoot (Memory)

Designing a Hoot

Selecting & sending Hoots to Chatbooks

ADDITIONAL PRODUCT HIGHLIGHTS

And there's more!

Welcome to the PoliFolio App

Single sign-in and policy dashboard

Adding new insurance to the app

Combining and scheduling payments

Viewing your benefits

SKETCHES

Early design concepts

MID-FIDELITY → HI-FIDELITY USER TESTING