Sophia Liang Portfolio
Home Resume Contact
HomeResumeContact
Sophia Liang Portfolio
theidea.png
inspiration.png
probstatement.png
research.png
comp.png
interview.png
persona.png
wireframe.png
flow.png

Initial wireframe: After conducting paper prototype tests, I received positive feedback and went on to design the main features into separate tabs in the navigation bar. I focused largely on the search and discover process and conducted usability tests with a prototype of my initial screens. I learned there needed to be a few adjustments. On the keyboard screen, having the locations populate before hitting the actual search button caused users to start clicking into locations immediately. The result I intended was for users to search in a desired area first before viewing results. In addition, users found the filter box layout hard to understand.

 Initial wireframe: After conducting paper prototype tests, I received positive feedback and went on to design the main features into separate tabs in the navigation bar. I focused largely on the search and discover process and conducted usability te

Revised wireframe: After the first few iterations, I started building the UI elements. I added a bright color scheme and kept rounded buttons throughout for a youthful, bubbly feel.

In addition, I updated the search feature by removing locations on the keyboard screen and changing the filter to have drop-down menus and toggles. I changed the profile option to be able to more easily view other’s profiles and see their recent activity. This adds another layer to the main feature of the app - discovery.

 Revised wireframe: After the first few iterations, I started building the UI elements. I added a bright color scheme and kept rounded buttons throughout for a youthful, bubbly feel.  In addition, I updated the search feature by removing locations on

https://invis.io/SANAZS8XJQ5

https://invis.io/SANAZS8XJQ5
space.png
conclusion.png
summary.png

Original User Flow

Due to the complexity of the user flow (pictured above) and changes in the UI desired by the client, the development team had a difficult time reading and interpreting the flow and keeping track of which changes had to implemented and which ones had already been done. I was tasked with revising the entire flow into a format which would be understandable for Unity development.

Original User Flow

This is a sketch provided by the developers to convey how they wished the user flow to be structured. As many screens had repeating sections, we combined all similar states into the one extended screen showing all variations. This particular extended screen shown is for the Product Detail variations. The Product Detail is shown upon selecting a shoe in the Releases tab; depending on the current status of the raffle and the user, certain sections will appear and certain texts will update (e.g. You Won or You Lost).

By using this format, what was once approximately ten different screens in the original flow, has been reduced to one “extended screen” in the new flow.

 This is a sketch provided by the developers to convey how they wished the user flow to be structured. As many screens had repeating sections, we combined all similar states into the one extended screen showing all variations. This particular extende

This is the Product Detail extended screen following the format shown above. Variations are shown next to their respective sections.

After using the extended screen format for the remainder of the screens, I re-wired the entire flow to connect all the revisions.

 This is the Product Detail extended screen following the format shown above. Variations are shown next to their respective sections.  After using the extended screen format for the remainder of the screens, I re-wired the entire flow to connect all

Revised User Flow

In order to update the user flow, I communicated closely with the development team to reduce repeated sections, minimize arrows, and create consistency in sections throughout the screens. To keep consistency, I had to delete, move and create new sections throughout the app.

Additionally, I acted as a liaison between the product manager, client, and developers to update or redesign certain screens (e.g. the Rewards feature) through several iterations.

Revised User Flow

SMS Concept

One of features I worked on that was added late into the development process was having first time users verify their phone number through an SMS code. This is a rough diagram sketch of how adding an SMS confirmation to the sign up process would affect the flow. The dashed lines represent the case when a user has yet to verify their phone number.

SMS Concept

Implementation

I designed the SMS process to keep consistency with the remainder of the app. I kept the black CTA constant and important texts were bolded throughout each screen to provide an intuitive process.

Implementation

Notification

The notification feature allows property managers to keep track of daily tasks such as sending late rent notices, addressing violations, scheduling meetings and more.

Notification

Tenant Search

Find and review tenants within client’s database to ensure they are trustworthy individuals. The tenant score is calculated through various weighted factors within the rating process.

Tenant Search

My Properties

Store all owned property's dimensions, floors, square feet, and other information. Users have the ability to modify, edit and update for upkeep of records. Also, search bar on the first page allows for easy navigation for those with extensive property lists.

My Properties

Services

This feature allows property managers to browse through various services including handymen, lawyers, and form templates. Professional services will have each contact’s information stored and allow user to call or email as desired. The stored form templates (Renewal, Agreements, etc.) can be shared to the appropriate person.

Services
Pearson
Pearson: LTI-A Tool
Instaworthy
C & C Laundry and Cleaner
Sneaker Raffle App
Property Management
HomeResumeContact

Sophia Liang 2025 ©