Best of Market - Listings
Elite Insights runs a ‘Best of Market’ campaign and has had tremendous success. With the growth we needed to revisit previous designs and adapt them in terms of usability. I was tasked with creating a new design for the listings page and doing the visual code (HTML/SASS). This also included inserting it into the previous PHP file and getting it to work with that.
Client
Elite Insights
Category
Web, UI/UX
Delivered
July 2021
The listings page is used to celebrate winners of the current year. It will show gold and silver winners for each category. We also offer premier listing packages where a business can pay to have a page dedicated to whatever they want, which is found through the listings.
Problem
At first glance, this was going to be a simple redesign. At the end of each contest, we put out a magazine dedicated to all the winners. This listing page was going to mimic that design. Time was short and they wanted it to be up and running for the next campaign (1 week). Upon further inspection and A LOT of zoom calls, I came to the conclusion we needed to spend more time on usability and push development back. In the long run, it would be more beneficial.
Design Problems
- Images were being cutoff
- Paragraph length was long, awkward and wanted removal of ‘read more’ button
- Badges could only stack up to 3 and even then visibility was an issue
- Visibility issues with text size and color
- No distinction between customers paying for premier page
- Awkward breakpoint designs
Objectives
The original goal was to find a cohesive balance between the magazine and web layout. As I mentioned before we realized there were a lot deeper problems and we weren’t taking advantage of the screen real estate. A lot of the users were stemming from reading the magazine but had complaints about scanning the listings online.
The new objective was to showcase winners similar to the magazine but also give a history of previous winnings. We also needed to sort and filter in a way that made more sense and give distinction to those who pay for a premier listing page.
Constraints
Within this year alone we have added 8 new contests and the biggest constraint was how much time would need to be devoted to development. I was working between the print team who received the complaints about the listing page and the developers who had their hands full and didn’t want to create functionality that would be too time-consuming.
I needed to find a balance between a design that could accommodate our biggest problems while creating minimal effort for the back-end team. Luckily the design and visual code would be done by me. This was originally a week-long project and timing, in general, was short.
Variations
I knew I wanted to incorporate cards because they followed the same layout of the magazine. The next thing I did was get rid of the overlapping badges because you had a limit of 3 anyway and by the 3rd badge you couldn’t see what badge was represented. Instead, I added a section called ‘previous years won’. This simplified the medals by the year and whether it was gold or silver they won. I also incorporated the same image ratio as we used for the magazine so we wouldn’t have images cut off. The ‘learn more’ button was added to give an association between customers who paid for an additional page.
Round 2
The Problem Within A Problem
The feedback from my first draft was very positive. At one point, they were happy enough to move straight to development. However, I decided to reach out to our magazine design team and talk with them about the changes. After a lot of emails, we decided to get on a call and sit and hash out the design further. An hour and a half later I had a new approach.
Questions Posed...
During our call I started writing down a myriad of questions we brought up Here were some of those:
- Is this a directory or a listing site?
- What if you win over multiple categories? How do you highlight that over time?
Multiple descriptions based on category winnings how do you do that online?
Heading with the possibility of being fixed?
Total wins are confusing – how long back are we going and what is included?? Does a hover over solve that?
Email Notes
The first critiques through email got me to this point. But it was clear we had much more to discuss and revise. Particularly with the sections and organization.
What I had done right in the mockup above was the addition of the ‘current category won’ section, the learn more button, and the image ratio. Plus the layout was mirroring the magazine with the new color and card adjustment.
Final
Complete Mocks & Design Implementation
Here are a list of features and changes I introduced in these final designs:
- ‘[year] categories won’ section has links to easily view all categories a business won AND who they competed against
- Created a dynamic ‘total wins’ section that spans 5 years to align with license agreements and showcase history
- When filtered down to specific categories it splits into two rows. Gold is always displayed on the left and silver on the right. If filtered by all years a divider with the year heading will display
- New medallion counter for main category section but when filtered shows the medal won for that specific year
- Introduce search engine to optimize time and searching by business
- Added heading that matches with the filter to help identify the location of browsing
- Corrected visibility issues with the text and align with web standards
- Created ‘learn more’ button for clients with a premier listing page
- Corrected image ratio
- Used CSS grid to allow for viewing at all breakpoints
Results &
Conclusion
The video above is a preview of my code. At this point, the functionality hasn’t been introduced which is why the images are a little weird and some static information is shown. However, I was able to get the design to look almost identical to my mocks and introduce a grid system that looks better at all breakpoints.
I am very pleased with this outcome. I was able to complete this in about 2 weeks that includes the visual code I did (HTML/SASS). This new design will match the magazine better and solved a lot of user conflicts. The card layout also lets us introduce more information than we previously had.
