The Work > App Design

App


Design
Three phone screen mockups of pages from CheckList the app on a blue background.

Skills

Adobe Illustrator, Adobe XD, HTML, CSS
The CheckList Home sceen on an iphone that displays the date and temperature outside, the user's daily tasks, and tasks for the week ahead.
The CheckList Task sceen on a desktop computer that displays the user's tasks for the given day, the date and temperature outside, tasks for the week ahead and a calendar preview. The CheckList Calendar sceen on a desktop computer that displays the user's workload for the month and any notes.

Project Goal: Create a productivity app for busy young professionals, in mobile and desktop interfaces.

Calm, Scholarly, Reliable, Clear
A Candid Take

This was one of my first projects done for a course on web deisgn. I really fell in love with the process of UX and UI design here and realized it was a path in my career I would like to pursue. I was introduced to the concepts of scalability and mental models. This was made at a time in my college career where I was really struggling to balance the responsibilities and obligations being thrown my way. I had just started looking into productibty apps to make use of in my own life and decided it was a project I would like to explore. Getting further into the project, I gained a better understanding of how much care and consideration goes into the development of user interfaces.

Establishing Project Goals

  • Quickly display daily tasks, or appointments
  • Improve the workflow of the user's day
  • Denote when a task has been completed
  • Encourage productivity for the user

Developing Brand Identity

Considering the prospective user’s personality, individual needs, frustrations, and goals to better inform the design.

Design persona for CheckList the app.

Creating a Visual Identity

A color palette diverse enough to fit the needs of the application that maintains a cohesive appeal.

Color Pallette

color palette used for CheckList the app, including scarlet red, golden yellow, light green, deep blue, and baby blue.

Type Selection

Aa Lorem ipsum dolor sit amet.

Wireframing

Wireframes were developed to determine functionality and general layout of mobile and desktop app screens.

Mobile and desktop wireframes for CheckList the app.

Sample Pages

Mobile and desktop screens were designed to include a Home page, Task List page, and Calendar page.

Mobile

CheckList the app Calendar, home, and task screens on mobile phones.

Desktop

The CheckList Task sceen on a desktop computer that displays the user's tasks for the given day, the date and temperature outside, tasks for the week ahead, and a calendar preview.
The CheckList Task sceen on a desktop computer that displays the user's tasks for the given day, the date and temperature outside, tasks for the week ahead and a calendar preview.
The CheckList Task sceen on a desktop computer that displays the user's tasks for the given day, the date and temperature outside and tasks for the week ahead.

CheckList Minisite

Checkout the site designed to advertise the CheckList productivity app.

Visit the Minisite >

App Prototype

Test the prototype for yourself! Test the protoype in Invision
View the last project: Store Flyers Back to the top of the work page
Back to Top View the next project: Website Redesign