Isometric Banner - Small.jpg

Carter's

 Carter’s Case Study

Deliverables: iOS mobile app, wireframes, animations, and prototypes.

Role: UX/UI Designer on a team of 3, Nov 2019 - May 2020

Client: Carter’s is the leading brand for baby and kids clothing in North America, as shown by their impressive 25% market share for baby apparel and 13% market share for toddler’s and children’s apparel.

Isometric Banner - Small.jpg
 

The Challenge

Multiple shifts were happening within Carter’s that needed to be addressed within this new mobile app experience. With the acquisitions of the household brand Osh Kosh B’Gosh and lifestyle brand Skiphop under their belts, Carter’s was worried they would confuse their customers if they included three brand identities in one app. Another source of concern was addressing customer retention, as the market share from the baby to child apparel diminishes significantly. Lastly, Carter’s was hyperaware that the incoming wave of parents would be mostly millennials, and they wanted to cater to the shift towards a non-frustrating mobile shopping experience.

 

The Solution

We envisioned an app that was more than just the shopping experience. During the onboarding experience, parents could sign in and create profiles for each of their children. We then used this information, such as age and gender of the child, to create customized home feeds, filter straight to their relevant sizes on shopping pages, and even offer rewards when the child grew to a bigger size or passed a birthday. The three brands would combine their products seamlessly throughout different shopping categories and sizing, but not as separate destinations within the app. In this way, we hoped that the experience of their baby growing up with Carter’s would incentivize the parents to remain loyal Carter’s fans. 

Home.png

Home Page

Categories -- Toddler Girl.png

Shop Categories

Product Landing Page

PDP.png

Product Detail Page

Cart

 

The Process

I began by wireframing out some possible solutions to the problems presented. There were many details of each page that I wanted to include. For example, in the Cart alone, I explored many ways to add and remove things, how to show the accumulating rewards, how to edit the style and quantity options, how to add coupons, and the type of incentives and placement of them (e.g. $3 away from free shipping). Here is the wireframe with three flows for removing items from the cart:

Remove from Cart Wireframe.jpg
 

Here is the wireframe for the filter and sort exploration:

1. Product landing page (PLP)
2. Expanded filters view
3. PLP with filters applied
4. Scrolled down view where filter cards at the top collapse
5. Even further scrolled down view which causes the blue scroll bar at the top to grow to indicate user’s position on page. Here we played with a pop up button in the bottom right that when pushed would bring the user all the way back to the top of the page. Around the page up button was another blue scroll bar that indicated the user’s scroll position within the page.
6. What the PLP would look if the filter for the child “Claire” were selected. Claire would be a personalized profile that includes size, gender, and age that the parent can edit in the Accounts page.

 

Design System

In tandem with wireframing, our team set out to finalize a UI kit or design system that we could insert in our Sketch files as symbols. This was useful especially in Sketch Cloud since we could update symbols, and have each iteration automatically update for each team member.

UI Kit.png
 

Animation & Prototyping

Here are some of our animation explorations that I created to present our cases for specific design decisions we made to the client. 

Product Landing Page Scroll Animation

Add to Cart Exploration

Interstitial Rewards Exploration

Onboarding Flow

 

Other Explorations

Other ideas I came up with that didn’t end up in the final version were special features within the app as the user entered a geofenced Carter’s store. Once the app sensed that the user was within a geofence, we thought of pulling up options to easily call a store member for assistance; scanning items to search for prices, reviews, and other similar items; as well as a map layout of the store for easy wayfinding. 

I also considered a community aspect to the app, which manifested as a whole feed with an ambient chatroom, relevant content pieces, a forum where parents could chime in on topics, and a way for the user to generate more rewards through participation. In turn, this participation would help associate the Carter’s app with a positive place for a new parent to go to, instead of just shopping.

More ideas I had:

Example Mom’s corner in nighttime mode with personalized encouraging messages.

Example Mom’s corner in nighttime mode with personalized encouraging messages.

Generate an outfit with the item selected, or generate an outfit with the Carter’s items you already own.

Generate an outfit with the item selected, or generate an outfit with the Carter’s items you already own.

 

Conclusion

I was happy to have collaborated on an app that would not only reach such a wide audience with a positive impact, but also include so many new features that both the team and the client were huge fans of. Most importantly, I loved that we included a customized feed and shopping experience through the creation of the children’s profiles, that lent to a whole new experience that hasn’t been seen on other e-commerce apps. Unfortunately, as Covid-19 hit, we had to hit pause on the development of this app until later 2020.