...
We use javascript and jQuery to implement the frontend. We did everything from scratch because we realized that most people will be using twitter bootstraps, and we wanted our website to look different. This comes with a cost. We made heavy use of css and custom graphic design to make sure that our interface looks consistent. All interactions (drag and drop, slideshow, mouse hovering, etc) were all handled using javascript, jQuery, or css.
We use ruby Ruby on rails Rails as our backend to handle our database, which was created by hand from google searches. All images were manually labeled. We also implemented cookie system to save user's preference in case they do not want to log in. routing, database, relations between data, and running algorithms such as analyze and pulling random images. Two separate modes are possible: cookie-based browsing when browsing as guest, and registered user browsing where data are actually stored in the database.
Images were taken from Google Image searches and were manually categorized. They are then seeded to the database.
The most tricky thing we find found was how to populate the display area in the browse page. We were hoping to display all the images we have, and separate them into pages, but this would complicate the mechanism that keeps track of image location on the display area, and we did not have time to implement it. For this reason, we decide to have a fix number of tattoo images shown in the random mode, which may be inconvenient if the user wants to browse the entire database.
...
Problem (#people pointed out the problem) | Analysis | Possible Solution |
|---|---|---|
1. Login Page: User mistook the signup form as the login form. (2) |
|
|
2. Browse Page: User is lost on what to do and start choosing different image categories while ignoring the Inkbox. (3) |
|
|
3. Browse Page: User missed the existence of the "add" round button when a mouse hovers over an image. (1) |
|
|
4. Browse Page: User overwhelmed by the number of images displayed and would like to have more tags on the images (body part and size in addition to style). (1) |
|
|
5. Inkbox: Analyze button completely ignored or confusing. (2) |
|
|
5 6. Browse PageInkbox: Analyze button clicked with an empty Inkbox. (2) |
| 6 |
. Browse Page: User overwhelmed by the number of images displayed and would like to have more tags on the images (body part and size in addition to style). (1 7. Inkbox/Profile: No history of removed image or unliked artists. (2) |
|
|
7 8. Browse PageInkbox: User tried clicking on the Trash Can icon but nothing happened. (2) |
|
|
8 9. Browse PageInkbox: User tried dragging to add images to the Inkbox. (1) |
| 9 |
10. Browse PageInkbox: User confused if Inkbox is collapsible; they tried clicking on the Trash Can icon but nothing happened.the "My Inkbox" text above the Inkbox. (1) |
|
|
11. Analyze Modal: Sample images for a given category were thought as selected/own images. (1) |
|
|
12. Analyze Modal: When browsing as guest, the text "Signup to like an artist" has no link to go to the signup/login page directly. (1) |
|
|
13. Analyze Modal/Profile: User would like to go to an artist page to see more details about artists listed. (2) |
|
|
14*. Analyze Modal:* User is not sure what exactly is being analyzed. (2) |
|
|
15. Profile/Artist Search: The behavior of the like/unlike button is confusing. (1) |
|
|
16. Artist Search/Artist Info Panel: No direct feedback on images that are already selected. (2) |
|
|
17. Undo: Undo message is too similar to an ad-blocker; it went unnoticed (1) |
|
|
Positive Feedback
- The interface is very clean and not cluttered.
- The login page is very artistic and structured.
- The zooming functionality works great and is really useful.
- Everything's working!