Tablet:

Tablet Link (in case embedded doesn’t work)

Website:

Website Link (in case embedded doesn’t work)

For this final stage, I took my existing mobile design and transformed it into versions for tablet and web, making sure everything works seamlessly across platforms. Since I had started the design process with a tablet resolution of 768 x 1024, this version was the most fleshed out from the beginning.

During the tablet design phase, I also dove deeper into the content by crafting more detailed case file screens. I came up with several hypothetical cases to showcase how each case file could look if the game existed. This included unique case titles, descriptions, and progress meters to capture the essence and tone of each fictional investigation.

Switching to the web version (1920 x 1080) turned out to be easier than I anticipated. I discovered that enlarging components instead of shrinking them gave me more flexibility and led to fewer design headaches. Typography flows more naturally on larger screens, and I had more space to allow larger buttons and a consistent visual hierarchy. I was also able to reduce the contrast for some backdrops, since there was more dark, extra space for text to be easier to read – this added to the mysterious, murkier vibe of the site. The extra horizontal space also allowed for more traditional desktop layout patterns, like a navigation bar at the top of the screen.

A significant change in the web adaptation was adding extra button links across various screens. Unlike mobile apps, where navigation tends to be more linear or nested, most websites let users easily access all major sections from nearly any page. To accommodate this, I designed a straightforward, persistent navigation bar that links directly to each key screen—Case Files, Clients, Player Profile, and Home—reducing the need for complicated multi-step navigation.

All three versions—mobile, tablet, and web—were created within the same Figma file for easy access to shared components and better version control.