Steven Shing

A project made for a Human-Computer Interaction UI-based course. I designed a mobile app for organizing and creating stories and their components. I made mood boards, flow charts, wireframes, mockups, and a design document. I also did some testing of the interactions and overall aesthetic using paper mockups. Below are some samples of pages in my design document. Check out the full design document through the link that says "View Website" on the upper right of this window.

These are the pages for my conceptual goal for the app as well as the persona I made for the target audience I imagined would be using my app - people who want to organize their creative writing ideas on a busy schedule and who also are not full time writers.

The left page here shows the steps I had my testers go through with my paper testing mockup. The right page shows the beginning of my test report.

This shows the end of my persona's scenario for using the app on the left. The right shows the functionality I envisioned the app would have.

These are some of my wireframe sketches as well as the base I used for my paper mockup.

These are two mood boards I made for two different aesthetic directions. The left uses more earth tones similar to aged paper and ornate typefaces for an older look. The right uses more blues and yellows like colorful loose leaf papers or Post-Its and sans-serifs for a more modern look.

These are two different initial comprehensive layouts. The left uses the more earthy and aged mood board and the right uses the more colorful and modern mood board.

The left here shows the flow chart for navigating the app. The right shows the final comprehensive layouts I chose to go with, as well as details as to what each component does on the side.