Mobile App Design
Here are two different designs I made for mobile apps.

Project #1

Visit Historic Kirtland

One of my most favorite places in the United States is in northeastern Ohio in the beautifully wooded and quietly secluded city of Kirtland. I first visited Kirtland in 2009 when our family lived in Beavercreek, Ohio, just outside of Dayton. One weekend, we packed the kids in the van and headed on a quick road trip up to visit Historic Kirtland. At the time, I sadly didn’t know too much about the history of this quaint little town, but I was looking forward to seeing the Kirtland Temple. Since that initial visit with my husband and children, I have been able to return to this beautiful area several times and every time, I have loved being in this place.

For a school assignment, we were tasked with creating a design for a mobile app that would implement effective navigation, include a map, and allow the user to utilize the app without having to sign in as a user. Since I had visited this historic location several times, I figured a “travel app” would be perfect! So, I got to work deciding what features I would need to include, and began thinking about the style of the app that would be appropriate for such a sacred and important site. After many revisions, I came up with a great design that allows the user to easily and quickly plan a trip to Historic Kirtland.

Historic Kirtland Launch Screen
Historic Kirtland Step 1
Historic Kirtland Step 2
Historic Kirtland Step 3
Historic Kirtland Step 4
Historic Kirtland Step 5
Historic Kirtland Step 6
Historic Kirtland Confirmation Screen

UX Design

Usability

Keeping the user’s experience in mind is the most important part of the design process. As I created this app design, I had to consider who would be using this app and for what reason. In addition, several rounds of user testing helped me refine my design in terms of usability.

Hierarchy

Using clear hierarchy within mobile design ensures smooth navigation and allows the user to easily move from screen to screen. Well-defined headings and simple typefaces can make it easier for the user to navigate through the app.

Consistency

Mobile app users tend to stick with apps that are familiar, easy-to-use, and that do not require a steep learning curve. Implementing elements and features that have similarities to other popular apps may appeal to the user. Throughout the design of this app, I used easy-to-use sliders, clean buttons, and a simple navigation to help the user move through the app.

Historic Kirtland Large Mockup
Historic Kirtland Menu Screen
Historic Kirtland Edit Plan
Historic Kirtland Weather

Simple Navigation

Clear navigation in mobile design allows the user to interact with and more easily use the app. The designer should create navigation so that the user barely even notices the navigation at all!

Creating navigation that allows the user to simply move through the app without having to think should be at the top of the list of any UX designer’s to-do list.

As I created this app design, I conducted four different rounds of user testing, which helped me see what menu items were working and which ones needed to be redesigned.

Project #2

et|icon_mobile|

Instant Noodles

This mobile app design features a set of mobile screens that walk the user through the steps of making instant noodles. The design is based on images and used no words or written instructions. I sketched each of the images using Adobe Illustrator.

Instant Noodles Ingredients Screen
Instant Noodles Ingredients Screen
Instant Noodles Ingredients Screen
Instant Noodles Ingredients Screen

I chose to use a doodle-style design with simple lines because I wanted it to reflect the simplicity of the six steps shown in the app. Hand drawn arrows and symbols help to communicate the steps displayed on each screen. Bold numbers placed against a white circle with a doodled outline help the user move through the app.

Using pictures, symbols, and colors only in a design can be a fun and effective way to communicate a step-by-step process, such as how to prepare a hot cup of noodles. The green color of the “checkmark” on the last step is commonly used to indicate completion. The doodled steam lines indicate that the water is hot.

Instant Noodles Ingredients Screen
Instant Noodles Ingredients Screen
Instant Noodles Ingredients Screen
Instant Noodles Ingredients Screen