Case Study

As a shiny hunter, nearing completion of her shiny dex, I found that it's a little tedious and complex to find methods on how to hunt shiny Pokemon. For example, Legends ZA might have better rates to find a Shiny Staryu but X & Y might be initially faster or more fun. Thus, I wanted to build a page to act as a central "hub" to recommend shiny hunting methods!

The biggest challenge of this page was the data and information. As there have been many different methods over the years, across many different games, I needed to think of ways on how to consolidate the information. Ultimately, after some testing, I decided to focus on keeping general information as a general accessible area and focus completely on the important information. The easiest to understand information displays initially, with more wordy and complex information being hidden in a collapsable area.

Once I settled on that, however, the issue was implementing the data. While I'm no stranger to adding data, this was my largest undertaking. It took over a week to enter everything I needed, which was over 9500 entries! Thankfully, I wasn't entering them one by one. Using a single SQL statement, it can add many entries at once, so I was breaking the entries by method. I would have code such as "INSERT INTO `species_shiny_methods`(`species`, `shiny_method`) VALUES ('???','86');" as a template, and I would replace the ??? with the number and just keep copy and pasting the information that's in brackets in the same statement.

Another challenge was ensuring that this was user-friendly. As mentioned previously, there is a lot of information as this is something people have been doing for 26 years. However, that information may not be relevant to the user and they want to tackle the easiest stuff. Thus, I implemented a filter to ensure that all the methods for one game will be shown at a time if a user would prefer that instead.

I also needed to ensure that this information was visually pleasing on all devices as well. My desktop set up is pleasing, but the information was highly squished on mobile. Thus, with some messing around with the CSS (namely, widths and the order property), I ensured that the information would be easily viewable on all desktop; changing the layout depending on the screen size. The information might be slightly bulkier but ultimately has better readability and functionality!