Key Wire Frame + User Testing

Asuka Li
5 min readApr 1, 2021

Based on the user testing result for last week, we made some iteration and updated it to version 1.2.

The changes include:

1.Redesign the Sessions List

· Added a ‘Me’ in green font next to the user’s own account to make them know which session they are currently in

· Used the text button of JOIN instead of image icon to make the interaction of joining another sessions less confusing for user

· Use different fonts and Icon sizes to distinguish different levels

2.Redesign the navigation bar

We combined the user flow to re-determined the most important functions of the entire product, and redesigned the content of the navigation bar based on these main functions.

· User Avatar: Manage user account, log in/out, Settings

·Home: Latest events, Join room, Schedule

·Talents: Talent management system. Contain records of students who communicated with this company in the events. Easily access to their profiles and contact them. Use filter to find people with bookmark.

·Chat: Communicate with the talent

3. Integration with the existing Newschool career platform

This product design will be combined with the existing newschool hire new platform. The hypothetical external environment is that the product can share information with the school’s career platform, (the student’s profile and portfolio URL). This information will be automatically presented to HR during the career events and in a uniform and easy-to-read form. Therefore, students do not need to fill in the profile and provide links to the portfolio again and again.

4. Design the Talent management system

· The user can visit this page at any time(during or after the career event). If the user is talking with someone, the conversation partner will appear in the lower right corner in the form of a minimized video. User can click the icon to go back to the room page or click the back button on the top left corner.

·Quick access to the students who they met with recently and bookmarked recently.

Use filter to find bookmarked talents

·All Candidates records, search engine and filter( school name,degree, graduation year, show all/ with bookmark)

· Quick access to students’ profiles for further contact.

5. Bookmark a talent

Different design trying for the bookmark

HR can mark the people who impressed them in the events, and find them easily in the talent management system. But we haven’t reach an agreement on the where to put the bookmark icon. And we will try different version and test it

The whole interactive wire frame can be accessed through this link

https://www.figma.com/proto/TW02HZ17r8GYi2FdUGLSyC/Design-for-usability?node-id=160%3A59&viewport=501%2C-71%2C0.06814684718847275&scaling=scale-down&page-id=101%3A2

User testing

Test goal

· First click test

Can the user join different sessions in the room?

Can the user navigate to the talent management system/homepage/message box/user settings?

How long does it take for the user to figure out how to move to the next person?

How long does it take for the user to leave the room/ end all session?

· Navigation test

Invite Yanzu Wu to speak with HR: John Cherry Tree

Bookmark Yanzu Wu during the conversation and find her profile in the talent management system

Show all the talents with bookmark/from Parsons school of design in the talent management system

· Preference test

Where to put the bookmark icon?

According to the goal, we have set a few tests on UsabilityHub. And we finished collecting results for First Click Test 1 & 2

But since we don’t have enough budget. We will do the rest part in a form of moderate testing with people in our social network. But setting all the tests in UsabilityHub is a nice learning experience.

Please take a look at my partner’s blog for the detail results of the testing

Overall

User testing was very helpful! For the first time, we were able to actually gather feedback from a target audience outside of our personal network. These are the general things that we must revise:

  • Visibility (incl. contrast, other visual design elements…)
  • Wording
  • Add pop-up menus or info buttons for interaction that could be confusing for some users
  • Reducing content to make it more accessible and user friendly (focusing on what’s essential only)
  • Interactions, specifically the one where a person wanted to click on the video preview

--

--