CookieJar

iOS app for a delivery service

CookieJar Screenshots
CookieJar Screenshot

Brief

Cake is a fun social media app that kids can use to share their moods with their friends. They can pick from a variety of characters to choose their current mood. Then they post to their network and their friends can like or comment on their post. They can also see what other people nearby are posting and make new friends in the app.

My Role: I was brought in to lead the user interface and interaction design of this product while working with developers and the product manager. This iOS app was developed by T5 Labs, Inc.

1    Taking Stock

T5 Labs, Inc. already had a prototype of this product but wanted some deeper UX and UI support. My first task was understanding the product team’s vision and what they had built so far. Due to the tight deadline they had before the app’s launch, the scope of changes that could be made was very limited. The first priority was to fix the design of the app so that it matched the functionality of the website. After talking with the product team some more, we also made it a priority to at the very least conduct some rounds of usability testing so that the app met the bare minimum of a working user experience before the launch.

2    Quick UX & UI Fixes

UI Design

First I cleaned up the UI by standardizing the icon styles and visual design treatment of UI elements. A defined color palette, consistent icons, and enforced typographic rules quickly brought together and polished the look of the product without undue developing or design time.

Interaction Design

Matching the app design to the functionality of the website meant filling in the holes in the user experience. I designed some additional screens; mainly the shopping cart and checkout. I was also asked to create some UI animations that the product team felt would add additional polish to the app.

Usability Testing

The first round of usability tests revealed that the app had major navigational issues. Products hidden underneath the fold without an interaction affordance meant they had very low discoverability. Due to the vertical scroll, users were also less likely to swipe left/right for different product categories, which was another discoverability issue. I quickly sketched out some more concepts and after running it by some coworkers, I started to create another prototype using Pixate. I chose Pixate as my prototyping tool for this product because it is a layer-based prototyping tool that would allow me to test the interaction of the header as separate from the screen underneath. The design I sketched out emphasized the product categories by placing them in a sticky header, and a downwards arrow with a label cued users in to more flavors underneath the fold.

3    Preparing for Launch

I also created marketing materials in preparation for the app's launch. Since the products would be delivered to the customer via a truck, the product team asked me to create a truck design that would stand out and easily garner interest as a marketing tactic. I also created posters and cards for promotional events.

Truck Design
Poster Designs

4    App Launch and Beyond

After the app launched, there was still a lot of improvements to be made to the app. Given that the quick design fixes made before the launch were reactionary in nature, I felt that the app design could still be more integrated with the rest of the visual language of the product. Additionally the products could be given greater emphasis to more quickly create user engagement. To demonstrate, I created another app design that showed what the app might look like if it were not constrained to the original design.