
Personal Project
Duration: 3 weeks
Deliverables: Research, user scenario, Initial sketches, flowcharts, proof of concept
Problem Statement
To build an E-Commerce Website and Data visualisation of the website. It needs to be as comprehensive and detailed as possible. The product has to provide users sufficient information and enable them to buy it online.
Process

Research - Brand understanding
Corporate Casual Range – handmade shoes. Famozi redefines designing footwear to suit the fashion interests of the global style conscious consumer. The footwear collection is largely targeted at the fashion conscious men. Famozi Varieties includes Drivers, Loafers, Boat Shoes, Derby, Oxfords, Boots, Mules, Chukkas, Sandals and Slippers
Vision
The brand mainly believes in creation of iconic brand globally, with an Omni channel presence. They believe in adding a casual touch to the everyday life with their charm and let their customers discover the fun side of life.
Competitors
Hats O Accessories
The Shoe Factory
Knotty Derby
Alberto Torreri
Dnuvo
Hemmistry
Research - User Research
Target Audience
Age: 15 - 40 years
Gender: Male
Economic Class: Middle & upper middle class
User Research - Google survey results
The survey form was sent to different age groups, ranging from - 10--50+ years to almost 19 people.
However, nearly 57.1% were from age group - 25-32 years.
Some results from the survey were as follows:
1. 85.7% men needs knowledge about the shoes they are buying
2. 64.3% men considered reviews sometimes before buying the shoes
3. 35.7% men spend almost Rs.2500 - Rs.3000 on their shoes
4. 35.7% men takes almost an hour to decide the shoes they want, however 28.6% men take only 10-20min
5. 42.9% men prefer to buy online because they feel they get more information online
Persona


Plan - Information Architecture
Business Goals
Creation of iconic brand globally, with an Omni channel presence, Famozi focuses on trendy designs at affordable pricing. The future venture of Famozi would be on Men’s corporate bags.
User Goals
Easy to shop their required type of shoe - Have a clear understanding of their shoe sizes and materials of the shoes - To get a prompt service from the company
Plan - Task flow

Plan - User Flow

Understanding of Product UI requirements with respect to programming
Depending on the tasks user is performing on the website, the UI components have been drawn and also the backend data processing is also worked out simultaneously. In order to understand the backend data requirements UML, ER and data-flow diagrams were drawn.



Build - Wireframe
Wire-framing was done in Axure and the wire-flow is as below

Build - Visual Design
Style-tile was built to capture the emotional aspect and visual language of the website

Visual Mockups



Site Analytics - Data Visualisation
A dashboard was designed to aid the business and provide useful analytics. With the help of this, the business can take right decisions and target right audiences.

The homepage of the dashboard shows an overview of the business. It has following details:
- User traffic for that particular day: Admin can view this data for different time periods. A line graph is used to illustrate this information
- User registration details: Admin can view how many people have registered into their system per week. They can further view according to time stamp of a particular day. A bar graph is used to illustrate this information efficiently
- Product details: A bubble chart is used to depict this. The bigger the circle, bigger is the order and the colours will differentiate the category the product falls in
- Daily Sales: Sales of the day with respect to timestamp is provided for the users to understand when they get most of their businesses

The following page deals with the user behaviour. It aids the business, user researchers and sales team to understand and find the right place to target their audience. It has following details:
- Location wise, user visits: Admin can view from which location of the country the users are mostly visiting the site. He can view for different dates, weeks and months.
- Page view and average time on page: Admin can view overall how many people have come to visit the site and also see how much time they spend on a particular page. Admin views this with respect to the timestamp of a particular day
- User behaviour: Admin can watch the flow what users take. This provides a crucial information for business, User researchers and designers. They can view on what page there are more bounce rates and also follow the flow till they complete a transaction
- Search: Admin can view the keywords which are mostly searched for in the site. How many searches happen and how much time a user spend after the search takes place.

This page shows the financial health of the business. It has following details:
- Daily Sales: Admin can view the sales order information. The line graph helps him to view total sales and sales from different sources - parent site or online sites
- Costs Incurred: This bar chart gives the picture about the costs incurred by the company. It shows in week-wise, the direct, indirect and over head costs of the company for a particular month
- Revenue Generated: This is the most crucial aspect of the company. This determines if the company is incurring profit or loss with respect to that month of the year
- Sales from Other Websites: This graph determines which website is giving most sales to the product
- Revenue by Product Family: The scatter graph is used to determine the revenue generated by a particular brand, colour etc.,

The last tab in the dashboard would give the admin an overview about the inventory. It has details about products which are in stock. It gives information regarding what category of shoes needs to be furnished and what colour. Once the stock goes below a threshold value, the colour on the graph becomes red.
A POC was developed with the help of a professor in my college. The programming was done with PHP and for data visualisation Google analytics was used.
Conclusion
Learnings
- Learnt about different graphs and their uses
- The project helped in learning the programming skills required for generating the visualisations
- Learnt there are other programming languages which helps in creating more interactive and usable. This can be adapted in the later courses
Next Project
Tour Genie
Tour Genie is an online travel solution for India. They help in curating trip for North East India, Nepal and Bhutan. Their mission is to be the Genie who will fulfil the wish of a perfect holiday; to find the right travel services for a memorable experience, that one can cherish forever.