Slothcadet

Overview

Challenge

How can we design an app that allows users, who don't have access to 3D computer softwares, learn and create 3D models using their mobile device?

Solution

From research to UI design, I created an iOS app that is aimed towards educating users about 3D modeling. This app features a start up tutorial that enables users to learn how to navigate the mobile 3D space, projects users follow step by step, and a start from scratch page that lets users create their own models. Using the AR feature, users can bring their creation to life and save photos or record videos to share with friends and family.

Role: UX/UI Designer

Tools: Figma, Photoshop, TinkerCAD, Miro, Whimsical

Process

‍

‍

Research

Comparative Analysis

‍I began my research phase by creating a comparative analysis with other learning apps. I wanted to focus on finding the best strategy of learning through an app. Do I want to engage users with a point based system? How do I focus on the learning content without boring users. I decided to compare three major apps that I have used or heard of. Each app teaches users a different topic but all engage users with 'game-like' content and entertainment.

‍

‍

User Persona

‍ The target audience for this app are kids ages 10-16. Due to limited time and access to the target audience, I decided to create a proto-persona. I based this persona off assumptions of what I believe the target audience is interested in. Using my four years of tutoring experience also helped me create the ideal persona and empathy map for this application.

‍

‍

Empathy Map

The goal of this empathy map was to visualize the needs for our target audience. Having a target audience of kids ages 10-16, I tried to emphasize their senses and environment.

‍

‍

‍

Product Development Roadmap

‍Creating pages for this app was a little bit of a challenge. Trying to compact features from industry used 3D softwares into a learning app lead me to pick and choose which features are useful for beginners. This app is designed to help users who have never used 3D modeling softwares learn the basics to become comfortable and confident to expand their skills onto larger softwares. I've narrowed down the hundreds of features down to a couple pages that would be helpful.

‍

‍

Design

Sketches‍

The sketches are references from multiple learning apps as well as 3D modeling softwares. I decided to design a hamburger navigation menu to create more space for users to model in. Having the navigation menu pop out from the side of the screen when needed versus being located at the bottom of the screen at all times saves space.

‍

‍

Task Flow‍

This task flow was based on a user choosing a lesson in the app. As the flow continues, the user learns different stages of creating a character. They model the main body, add features to create a face and add personality, add color to personalize their model, learn about auto rigging, and finally use the AR feature to see their robot come to life!

‍

‍

User Flow‍

The user flow follows the same concept as the task flow. While following the flow, users are given choices on what task they'd like to do on the app. Do they want an overview of how to use the app, follow projects, or create their own? Below is a shortened version of the user flow.

‍

‍

Sitemap‍

After creating sketches, task flow, and user flow, I had a good visual of how I want my app navigation to be designed. Using the information found, I created a sitemap to make my vision organized.

‍

‍

Wireframes‍

When creating the wireframes, I wanted to keep in mind who the target audience is. Since this app is targeted towards a younger audience, I wanted to make the layout clear and simple. Creating the lesson learning path helped me achieve this goal. Users can view their progress after completing each step in the lesson. I decided to create a hamburger menu navigation instead of a bottom screen navigation to increase workspace for the user to use the 3D window.

‍

‍

Brand Mood Board‍

After creating the wireframes for the application, I focused on the brand itself.

While creating the mood board, I decided to make the app theme outer space. I chose outer space because it contains fun concepts and relates to the audience I'm targeting. The mood board below contains the color palette I chose based off reference art. I also wanted to create a fun logo design using a sloth from space.

‍

‍

Brand Logo

As mentioned before, I wanted to create a fun logo and mascot for the app. Inspired by sloths in space, I took to Figma to begin designing the logo. Creating a name for the app was a bit difficult. The app revolves around three main words: Space, Sloth, and 3D. Creating a name that related to all three took some time, but that's when slothcadet was born. Slothcadet refers to the logo itself showing a sloth in space. Highlighting the letters CAD emphasized that it is a 3D app. CAD stands for computer-aided design. Below is the logo placed on different color tiles.

‍

‍

Style Tile

The style tile contains the final logo in different sizes, as well as screens shots that will be used in the prototype. The screenshots were taken from an online 3D modeling site called TinkeCAD. I quickly modeled and captured the stages of creating a robot. I added illustrations that I will add to the final design. These elements tie the entire theme together and provide a fun learning environment for the users.

‍

‍

UI Kit

The UI Kit contains all the buttons, headers, navigation menus, and cards used in the app. The cards were created for the home menu, lesson path page, and project icons. Adding graphics to these cards engage users and provide a fun theme.

‍

‍

Responsive UI Design‍

After establishing the brand itself, it was time for me to put everything together. Using all the elements from the style tile and UI kit, I created the first version of slothcadet. Below are some screens from the app.

‍

‍

Test

After creating the prototype, I presented my work to my weekly groups critique meetings. My peers had good feedback about my work and great suggestions to make it better.

Affinity Map‍

Below is an Affinity Map I created based on the feedback from my peers. The goal of this map was to gather all the information provided and decide what changes need to be made based on how often it was mentioned. The red cards are changes that need to be looked at in the design, yellow are changes to make if there is time, green are things that don't need to be changed, and purple are advice given. Due to lack of time, I was not able to test my prototype to other participants outside of my group critique and mentor.

‍

‍

Final Design‍

Taking the feedback from my peers and mentor into consideration, I made changes to the app and created the final design. Some changes made included:

Removing CTA buttons on cards

Removing outline on secondary buttons

Increasing overall font on the app

Adding icons to hamburger menu list

Adding titles to cards

Below are the final design screens for the app.

‍

‍

Prototype‍

Click the image below to use the prototype in Figma.

‍

‍

Final Thoughts & Outcomes

Creating an end-to-end application within the short timeframe given was a bit of a challenge but the end result is extremely satisfying. Creating an app from scratch based on my ideas was motivating. I thrived to bring my ideas to life and help users learn about 3D modeling. Designing the space theme and logo of the app was enjoyable. I decided to use a silly idea like space sloth to help motivate users to want to learn 3D and hopefully expand their skills past this app.

What's Next: I'd like to keep working on this app idea in hopes to bring it to life. I would also like to design a detailed lesson within the prototype to give users a nice taste of what to expect.