نوفمبر 08

2016: The Tale of the New Logo & Updated Design

Oooh, something looks a little different! After blogging for 10 years, it was time for a fresh look and feel! Our new logo was designed by the very talented Tara Esposito (highly recommend her; she was fantastic to work with, creative, and even the initial comps were all logos I could have seen used). From there, we spent the last three months working on an updated design with a lot of changes to the code itself. The redesign process was focused on two aspects: 1) improving the user experience on mobile (and small devices), and 2) improving consistency across style and elements across the site. Temptalia is a lot more than just a blog, and we recognize that it can be completely overwhelming, especially for readers who are newer to the site!

For mobile, we tried to address the following: 1) more important information within the first screen as much as possible, 2) reduce scrolling, 3) minimize unnecessary space on left/right/top/bottom to maximize what you see one each screen. When it came to consistency in styling, it was primarily about using the same terminology more consistently throughout the site along with simplifying product badges and then using different sizes. It was also about further prioritizing what actions are available and where, and being more in sync about what pieces of information are most important on the blog, compared to the Dupe List or the Foundation Matrix.

As always, please let us know of any errors either in this post or if it seems like a larger issue, please don’t hesitate to reach out to Nick at nick[at]temptalia.com.

Below, I’ll discuss some of the larger changes made:

Reviews

One of the largest and most visible changes to all users will be how we have set-up reviews and images for reviews. The change was initially driven by trying to make it easier to view and read through posts on mobile and tablet (smaller screens), but we also felt that there was real value for desktop (larger screens) readers as well. Occasionally, I have received a comment about readability of a review or how it flows, as a shade’s rating and photos are both separated from the text portion of the review when there are multiple shades being reviewed. There’s also the issue that we call the “sea of dupes” when they’re written in paragraph form, along with it being harder to have multiple paragraphs (so instead, one long paragraph).

For the majority of reviews, the review ordered in the following way: images (in a slideshow), shade name, written review, list of dupes, and rating information — for each shade. We hope that this helps organize the review and make it flow in a more orderly fashion.

The slideshow takes advantage of the gestures on touchscreens, which should make it easier to “scroll” through photos and skip over the shade(s) you’re less interested. On larger screens, like desktops, it makes it easier to compare and contrast photos–e.g. comparing how a product looks in the pan (or tube) compared to swatched or a lip swatch in direct light compared to indirect light as we went for larger thumbnails, so you would get a good idea of each photo and whether you wanted to see it in full-size. It will also allow you to easily read the review, compare what I’ve said (“it’s patchy”) and see the photo right above it without having to scroll through several other reviews and/or upwards of 15 photos! For an eyeshadow palette review, where each individual shade may only have two photos, you won’t see a slider but will find all the photos at the end of the post (as it was in the past)–we felt like that was the point where the slideshow lost its value and became ornery and unnecessary.

By creating more defined headers, like the shade name, it will make it easier for to split paragraphs and improve readability. We found that the bulleted list of the dupes seemed to be the most efficient (in terms of space) and easiest to read as we went through several renditions of how we might display them. The Glossover’s only change was placement, so the system, scores, and the like are the same as before.

Product Database

We wanted to make it easier to search through our product database of reviews/photos/swatches to find what you’re looking for. You can still search for a specific shade or formula, but you can also browse by type (price and availability) or brand. When you search by type, say eyeshadow under $20, the results page has been improved to give you more results for each screen. When you search by brand, you’ll be directed to the brand’s overview page, which includes stats like average ratings, most wanted and most loved by the community, as well as recent reviews.

Other changes:

  • Added Ingredients field; will display when ingredients are available
  • Palettes/Shades from Palettes have better visual representation when relationship exists
  • Improved image slideshow for shades

Palette vs. Palette

We have adjusted how Palette vs. Palette works by focusing on giving similar shades, even they might not be dupes, while highlighting actual dupes (that are in our database of dupes). It will also go shade by shade to pull in similar shades (which are based on how I have classified each swatch for color, undertone, and finish), which should give you a little more overlap between palettes than if we only showed you true dupes.

   
  Booking.com

Permanent link to this article: http://www.aldhahranmall.com/archives/6303