Ecommerce Website Design: Information architecture (IA), Paper Prototype and Wireframe
Comprehensive and intuitive e-commerce website that would meet the needs of target users
I have analysed areas that need interfaces, produced interactive wireframes/prototype that was used by developers to develop the organisation of the website. I also did a lot of information architect and UX designing in the process.
User task flows
I created user experience task flows to the main interaction decisions for a user when searching for a product. It allows me to interject the user into the flow of the application and define if the theoretical model agrees with the user model.
Ideation / Brainstorming
Paper prototype lets me create various design options in a short amount of period. So I start my design phase by making paper prototype as these allows me to evaluate which design pattern will work best for the product. Paper prototyping is a method that allows you to make and test user interfaces quickly and inexpensively.
Wireframe
After a few rounds of revisions on paper prototype I transitioned them into wireframes. The work included applying information architecture, defining interactions and behaviour of website screens and their elements. Overall, It helps me to quickly get feedback from stakeholders and team members.
Specification
1. Website Header
1.1 Brand logo, Index Return
1.2 Loged in User name
1.3 Global search
1.4 Account navigation
1.5 Service Offering
1.6 Shopping cart and Checkout link
1.7 Main Navigation & Sub Categories
2. Quick Find
3. Promotion Banners
3.1 Banner slider
3.2 Offer text, Links to product page
4. Deal of the Day
4.1 Product photo, links to product details page
4.2 Average rating + number of reviews, links to review section on product details page
4.3 Product name or description
4.4 Product Price
4.5 Actual Price and Offer Percentage
4.6 View all button, links to product details page
5. New Arrival
5.1 Product photo, links to product details page
5.2 Average rating + number of reviews, links to review section on product details page
5.3 Product name or description
5.4 Product Price
5.5 Actual Price and Offer Percentage
5.6 View all button, links to product details page
6. Best Sellers
6.1 Product photo, links to product details page
6.2 Average rating + number of reviews, links to review section on product details page
6.3 Product name or description
6.4 Product Price
6.5 Actual Price and Offer Percentage
6.6 View all button, links to product details page
7. Most Reviewed Items
7.1 Product photo, links to product details page
7.2 Average rating + number of reviews, links to review section on product details page
7.3 Product name or description
7.4 Product Price
7.5 View all button, links to product details page
8. Gift Voucher
8.1 Voucher Graphic
8.2 Voucher promoting text
8.3 Get it Now button, links to voucher purchase page
9. Newsletter Signup
9.1 Mail ID Entering field
9.2 Subscribtion Button
10. Website Footer
10.1 Trusted, and Common Payment
10.2 Quick links, links to each page
10.3 Social media Icons, Links to Social media page
10.4 Contact Details
