UX case study - Curate.ly - single view
Curate.ly is a social platform that is similar to image based social sites such as Instagram or Pinterest, but the difference lies behind the tag where curated content from users is shown in the form of Products that can be shopped online, videos and articles.
A problem exists whereby users are not discovering the power behind the tag and losing interest before signup.
The premise of this project was to intuitively show the user what content lay behind the tag without interfering with navigation or preferably improving navigation.
1st iteration
- Layout updated to include a "tag selector" feature which would then show the information behind each tag at a glance in single view:
- Information includes: Keyword, category and colour of tag; Breakdown of enriched media - Product, Video, Article and subsequent info.
- Information is high level and further information is accessed by clicking on the product/video/article
- The stream of images being navigated through is also shown above in a scrollable thumbnail stream to add context to the image.
2nd iteration after 5 second test
- A 5 second test was performed to a handful of subjects specifically to test the visual hierarchy.
- It seemed the top stream needed some further context - heading added in.
- social buttons brought in from original design
- Explanation of all images tags displayed at the bottom of the image.
- Keyword, category and colour emphasised slightly less.
- "Curated by" context copy added above username
- Left / Right arrows moved to main container while top stream got a scrollbar.
3rd Iteration
- We went further to include ALL of the information behind the tag in this view
- We created a tab based view of the information giving us more space to show info and recommended products/videos/articles.
- We included further contextual information of community products/articles/video instead of linking straight to 3rd party site.
- This iteration strives to keep most of the sites navigation within one view thus simplifying the experience considerably.
- Responsive view designed too - all elements are modular and stackable.
Final UI Design
- Further space created moving tabs to top.
- More contextual alignment with Title, Category and Colour above image in line with tabs.
- Design refined to use slightly less of overpowering blue accent, now only in the tab thats selected and CTA's.
- Design refined to UI design and Information heirarchy also refined.
