For the Overview tab, my goal was to tighten up the layout design, as this particular partition felt disjointed in comparison to its neighboring section above and below it. By condensing some of the visual components (notably the Abilities section) I was able to achieve a single-page view while maintaining all pertinent info about the character.


BL_compare_03c.jpg
  • Eliminated excess blank space underneath hero image

  • Consolidated Abilities section into an icon carousel

  • Removed Related Media header and Load More button

  • Single row Media section can function as carousel if more media is added


For the Story section, my goal was to consolidate the dense backstory of the character into the same size window as the Overview tab. I was able to accomplish this by adding a scroll function into the design. Not only does this conserve screen space, but it also presents digestible chunks of reading.

BL_compare_05d.jpg
  • Implemented scroll bar for story section underneath Biography

  • Removed Related Media header and Load More button

  • Single row Media section can function as carousel if more media is added