imint

Aim

To design and develop the web portal of imint (now PAYBACK, www.imint.in), India’s first nationwide coalition loyalty and consumer rewards program.

Summary

The project was divided into 5 phases: a) gathering requirements, b) planning and design c) development d) Testing and Delivery e) Maintenance
From a UX perspective we used Jesse James Garrett’s elements of user experience to define the five phases for this project. We interspersed these elements of user experience into the overall phases of the project. In the requirements gathering phase, we started with defining the user needs, site objectives along with the functional specifications for the site. This was completed in collaboration with the development team continuously keeping in mind the scope of the project. In the planning and design phase we started with designing the interaction and the information architecture for the site developing wireframes and low-fi mockups. These wireframes were given a body by designing interface and the navigation design for the site. Finally these prototypes were used to create elegant visual designs for the site. In the development phase we worked with the development team to develop XHTML web pages who were using JSF and SPRING framework for the development.

My Role (What did I do, learn)

I was involved in all the phases of the project starting from responding to the RFP of the project. From a learning viewpoint this project introduced me to the basics of sales. With discussions, information sharing sessions, and giving presentations to show them the potential usability problems in their previous website I played an instrumental role in getting this project for our company. I was part of the team defining the scope and gathering requirements for the project. I was also involved in generating use cases for the project. I later worked on designing the information architecture, navigation design, visual designs and XHTML web pages for the site. I also learnt a lot working closely with the development team throughout the course of the project.

Design and Methodology

The project started with the requirements gathering phase involving numerous interviews and meetings with the clients and stakeholders. This helped us in preparing the creative brief, defining functionality required and the scope of the project. Following this we developed the use cases in collaboration with the development team who was responsible for developing the back-end of the project. In the next phase, information architecture of the site was built and low-fi mock-ups were designed and tested (cognitive walkthrough). Based on the information architecture and flow, wireframes were developed and a loop of feedback, iterations and approval was initiated. After the skeleton design of the site was completed, the wireframes were converted into elegant, usable visual designs based on the existing theme of the company’s motto and vision. Colors and graphics were used primarily in accordance with the company’s style guidelines. Visual designs were converted into web pages using XHTML, CSS and JS strictly in accordance with guidelines set by the development team. Bi-weekly doubt clearing sessions helped us understand the issues and concerns of the development team. It was a great learning experience working closely with the development team on JSF and SPRING framework.

Workflow
Information Architecture
Home Page - Option 1
Home Page - Option 2
Home Page - Option 3
Catalog

Overview

Collaborators
Shreyas (UX), and the development team

Methods Used
User Research, Client Interviews, Task Analysis, Cognitive Walkthroughs, Card Sorting, Wireframing, Hi-fi mockups

Technology Used
XTHML, CSS, JS, PHP

Client

IMINT

Services

6 months (Jan 2009 - Jun 2009)

Skills

User Experience
User Research
Visual Design
Web Design