> Page Under Construction <

I am in the process of writing and developing this case study. Please check back for updates! In the mean time, feel free to browse over my final deliverables, designs and current insights for this particular project. More info on the way!

client: Charactour

project type: UI/UX

project length: 3 weeks

tools: Sketch, InVision, Principle, Illustrator

medium: Mobile

Character-Matching for Mobile

> A Brief Overview

Charactour is a design project I received during my time at Designation. Made up of three sprints, each sprint lasted one week. I worked on a team of four designers to conceptualize, design, and present multiple visual solutions.

Our task was to design a mobile application centered around the character matching experience of Charactour, mirroring the functionality of the website for mobile use. Our clients, Pete and Kim, already had mockups for a mobile app, but needed a fresh perspective on the best way to reach their target audience visually.

The challenge was to design the app centered around the initial character matching quiz that first-time users interact with. This quiz gives the website crucial data to plug into an algorithm that can give the user access to information to which character in popular media they are most alike (and not alike). Our secondary objective was to help push the user to explore more about their character through more intense interaction with the content in Charactour.

Pete and Kim had wireframes produced by a UX team from a previous cohort in Designation. These wireframes acted as a guide to help us figure out how to best lay out our visual solutions.

> Project Deliverables

The following is a list of my final deliverables for this project, available for viewing. These files may be useful for you to get a high-resolution look at my designs. They are also what I have shared with our client at the end of the project.

1.

Moodboards. Inspiration for the creation of style tiles.

2.

Style tiles. Initial design explorations to pitch to the client.

3.

Invision prototypes. Click-thru demos of our designs for user testing and client feedback.

4.

Presentation decks. Communication between our team and the client. Showcases design progress and facilitates discussion.

5.

High-fidelity designs. Every iteration of our designs from initial mockups to final drafts.

6.

Style guide. A rulebook recommending how our designs may be used after handoff.

7.

UI kit. A collection of every component in our designs. Includes buttons, text boxes, illustrations, etc.

8.

Microinteraction animations. Animated mockups for how elements behave based on user interactions.

> Style Exploration

Below you will see the three design directions that I explored to present to Pete and Kim.(Click on thumbnails to view full-resolution images.)

Style Tile #1 - Actionable, Guiding, Forward

The main focus of Charactour is to guide the user on an endless, but ever growing journey to learn more about their character as well as themselves. This particular style tile is about the forward momentum and sense of direction that the app is conveying. Every element has a slight tilt to simulate movement and progress. Clean cut edges and bright, vibrant colors create an energy that works in tandem with the sense of movement to deliver an urgency for the user to act. These elements essentially develop a hip, modern appeal to address the younger audiences who interact with the app.

Style Tile #2 - Youthful & Engaging

One major goal that Pete and Kim wanted to accomplish was to not only capture the user with the personality test, but to try and get them to come back after the first visit. To address this, I had to assure that the design would be engaging and welcoming to ensure the return of users to the app. To do this, not a single hard edge or corner was used to convey freedom and warmth. The color palette was comforting and pleasing with the use of gradient backgrounds to have the app appear more approachable. The rounded elements and interaction points had a contrasting appeal, meant to inform the user without overwhelming them. Being a more "comfortable" style, the appeal was to stifle creativity within the user without assuming any boundaries.

Style Tile #3 - Lively & Energetic

I wanted to capture a sense of energy to excite and motivate users to use app. To help bring in more users, especially the younger audiences, I decided to adopt a mascot for the style. This type of character reinforces the appeal of the app by being as loud and energetic as possible to motivate users to discover more about themselves, which ties into the journey aspect of the app. The color palette has bright colors to engage with the user, and the elements are accentuated with the sense of depth. The app commands the user to be actionable while having fun discovering more about their characters and themselves.

> Initial Design Iterations

The first iterations of designs were a direct translation from the second style tile, which was approved by Pete and Kim. While they seemed to enjoy the design much more than the other two style directions, I disagreed with the choice. But, the clients felt that the design aligned more with their target audience with an approachable, youthful, and warm appeal. (Interact with the slider to view see various design elements and points on each page.)

Home

The home page acts like a general social feed. The feed shows initially delivers trending information on Charactour, ranging from character profiles to blog posts to quizzes. The initial design prioritized what was popular among Charactourists before users view more relevant information pertaining to their interests and character matches.

