Magimoji

Watch a video of the app from an iPhone simulator on XCode.

Definition Statement

Magimoji is a personalized sticker app for iOS where users can create customized fantasy-themed avatars to share with their friends. Users can choose from a variety of stickers that feature their avatar in various poses and phrases that go with any mood.

Simply click on a sticker and it will be copied to your clipboard to share in any messenger app or social media. These quirky rpg-inspired stickers will satisfy users seeking a unique art style that’s different from typical emoji-sticker apps.

Market Research

I researched and tested other popular emoji and avatar customization apps on the iOS app store including “Bitmoji”, “Emoji Me Sticker Maker” and “Emoji>” to analyze their strengths and weaknesses:

Strengths:

• Features a wide selection of stickers
• Lots of customization options
• Can be used as a keyboard and/or iMessage widget
• Can be integrated into Snapchat (Bitmoji)

Weaknesses:

• Can only have one avatar at a time (Bitmoji)
• Most customizations are limited to human-like features
• A lot of accessories and stickers are paid/subscription paywalled
• Crowded UI and difficult to navigate

1. User can create multiple magimojis
2. User can customize the colors and features of their magimoji
   • Skin color, hair color, clothing color (primary, secondary)
   • Hair type, ear shape, facial hair, hat/no hat
3. User can choose colors and features during creation of their magimoji and also edit them at any time after
4. User can delete a magimoji
   • Either in the main list view or in the sticker view
5. User can view a list of their magimojis
6. User can tap on a magimoji in their list to view the individual stickers
7. User can tap on the different magimoji stickers to copy it to their clipboard
8. The stickers feature the user’s magimoji with various phrases and poses

By combining inspiration from previous successful projects and aligning with industry-standard design principles, I was able to create a user interface that not only met the functional requirements of a personalized sticker app but also provided an enjoyable and intuitive experience for users, encouraging them to engage creatively with their fantasy-themed avatars and share them effortlessly with friends.

Character Design

The character designs in this app, drawn from the Cards Viewer project, embody a modern and flat design aesthetic. Drawing upon the principles of flat design, the characters feature:

• Clean lines
• Bold colors
• Minimalistic details

This aesthetic choice not only aligns with contemporary design trends but also serves practical purposes within the context of a sticker app. The characters in the app maintain clarity and legibility even at smaller sizes, ensuring that they remain visually appealing and recognizable as stickers

Human Interface Guidelines

I adhered closely to Apple’s iOS Human Interface Guidelines throughout the design process. These guidelines provide a comprehensive framework for creating interfaces that are not only aesthetically pleasing but also ensure consistency and usability across iOS devices. By following these guidelines, I ensured that users of the app would find the navigation familiar and intuitive, enhancing their overall experience.

Some notable implementation features that I used in the project that are specific to Swift programming language include:

• Several ZStacks and VStacks together to create characters from SVG image files
  • Able to individually color each SVG file natively in Swift
• CoreData to keep track of character data between sessions
• State and bindings to pass info between Views
• Used ImageRenderer(content: View) to convert the final Views to images in order to resize and copy for StickerView