Being a Young Adult Today is Hard.
Balancing education, preparing for college,
while navigating an active social calendar.
Busy, busy, busy…

Allow me to introduce Chao-Xing.
She is a student from California, USA.
She is about to graduate High School.

I have been asked to develop a mobile app
to help make her busy life; more manageable.
Here was that process…

This is a project from my CareerFoundry’s
UI Design Certificate Program.

What is a|line?

It is a productivity app, for young adults.
I wanted it to be intuitive, fun, and interactive and create social community within the app.

Initial Ideas
* Clear and familiar gathering input fields.
* Activity badges, to create a community.
* Quick and intuitive navigation options.
* Incorporate user social media accounts.
* Allow users to customize their experiences.

ux research

To gain more perspective in building a productivity app, I was asked to do a Competitor Analysis to identify successful layout choices, and pain points that users may incur, and problems I wanted to solve.

I studied various app design patterns, including My Study Life, Todoist and Structured.
Below are a few highlights from that analysis.

competitive analysis

Stuctured
Gathering Input: The input field was clear and had a blinking indicator; to alert the user.
Miscellaneous: A series of organized badges and icons to customize user experiences.
Feedback: Clicking on new icons gives the user feedback on how to use them in the future.

My Study Life
Gathering Input: Similar to Structured, but more familiar layout and input fields.
Navigation: This side panel is clean, intuitive, and is focused on the users needs.
Social: They have a quick and easy way to connect with their community.

Early Wireframes

Splash/Launch Screens
Just a quick hello, then create an account.
Skippable after the initial visit of the app.

The Central Hub
The home page is the central hub of the app.
It is a snapshot of all of the users’ content.

Customize & Personalize
The user profile should reflect their personality.
Integrating social media promotes engagement.

wireframes

Colors & Typography

Setting the Tone.
The color blue was a seamless fit here.

The blue tones evoke a sense of reliability and confidence you’d want; when deciding to organize and add structure to one’s day.

The tones of blue chosen were inspired by nature, fitting into the culture this app is trying to promote. The central blue tone, is your blue skies and peaceful water. The darker tone adds a dependable touch to the contrasting areas.

Primary Colors

Secondary Colors

Future Iterations
It would include a palette swap for the users.

The second set of colors would be based on the purple hex above (5A4D8E). The subtle tones of purple would seamlessly fit into our design and culture. The color would appeal to a more creative, more individual demographic.