The app uses an algorithm to determine character matches among every character in the Charactour database. The feed shares the most compatible (and incompatible) characters that the user can explore, along with other matches for shows, games, books, and other quizzes. This is what's meant to be as the starting line for the user journey, at least for initial users.

Personality Quiz

This is the initial quiz that users are required to take. The results feed into the Charactour algorithm to deliver initial character matches to the user. The quiz's structure was similar to the website's personality quiz, which was a long, scrolling page with every question on it.

Each option is displayed in it's own container to avoid confusion, and the slider is meant to snap at various points on the scale to give the user interaction feedback. The percentages will change while the user interacts with the slider, while the images will change opacity based on the slider position.

Character Profile

The user will quickly become acquainted with the character profile page. The page is mainly informative, having various sections describing the basic biography, personality, and other characteristics of the character. The character image is prevalent, with a large visual element boasting the compatibility with the user.

The other two tabs are meant to display similar and opposite characters, as well as recommended links to guide the user to related content. Since the page is content-heavy, most of the information is hidden from the user unless he/she collapses each section. This allows the users to quickly skim the page to find the information he/she is targeting without endlessly scrolling to find content.

Quizzes

The quizzes section of the app allows users to further refine their interests to discover more relevant content about their compatibility with characters and other users.

The content listed on this page is curated for the user by sourcing their compatibility information from the personality quiz. Similar to the home social feed, trending quizzes are posted at the top, while more relevant content for the user is below. To enable controlled scrolling and discoverability, the user is prompted to tap on the "More Quizzes" button to populate more quizzes. Each quiz is also posted with various badges and rewards for taking the quizzes. This moves users to take certain quizzes depending on what badges are offered.

> Final Design Iterations

Below you will find animations of my final design iterations for the Charactour app. These GIFs demonstrate the intended behavior, interactions and navigation of various elements and pages. You can consider these the final user flows of the project, as discussed with the clients during our presentation. You can interact with the prototype by downloading it here.
(Interact with the slider to view each final design. Hover over each to play animation.)

Title/Onboarding

Duration: 7 seconds

Personality Quiz

Duration: 36 seconds

 photo personalityQuiz_zpsehrdturi.gif

Character Matches

Duration: 10 seconds

Character Profile

Duration: 30 seconds

Characters

Duration: 20 seconds

Select Interests

Duration: 39 seconds

 photo selectInterests_zpsmroecv7j.gif

Home

Duration: 23 seconds

Community

Duration: 20 seconds

Quizzes

Duration: 11 seconds

Movie Profile

Duration: 13 seconds

Journey Map

Duration: 16 seconds

Title/Onboarding

Duration: 7 seconds

 photo onboarding_zpsm95ivsmx.gif

Personality Quiz

Duration: 36 seconds

 photo personalityQuiz_zpsehrdturi.gif

Character Matches

Duration: 10 seconds

 photo characterMatches_zpsymh6fepy.gif

Character Profile

Duration: 30 seconds

 photo characterProfile_zps6zylujwg.gif

Characters

Duration: 20 seconds

 photo characters_zps4xym5qy6.gif

Select Interests

Duration: 39 seconds

 photo selectInterests_zpsmroecv7j.gif

Home

Duration: 23 seconds

 photo home_zpsgawmmfir.gif

Community

Duration: 20 seconds

 photo community_zpsomakxy0p.gif

Quizzes

Duration: 11 seconds

 photo quizzes_zpso1zssxwd.gif

Movie Profile

Duration: 13 seconds

 photo movieProfile_zpsv2lbvt1z.gif

Journey Map

Duration: 16 seconds

 photo journeyMap_zpsozpl0y2s.gif

> High-Fidelity Prototype

The high-fidelity screens that you see above are available as a prototype below. Feel free to download it to discover how our users have navigated the screens during the usability testing sessions.

download prototype

> Check Back for Updates

I am in the process of writing a detailed case study about this project. I am eager to tell you the story about this design experience, so please check back for updates!

> Other Works

High Impact B2B Gifting

TYPE: UI/UX

Attracting new corporate customers
with a website redesign.

explore

Job Hunting Made Easy

TYPE: UI/UX

Designing a web-based organization tool for bootcamp designers looking for jobs after graduation.

explore

Big Growl Six

TYPE: BRANDING

Designing the look and feel for one of
Michiana's biggest rock & roll festivals.

coming soon!

The  portfolio  of  Philip  D.  Gallam

Let's  connect!

The  portfolio of  Philip  D.  Gallam      ---