anerichouhan / lowfi_wireflows

DH-150 Lowfidelity Wireframes

Description

My project is focused on revamping the current Techcrunch website with the goal of connecting users with the content they love in a faster, simpler, and more enjoyable manner. I previously conducted a heursitics evaluation, user interviews, and usability tests, and identified user needs and pain points. I turned my research findings into personas, scenarios, and journey maps that can be found here.

My project essentially focuses on optimized content discovery. Whether it's the busy user who wants to find quick daily news on the go, the research oriented user who loves deep diving into specific content, or the archiver who loves storing and revisiting content - I want to make the TechCrunch website a space for all users to connect with the content they need seamlessly. In order to achieve this, I chose to focus on key informational architecture changes, content categorization, and flow optimizations. I introduced features like topic tags, filters, and a personal library. I also reorganized blocks of information on the site.

I pieced together some wireframes, mapped out how they would connect into a flow, and tested them out with a user. The wireframes were focused on the following important tasks:

• Finding & reading daily highlighted news
• Commenting on an article
• Finding articles specific to a topic
• Filtering articles by length, date, author, etc.
• Saving articles & viewing saved articles in a personal library

Wireframes

Here are the initial wireframes

Wireflows

The blue arrows indicates elements connecting to new screens. The Pink arrows connect backwards.

Testing

I tested the wireframes with a user and observed as they completed tasks. The yellow highlights indicate what the user clicked on. The number next to it shows the order in which they clicked on elements. The orange comments denote user confusion points and questions.

Reflection

The process

In general, the test went pretty smoothly. While clicking on paper can be unintuitive to a user, the user remain engaged and went through the all the tasks. I do wish I made the wireframes on blank paper as opposed to ruled paper so that the scans would look clearer. However, I had to make do with what I had. The user asked me quite a few questions about what should happen upon clicking on certain elements on the screens. I tried to turn the question around and ask them what they expected in order to get more insights out of the situation.

Changes

Testing with the user helped me identify several places for improvement.

• While testing, I learned that it was difficult to find the personal library feature. Going forward, I will try to make it more discoverable and accessible by perhaps changing where it can be accessed from.
• On the library page, the topics feature is under filters. Whereas on the topics main page, it is separate from filters. This inconsistency may lead to confusion in the user's mind. I could imlpement a different way that showcases the two features in the same manner across pages.
• I realized I need to re think some of my sort functionalities like sort by 'alphabetical order'. It may not be needed and users may find it overwhelming to have too many choices.