Introduction
HitoriLemur is an app designed for playing Hitori puzzles, incorporating social elements to enhance the traditional solitary experience. The app allows users to compete against friends, track monthly stats, and engage in live versus battles through a subscription model.
As a someone who has recently picked up doing Hitori puzzles, I created HitoriLemur to improve my own puzzle-solving experience. Hitori puzzles have quickly become a part of my day, the logic and beauty them provide a beneficial mental warm-up before starting my day.
Concept and Branding
The name "HitoriLemur" is derived from "hitori," meaning "leave me alone," and its abbreviation "lma," which sounds like "lemur." This playful twist informed the logo design, which features a lemur’s tail made from five circles resembling a D-pad, a staple of gaming, and the pattern of a selected number on the grid.
Inspired by the lemur, the app features light and dark mode palettes with varying greys and a distinctive orange sampled from the lemur's eyes. UI elements utilise subtle gradients for depth. An invert mode for hardcore users converts the orange to a vivid blue, offering a fresh feel. Using Figma's variables system, I implemented variable colour modes. These modes link directly to CSS and data theming, ensuring a seamless user experience across different themes.
How to Play
Hitori puzzles require players to shade in cells so that no number appears more than once in any row or column. Additionally, shaded cells cannot be adjacent, and all unshaded cells must form a single connected group. Here is a visual example of the rules and a completed puzzle.
Onboarding & Getting Started
The onboarding screen features a sign-up form with SSO options via email, Apple, and Google. A link to "What is Hitori?" is available for new users. The “What is Hitori” page introduces users to the game, providing an example puzzle, a getting started video, the rules, and the benefits of playing.
Home Screen & Navigation
Users are greeted with a warm "Welcome back" message, showcasing their monthly stats, friends’ activity, the next puzzle to solve. In case it’s been a while since you last played, I added a refresher on the rules, and if you’re feeling generous an option to rate the app.
The top navigation features the logo, access to the friends page, and the user profile, whilst the bottom navigation includes links to home, rankings, a large quick play button, help, and settings.
Puzzle Time!
Upon clicking the play button, users see a stage grid with puzzles that unlock chronologically. From selecting their stage users choose their level. The game screen includes the level name, community rating, game grid, live timer, reset/check/undo options, puzzle rating, and friends’ scores. The bottom navigation's play button turns to a pause button during gameplay.
Social Elements
Implementing social elements was key behind my thinking when designing for the HitoriLemur app. The profile page displays user activity, stats, sharing options, and a list of completed puzzles. The friends screen shows a list of friends, new friend requests, and options to add friends or import from contacts. Tapping a friend’s name takes users to their profile, where see their stats and remove from friends if needed. From the rankings page users can view detailed overviews of friends and global player stats, and even play the top rated puzzle of the month.
Settings & Subscription
The settings screen allows users to reset puzzles, manage account settings, change colour modes, and access legal information. Users can also permanently delete their account.
In my planning of the app I wanted to enable monetisation without becoming frustrating for the user, I came up with a three tier system inside of HitoriLemur. Aside from a free tier the app features both basic and pro tiers. The basic plan offers access to a wider selection of puzzles each month, while the pro plan includes additional perks such as access to a new game mode that offers time-based live multiplayer battles. Whilst this structure provides added value to paid users the goal is to also ensure that all users, including those on the free tier, can still enjoy the benefits of accessing puzzles on a user-first platform.
To Conclude
Doing a deep dive UX/UI personal project like HitoriLemur is always a rewarding experience, undertaking something like this allows you to test all those ideas you’ve been thinking of and bundle them into one package. Working on HitoriLemur allowed me to combine my love for Hitori puzzles and flex some design skill. I’m proud of what was achieved in a short space of time.
Me trying to figure out the Figma Variables colour modes for this project - Photo by Flickr
Overtime
I have since came back to this project and developed Vs. Battles, the Pro tier multiplayer option allowing Hitori lovers to compete to see who can complete a puzzle the quickest. With a new ranking system and ranked profiles HitoriLemur's Vs. Battles offers an exciting new way to play the game.
The aim of the game is simple, complete your Hitori faster than your opponent. Got what it takes?
