Dexie
Timeline
2020 - present
Client
Personal project
Role
Research, Design, Development, Testing
Overview
Pokémon® is ranked as the highest grossing media franchise worldwide of all time (by total revenue) and in 2021 was ranked 5th in the Top 10 Global Brand Licensing Companies [1].
Just over a 5th of this revenue is attributed to the video games, which are still hugely popular. With each game comes a new set of Pokémon® and other items and moves each with their own metadata. In game there is a database called a Pokédex to show all this information.
We know that iOS is a very popular platform. Although Android remains the most popular operating system in the world, with a whopping 70.89% market share (iOS second at 28.36%), iOS reigns supreme in the US with a 57.39% market share vs Android's 42.27% [2].
There are a few Pokédex apps on the App Store, however they do not seem to be native apps (written with Swift or Objective C) and if they are, they do not follow Apple's Human Interface Guidelines.
Native apps bring so many benefits — from personalisation and performance to familiarity and flexibility.
-Sketch.com, Part of your world: Why we’re proud to build a truly native Mac app
I find it so jarring moving from apps that feel familiar to each other and make use of the OS' features and paradigms, to an app that is built with frameworks such as React Native. In my experience these apps always feel a bit slow and 'clunky' and scrolling through lists usually doesn't have the same snappiness.
Within the iOS community, native apps are very popular and so I believe there is a gap for a truly native Pokémon® app, that looks familiar, feels nice to use and doesn't show adverts.
Scoping
I have found a RESTful API called PokeAPI linked to an extensive Pokémon® database, which appears to be actively maintained and updated regularly. From conversations on social media with people from the Pokémon® community as well as the iOS community, it was decided to show data for Pokémon®, moves, items and berries in the MVP and then add more detailed features in subsequent versions. This would mean a list view for each of the four sections, as well as a detail view for each item from those lists.
Once we had scoped what data would be used from PokeAPI for the MVP, I moved on to some high level wireframe sketches of the UI. Having thought about this for a while, I knew that many of the views would contain solely grouped list items so it was mainly the detail views for Pokémon, items and berries that would take the most time to design.
After sketches, I usually take the designs into Sketch and produce some cleaner, black and white stroked designs for clarities sake.
After sketches, I usually take the designs into Sketch and produce some cleaner, black and white stroked designs for clarities sake.
I will also start playing around with code, whether that be HTML and CSS or SwiftUI, just so I can start to get a feel of how things will be structured within the source code. It also gives me an idea how feasible designs might be.
List Views
Each list can be filtered and sorted by different headings. For example the Pokémon list can be sorted by gamer versions, Pokémon type and alphabetically.
Throughout the app, particularly in search results, the user can find alternate sprites (pixel art style Pokémon® images) that can be used in place of the original. These will then be shown in lists and in detail views throughout the app.
Sprites
I feel that the Pokémon games have lost a little of their magic since moving away from pixel art, as the sprites used now show less dynamic poses. All images of Pokémon in the app will be pixel art. The detail images can be tapped on causing them to flip over and show a holo sticker version using the shiny sprite.
If a shiny version of a sprite has been unlocked by the user, they will be able to view this in the Pokémon®'s detail view by tapping the detail image. This will flip the image over with a nice animation to show the shiny sprite.
These are styled to look like holo stickers, inspired by the holographic and foil cards that can be collected from the Pokémon® Trading Card Game.
Design
The design philosophy of the app aims to align seamlessly with the established visual language of iOS, fostering a sense of familiarity and user comfort. Two pivotal sources of inspiration guided the design process: Firstly, the App Store, which provided a compelling reference point with its utilization of an information-rich header for detail views. Secondly, the Shortcuts app, which influenced the adoption of a 'card-based' user interface paradigm.
Strategic variations in background choices have been meticulously implemented, notably evident in the description card, to evoke a nostalgic notebook ambiance. The alternate sprites found throughout the app have been given a bright yellow background, with a shimmering animation so these stand out as different from the other information on screen.
The overarching app backdrop adopts a subtle striped pattern, reminiscent of the skeuomorphic design era in earlier iterations of iOS. To further enhance this thematic resonance, careful consideration has been given to the incorporation of depth cues, including judiciously applied shadows and highlights, elevating the overall user experience.
