Project Brief

This project was for the Information Architecture & Interaction Design course at Pratt Institute in Spring 2019. Our team of four members was assigned to do a redesign for Alexander Street's website. For my team Mochithing, the goal is how might we make the collections provided by Alexander Street more accessible and findable in the digital experience. My role in the team was the Product Manager, together with UX and UI designer. Through the project, we used Slack, Google Drive, Sketch, InVision, Photoshop, Principle as design and collaboration tools.

The Current Site(Go to Website)

wee

Our Opportunity

Alexander Street offers a wide range of unique collections to its visitors. However, they are currently using “my collection” feature as a filtration mechanism and not an opportunity to showcase its unique offerings. What is a meaningful collection and how can we surface and reframe this feature?

The Process

User Research    Content Structuring    Competitor Analysis    Wireframe Prototyping   Revision & Interfaces Design

User Research

图片d 1

We conducted user research with 8 users, including 6 native speakers and 2 non-native speakers. Also, 4 of them are undergraduate students, and others are graduate students. Our interview objectives are:                    ●How much information and structure a user had before they started
●Whether they went deep or broad
●Use of  keywords, filters & categories
●Where in a user’s overall research process they approached the website

After the user interview and observation, we concluded our findings together using the affinity diagram to identify the user need and introduced the research insights.

Research insights

I.    Users are less trusting, and they prefer to seek personal recommendations over algorithmic suggestions

II.   Users don’t want to feel dumb - encountering unfamiliar jargon is off-putting and intimidating. Users want to          feel like they are being as efficient as possible, both in terms of information and search efficiency 

III.  User’s previous habits influence their expectations- they seek out familiar experiences and carry over                        behaviors into subsequent environments 

dd

To better illustrate our users, we made a persona attributes. The attributes we used are purpose, profession, sharing or not, audio or video, mobile or laptop, broad or deep research.

We put our eight users in this spectrum and tried to group them then find some distinct type of users. Based on this spectrum, we arranged them in three personas below.

Personas

According to the persona attributes, we generated three                                                                                        personas to illustrate our users and cover most of the                                                                                                ranges, they are:

Persona 1: Alicia, an explorer

Persona 2: Lina, a new graduate student

Persona 3: Scott, a researcher

a
s
d

User Journey Map

Persona Lina(new graduate student) was taken as an example to build up a user journey map so that we would be able to stand in his shoes to think about his own experience.

ssss

Content Structuring

After we had a deep understanding of our users, we began to brainstorm for possible solutions. We sketched first to embody our thoughts.

sd
123421

Collections’ Thumbnail:

  • When the user hovers the mouse over 2 seconds on the collection name, it will show the thumbnails.
  • Thumbnails displayed the pictures relating to those sections and video’s clips.

Multiple filters:

  • Let the user keep their searching result and develop on it.
  • Saving the requirement and jump between different result to make a comparison
we

To decided the priority of our features, we graded our features and ranked them by user impact and technical feasibility. As the graph showed on the left, the features on the left up area were the great ones we wanted to choose. Therefore we decided to focus on these four features first: Brain Dump, Thumbnail for Categories, Pages for Collections, and "It's all relative."

Card Sorting

After the four features we chose, we conducted Card Sorting to figure out the rationales from users. Also, we did not want to mislead users, so we decided on four categories which close to each other. They are Language, Diversity, History, and Social Science. Because we wanted to see if users are going to sort them by task or discipline, so we mix them. Users were asked to sort 40 cards in the test.

图111片 1
11
1222

General Findings: People tend to categorize cards by disciplines. Not categorizing by the tasks logic.

Special Findings: Some of participants categorize the cards in

Mean of Categories: 8
Participant: 9

In this result chart, we found that users may categorize those card by their rationale. Maybe a more exciting or wired way. We could use this way to trigger their interest to encourage them to explore.

Original Sitemap

图片 1

Redesigned Sitemap

1233

Competitor Analysis

To see how other websites deal with personalizing user experience, we analyzed six competitors: ProQuest, Kanopy, TED, Coursera, Youtube, and Netflix. Some of them are famous in the academic video area, and some others are popular video platforms.

WechatIMG145

We also discussed the advantage that we could learn from. Here is some inspiration we got from them.

Inspiration from Competitors

sssssss
sssssssss
sssssse

Kanopy: Category Logic

Its category looks more logical and user-friendly then ours.

Youtube: Showing featured videos on the landing page

We inspired by this clear way of giving more image to users.

TED Talk: Adding tags to help explore videos

After we got inspiration from IKEA, we enjoy TED's inspiration features a lot. After clicking buttons, it will provide the personalized recommendation to users.

Low-Fidelity Prototype and User Testing

,,
lll

The image on the left waw our first sitemap, and after deep consideration, we change it to the right one, and I'll talk more about it later.

Here are the three main features we got:

  • Make categories more intuitive
  • Surface and highlight Collections
  • Help users explore Collections

Feature 1: Make categories more intuitive 

WechatIMG146

We redesigned the whole categories and collected all the main features together in this "Browse By" button. In this way, the homepage looks more clear and direct.

Feature 2: Surface and highlight Collections

WechatIMG147

We added these "Popular, Recommended and Special Collections" video features on the homepage to provide users a smooth start to hang around here.

Feature 3: Help users explore Collections

WechatIMG148
WechatIMG149

We designed this whole new features: Inspiration. Users could choose the topics they are interested in and check the video recommended to them. Also, they could add topics by themselves.

Prototype Revision & Interfaces Design

After the user test, we found there were some design could be better, so we redesign them, and here are the revised prototype, mobile version, and Hi-fidelity prototype.

Feature 1: Make categories more intuitive 

xsxc

We move the lowest level menu to the second level to make Special Collection more distinct. Also, this is the part that Alexander Street want to get attention most, and it could solve the problem that users are confused about"collection" and "video."

Feature 2: Surface and highlight Collections

dssddsddf
xxxxxx

We added the cue when hovering on the question mark over the "Special Collection" part. Also, added the special collection page in a whole new page, in this way, it could be more logical and more natural to find bu those discipline tags.

Feature 3: Help users explore Collections

zzzzz
axaxax

We moved the "Add" button to tag area to make it not too distinct, but if users want to use it, it was still easy to be found. Added the "Refresh" and "Skip" buttons to provide users more possibilities and control. 

On the result page, we add the total number of video and the page numbers. Also, made the filters on the left expandable and provided the tags they chose. In this way, this page looks simpler and functional. 

Mobile version of Feature 3

aaaaa

In the mobile version, we made it more mobile responsive, so we user square cards instead of tags in the desktop version. It could let users feel they could scroll down. For the result page, we used the card as well and hid all filters in the menu button on the right top.

Hi-Fidelity Prototype of Feature 3

Motion Design 1
Motion 2

Next Step

  • Allow users to interact with media in discovery function.
  • Re-evaluate the functions.
  • Create consistency between collection pages.