Editor Portal for ProActive

ProActive is a digital platform that connects young adults to professionals, through an engaging and personalized career exploration experience. Regarding content for creator’s inspiration, we try to establish the sense of creativity and interests for youth. Therefore we choose some stereotype-smashing personas: the female pilot, lighting engineer and the Imagineer in the Disney studio, etc.

To try the interactive prototype on your own devices, click here.

Design Focus

ProActive is a digital platform that connects young adults to professionals, through an engaging and personalized career exploration experience. To standardize the content format and flow, we design a separate portal for creators.

User Profiles

According to our research conducted with stakeholders including high school teachers, students, and professionals in various industries, our user could be comprised of the following three fields:






  1. We invite and interview individual professionals who are passionate about their jobs to contribute their personal stories.
  2. We partner up with high schools to incorporate content creation in students’ coursework, or extra credit projects.
  3. We leverage the Corporate Social Responsibility and Campus Recruitment programs to obtain company curated content for our platform.

User Flow

By mapping out the user flow, we can identify that the primary tasks for content creators(column on the right). The primary functions are to log in, create new content and submit. Besides, trending materials exist for creators to browse and get inspirations; while the draft box gives the agency for creators to perfect their works.

Rapid Prototype with Axure

The workload for illustrations was majorly generated by me, while all the team members agreed on the visual style of red. Ultimately, we went with a passionate style and image-rich visual presentation. According to the Guide of Content Creation, we want the final performance to be both creative and standardized with necessary parts. Therefore, text boxes, image layouts, social media handles, and diagrams are listed in the side toolbar,  the creator will be more concentrated on his/her content, rather than focusing on the format.

User Testing

Think-Aloud on Site

Number of Participants: 3

Tools: Quicktime, Chrome with Axure extensions.

Core user tasks:

  • If you are a working expert, who is trying to curate your profile
  • If you are a high schooler, who is creating a profile to earn extra credits.

When you are performing the above tasks, please think aloud.

Heuristic Evaluation

Since this project is from the UX Design Studio taught by Dr. Ralph Vacca, all our digital wireframes were submitted for Dr. Ralph for review and giving feedback.

Lessons Learned:

Flushing out more details on the content

Because we focus more on the content of pictures, less workload was distributed to the texts. In Dr. Ralph’s feedback, he pointed out that “more than lorem ipsum, would help us get a solid feel the content itself. ”

Visual Rework

More obvious signifier

To ensure the quality of content, the creator needs to follow the guideline. Instead of frequently checking what is written in the guide and jump to the editor back and forth, users want more obvious hints on the editor interface and hence keep their experience uninterrupted. For instance, when the user sees the widget to insert a picture, double-clicking might not be intuitive for them. Puting instructions on the widget will help users to figure out what to do sooner.

Red only indicates the action

In the previous version, I tried to utilize the red feature in some titles to demonstrate the style. However, users are somehow distracted by some unclickable red characters. As a result, the titles to be emphasized are changed into black, and some are in bolder typeface instead of using red. Because red is only used for where the action happens to keep the constancy of style.

White background for readability

The former design used the red background color to warn users that not to submit empty content. However, according to the feedback, red made user emotionally intense, and cannot read through the text message either. The last iteration was changed into the light background with dark texts, while only warning by color on the symbol.

Project Information

Our team presents ProActive as one solution for the job hunting issues among teenagers. We were the participants of NYC BigApps 2017. Check our Project Site.