XPert advice for any career

XPert is a web app designed to help people leverage their network and connect with subject-matter experts of different industries. XPert will help people organize their research; elevate their learning and skills; and advance their careers.

MY ROLE
Strategy, UX Research, Information Architecture, Testing, and Interaction Design. I received great feedback from Wesley Casswell, Joshua Weber, and other peers.

Screen Shot 2019-07-21 at 6.58.14 PM.png — Students and professionals need an easy and efficient way to access the right information to any question so that they can learn and share the knowledge.

Screen Shot 2019-07-16 at 6.20.02 PM.png — Understanding the User

I conducted 3 user interviews to understand a user’s motivations, frustrations, and other factors related to career learning, personal research, coaching, mentoring, etc. To gain further insights, I synthesized the results using the Affinity mapping process.

Screen Shot 2019-07-16 at 6.20.17 PM.png — Key Insights

Users need an experience they can trust. We will need to Integrate LinkedIn’s APIs to build community and networks.
Curation and management of content is key. People will pay well for high value proposition that saves them time and money.

Creating Personas

I created two personas—Jennifer and James—based on the user interviews, and insights discovered from Affinity Mapping. The personas helped me empathize with users and design from two different perspectives. Jennifer represented the audience looking to connect with an expert, and James represented the experts themselves.

Screen Shot 2019-07-17 at 12.17.55 PM.png

Screen Shot 2019-07-17 at 12.18.21 PM.png

User Journey Maps

To help visualize how a user would interact with the XPert app, I created user journey maps to help me see the product from a user’s point of view over a period of time using real world scenarios.

Screen Shot 2019-07-17 at 12.33.43 PM.png

Screen Shot 2019-07-17 at 12.34.07 PM.png

User Flows

To better understand how a user would navigate through the app, I created user flows for 3 primary tasks. This helped me sort out the user journeys before designing prototypes.

Screen Shot 2019-07-17 at 12.34.29 PM.png

Screen Shot 2019-07-17 at 12.34.49 PM.png

Screen Shot 2019-07-17 at 12.35.00 PM.png

Site Map and Card Sorting

I conducted an open card sort to refine the site map. Participants showed an interest in uploading their own documents and placing them in corresponding categories. I decided to include this feature in addition to organizing user’s bookmarks and saved articles.

Screen Shot 2019-07-17 at 1.38.11 PM.png

Wireframes and Prototypes

I created low-fidelity wireframes through rapid prototyping and then refined them with mid-fidelity and high-fidelity prototypes using Invision. The prototypes focused on three main features—Search for content, Search for an expert, and Search for a webinar.

SKETCH PROTOTYPES

Screen Shot 2019-07-17 at 2.21.52 PM.png

LOW-FIDELITY PROTOTYPES

Screen Shot 2019-07-17 at 2.40.47 PM.png

MID-FIDELITY PROTOTYPES

Usability Testing

The goal of the usability test was to determine the usefulness, satisfaction, and learnability of using the app. I also wanted to determine what errors were made, and how severe they were. I recruited 6 participants and conducted moderated tests, both in-person and through Skype. In-person tests were in the testers work environment.

It was very useful to review recordings of the tests in both audio and video. Participants were allowed to ‘think out loud’ and I was also able to track eye and finger movements.

Screen Shot 2019-07-17 at 4.38.13 PM.png

Refining the Design

The next step in the journey of creating XPert was to define and create it’s design documentation. Below, you’ll see a few examples of what I included in the documentation.

LOGO

XPert’s logo and tagline are meant to be read as one phrase. As much as possible, use the logo and tagline on one line and use the same x-height. If width space is limited, use the alternate stacked combo with the tag line at half the x-height of the logo. The XPert logo can be used alone but the tagline should be used with the logo.

Screen Shot 2019-07-17 at 6.42.32 PM.png

Screen Shot 2019-07-17 at 6.42.54 PM.png

TYPOGRAPHY

XPert’s logo and tagline uses Roboto Bold and Roboto Light Italic but the contents of the application uses the Avenir font family. These type faces have a larger x-height and is less condensed for optimal readability.

Screen Shot 2019-07-17 at 6.44.36 PM.png

ICONOGRAPHY

XPert’s Icons should mostly be used in combo with labels. Alert Icons should always accompany an alert color. Main Navigation Bar should use 32x32 pixel icons. Log In icons should be sized at 20x20 pixels. All other icons should be sized at 24x24 pixels.

Screen Shot 2019-07-17 at 6.45.50 PM.png

ACCESSIBILITY

Global accessibility standards should follow recommendations from the World Wide Web Consortium (W3C)‘s Web Accessibility Initiative (WAI). Web Accessibility Initiative (WAI) create and maintain Web Content Accessibility Guidelines (WCAG).

Blind Users: Layout of content should follow a natural order of information from left to right and provide an html description of images to be screen reader compatible. We partner with www.nvaccess.org to further design solutions for the best screen reader experience.

Color blind users: Features, alerts, buttons, or any designation should not be only represented with a change of color. All designations should be accompanied with icons and labels.

Deaf users: All videos should include an option to turn on captions. Filters to search for an expert should include an option to filter by experts who know sign language.

Final Design

Well, it’s final for now. I’ve fine tuned the UI for the Search for an Article and Search for an Expert features and will need to go through a round of testing. Based on the results, I will be able carry over the work already done to finish out the Search for a Webinar, Search for Friends, and My Research.

LOG IN & DASHBOARD