web designer and developer

Gap Inc. P.A.C.E

September 2015

Gap Inc's P.A.C.E is a global initative aimed at educating and empowering the women who create clothes for the company. The project, which takes form as a reponsive landing page, aims at telling the stories of women who went through this program and gained the confidence and courage to "change their lives".

As the sole developer for this project, I worked closely with production and an offsite designer to develop the features for this the responsive landing page. Such features include: a fluid grid layout, a responsive popup (at extra large to large breakpoint) that changes to an slide-down content (at a medium to small breakpoints), a reponsive video player, and facebook and twitter share.

Pace

desktop:

  • When the hero image is engaged, a YouTube video will replace the hero image in that space and plays
  • When "P.A.C.E" Quick Facts is clicked, it toggles a section below the One Million Women intro, and above the grid displaying additional information about the initiative.
  • The images in the image grid that contains a "+" can be engaged. When clicked, a popup will launch, and will dynamically be populated with imformation, such name, country, quote & story of the P.A.C.E women. There will also be a carousel of images and/or a video featuring her.
  • The Facebook and Twitter share will launch their respective API

mobile:

  • When the hero image is enaged, a YouTube video will launch and per default video behavior on mobile devices, the video will fill the whole display. User will have to engage to play the video.
  • When "P.A.C.E" Quick Facts is clicked, it toggles a section below the One Million Women intro, and above the grid displaying additional information about the initiative.
  • The images in the image grid that contains a "+" can be engaged. When clicked, the desktop popup responsively turns into a hidden section will slide down (below the grid image) and display information about the P.A.C.E women, such name, country, quote & story of the P.A.C.E women. There will also be a auto-rotating carousel of images and/or a video featuring her.
  • The Facebook and Twitter share will launch their respective API

desktop:

  • The popup features an auto rotating image carousel or video to the left. To the right, it displays a quote, follow by the name and country of the P.A.C.E women, facebook and twitter share, and below that her story. When the story is longer than the area provided in the popup, a green scroll bar will show.

desktop:

  • If a popup features a video, when engaged, the video will fill the popup space. There is a back button at the top right corner of the video which will return the user to the default popup display (with story).

mobile:

  • On mobile, the content that would have been displayed in a popup on desktop, will populate below the grid image with the "+" when engaged.
  • The left and right content of the desktop popup will be showed stacked. If there is a carousel, it will continue to auto animate until a user engages.
  • If there is a video, and a user engages to play it, it will launch the default full screen video take over player. A user will have to re-engage in the full screen video to play the video.
  • The story will be displayed fully (no scrollbar).

Visit the Page