HeaderSIS.jpg

IS480 Team wiki: 2012T1 Shopaholic Development Plugin

From IS480
Jump to navigation Jump to search
TeamShopaholic.png
Our Team   Project Overview   Project Management   Development   Learning Outcome   Documentation


|

Initial Brainstorm

| Function List | User Tests | "Tag & Bag" Plugin | D2T9 Portal |


Flow of events when the "Tag & Bag" Button clicked

Shopaholic BagIt flow diagram.png

How data is Captured

Step 1 Step 2 Step 3 Step 4
  • Merchant URL
  • Product URL
  • Currency
  • Product number [input]
  • Product Name [input]
  • Price [input]
  • Color (Available) [dropdown]
  • Size (Available) [dropdown]
  • Picture x1
  • Product Category [dropdown]
  • Default Price [hidden]
  • Chosen Size
  • Chosen Colour
  • Custom Field
Back to Top

Our Robust Framework

Our Designer View How it Works?

Plugin designer view.png

Our framework allows us to be robust enough to quickly adapt to changes in merchant sites, and adopt a new site quickly.

In our designer view, it is able to identify regular expressions.
This would then help to identify where the information we need can be captured from.

The information captured would then be displayed to the users, where they would then select their desired item attribute before they 'Tag' or 'Bag' the item.


Back to Top

Interface Considerations

Inspirations from currently available "pinterest-style" sites

Since the birth of Pinterest, many have been tapping on the concept of "Pinning" images, where the image, and the data related to the image is being captured, and kept for own's bookmarking/scrapbooking purpose. The concept of "Pinning" objects is simple. One just simply have the bookmarklet on the browser's bookmark bar, and it works! No cumbersome installation is required.


We realised that this tool is very useful if we could incorporate it to the current Spree model in Singapore. It had a lot of potential to revolutionize the way people spree, as the process of spree-ing is breing eased tremendously with this "pinning" tool.

Users can happily click away to "pin" the images of the things they fancy, with all the details of the items being captured at the same time. Afterwhich, they can return to review all the items they have "Pinned" and proceed to confirm their purchases with the Spree Organizers.


We researched on how this tool is being used to come out with the best way to use it to our advantage, and to come out with the best design for great usability.

Pinterest Listly Nuji

Pinterest is a Virtual Pinboard.

Pinterest lets you organize and share all the beautiful things you find on the web.
People use pinboards to plan their weddings, decorate their homes, and organize their favorite recipes.
Best of all, you can browse pinboards created by other people. Browsing pinboards is a fun way to discover new things and get inspiration from people who share your interests.

Listly helps curate lists of things people care about inside your blog posts.

Collecting and sharing our passions is the new norm.
Sharing is shifting to live embeddable content, so you can share content, community and engagment across multiple blogs.

Nuji is your social wish list.

Nuji helps you save and discover products you love from all over the web.
With Nuji, you can save items you like from any online store using our simple bookmarklet.
Also, you can follow people with similar taste and see what they're discovering. It's an easy way to find new products you like and save the ones you want to your wish list.

Shopaholic-Pininterst-2.png


Shopaholic-Pinterest-1.png

Shopaholic-Listly-plugin.png

Shopaholic-Nuji-1.png


Shopaholic-Nuji-2.png

Back to Top

Challenges Faced

For different product types, there would be different attributes which would require users to select. Hence, our plugin needs to be robust enough to be able to detect all the attributes which users need to select.

Here is the example of the different attributes which needs to be captured for different product type, taken from Victoria Secrets Clothing Section:

1200X1000px


Back to Top

"Tag & Bag" User Interface Design - Initial

The Design

Shopaholic Tag and Bag Design Explained.jpg

When users click on the "Tag & Bag" bookmarklet, this side bar will appear on the left side of the screen.
Details of the product will be captured from the page.


Feedbacks Recieved What we plan to Implement
  • "+" Sign is the same size as Tag & Bag. Do not understand it's purpose of being there.
    • Should not be shown when no additional attributes needed


  • Attributes shown should be customized based on category type chosen


  • Tag & Bag button users need tooltips


  • No option to add quantity


  • Colour of "Category" field unappealing


  • The “<” & “>” sign confusing. Do not know the purpose of it is to change to the next item image.
    • Should be placed next to the image instead.


  • Unable to find "Close" button at bottom. Should follow the conventional way of putting on top left hand corner


  • Image is not optimized to fit nicely.


  • Should give option to return to D2T9 homepage after putting items in "Bag"


  • Easy to use once users fully understand the functions
  • Removing the HOME button on the plugin


  • Tooltip is to be included for the portal


  • CLOSE button for the overlay position is to be shifted to top right


  • Additional option to return to D2T9 homepage after item is added to "Bag"



The described changes would be something as shown below:

Portal changes from UT1.jpg
Back to Top

"Tag & Bag" User Interface Design - Final

Tagandbagfinal.png