Inner Circle App

On this page you will be able to learn about my app design process. The mock app mentioned below is a case study from my online UX/UI Bootcamp class. As part of this class I had to develop my own app idea using Figma and designed it from scratch.

Ideation Phase

Every good app starts with a good idea. My app idea was called “Inner Circle”. This app would be used to remind people to connect with their friends and family on a more regular basis. Unlike other social media apps, this app would remind users to call, text, or video chat the people who matter most to them. My goal was to help people build closer connections with the people of their choosing through scheduling and personal communication. Click here to use the app prototype. 

To start the app design process I created what is called a red-route. The red-route is used to determine what app features will be used by everyone on a regular basis and what features will only be used sometimes by some people. The purpose of a red-route is to help the app designer begin to plan and prioritize key parts of the app during the pre-development stage.

In conjunction with the red-route, I made what is called a “user wire-flow”. In this wire-flow I mapped out how my target user would navigate through the app and what decisions they would have to make. In the image to the left the user is creating their profile, making connections through their phones contact list, and creating reminders for themselves. 

I began the ideation phase of my app by creating a “Crazy 8’s” drawing. Simply put, this is when a designer takes 8 minutes and tries to draw one screen 8 different ways. The point of this is to help the designer think of new possibilities and other ways that each screen could be used.

After completing my “Crazy 8’s” drawing, I synthesized my my ideas into my three primary app screens. These are the screens that I thought my users would use most often because they contain the primary functions of my app. 

Research and Development

To start this phase of the app design process, I created multiple user personas. Each designer should create a user persona for each type of target user. My app is meant to connect users to their loved ones, so I made a user persona for a mom and one for her daughter. Each of them would use my app in different ways, but they would both be using my app for the similar reasons.

I then conducted in-person interviews with 5 real people to assess how they would use the app and what features they would like to see. To the left is the list of questions that I asked each person.

After conducting these interviews, I then created an Affinity Map . I did this as part of a Design Thinking Workshop which helped me to place each interview response in a different category. These categories included things like: User Preferences, User Motivations, and Desired Features. This process helped me to understand which survey answers were repeated the most often during the interviews.

Design Phase

Here is a collection of screens from the first iteration of my app. I had to make multiple revisions to these screens to make them design friendly and to give them a polished look. Revision is an important step during any design process because it helps the designer to create something that is visually appealing and easy to use.

Implementation and Revision

This is a series of screens that have been redesigned and given a realistic look and feel. These screens follow the same order that was decided after the “Crazy 8’s” design session. Don’t forget, you can follow this process and play with the app prototype by clicking here

After finishing the design process, I conducted another user test where I asked my participants to fill out a System Usability Scale (SUS) Survey. Through this survey I found that my users were struggling to understand the purpose of my hamburger menu style settings button. I then changed it to the more traditional gear settings icon and increased the apps overall usability.

After creating my app prototype and finalizing my fonts, colors, and button designs I comprised everything into a style guide. The purpose of a style guide is to help a developer who may need it when programming the app and making it available for use on mobile devices.

If you would like to know more about my app design process or would like some feedback when designing your own app, please feel free to contact me.