Application UI, Website UI, Responsive Web Design

Incentives Program Redemption Site

Project Goals

Create a responsive experience where participants in incentive programs can redeem their points for gift cards or merchandise.

Challenges

  • Current experience still uses a table-based layout, will need to convert to divs
  • Must re-develop sites to be be fully customizable by users with the aide of admin design tool
  • All aspects of experience must be fully responsive
  • Sites must still load quickly and retain all functionality as before

Hypothesis

Introducing a framework such as Bootstrap will not only ensure sites are completely responsive, but also expedite rate of production. In addition, employing the use of SCSS will allow for the creation and use of variables that can then be integrated with the admin design tool, making it simple for users to modify site properties.

Lo-Fi Wireframes

Login Screen
Home Screen
About Screen
Shopping Screen

Color Palette

Primary#001a49
Secondary#1dace3
Neutral#dce9f4
Accent#e9327c
Text#64595e
Heading#302b2c
Light#ffffff
Color Distribution

Typography

Font Family Roboto

Aa Bb Cc DD Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Xx Yy Zz 1234567890
Aa Bb Cc DD Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Xx Yy Zz 1234567890

Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus officiis enim dolorem saepe molestias voluptates voluptatem ullam nihil deleniti in.

Hi-Fi Wireframes

Click on thumbnail to view larger image.
Login Screen
Home Screen
About Screen
Shopping Screen

Prototype