Techsoup Blog Redesign

Web and mobile design, responsive UI Design
Summer 2016
-

TechSoup is a global social enterprise that connects nonprofits, foundations, and libraries with tech products, services, and learning resources. Yet, my first impression was that their website did not do any favors for their credibility, nor did it really convey the global scale and impact of their operations.

Interested in gaining more experience with UI design, I reached out to the Creative Director, Marc, to learn more about TechSoup's design direction and goals. When he mentioned the possibility of getting involved in the site's responsive redesign, I jumped at the opportunity. 

I designed desktop, tablet, and mobile views with a focus on differentiating blog entries from article entries, balancing promoting content as well as products, and redesigning the comments section while adhering to existing brand identity and style guidelines. 

Mock-ups of the mobile and desktop views.

Mock-ups of the mobile and desktop views.

Current Issues

Upon visiting the site, the user is faced with a deluge of information, cluttered dropdown menus, and an all around dated-looking interface. Navigation was overloaded with dropdown menus and behemoth submenus, the user was overwhelmed by a barrage of links and CTAs, and the content on the page had pretty ineffective information hierarchy where a lot of content was in-differentiable.

 

Constraints

TechSoup was built on a legacy site and had high technical debt that its small developer team was balancing with numerous other technical demands. Due to limited development bandwidth, the Design team aimed to create a cleaner, responsive interface and a smoother user experience without significantly altering or adding functionality--in essence a visual redesign.

 

Process

Considerations

I then went around the office and asked TechSoup employees to quickly sketch/describe their prototypical version of a comments section, and then researched UI patterns for comments section and studied well-designed comments sections from other websites. With these learnings, I started brainstorming designs for different elements on a notepad, sketched out a lo-fi page layout, then moved to Illustrator to create mockups.

Related Content and Products: I tried to accomplish business and marketing goals of generating more cross-site traffic and increasing product requests by adding a sidebar with 5 items for content and products that would be related to the blog content (based on tags). The simple act of including relevant products and content would hopefully reduce friction between the user digesting blog content and engaging in actions of obtaining relevant products and related information. I chose to prioritize content after a brief survey of the Content Creation team at TechSoup and hallway interviews indicated that respondents tended to go to blogs for content and informational resources over purchases.

Comments Section: The current comment style was boxy and featured dividers that did not contribute much to the comment's content. I redesigned individual comments to be unbounded to make the page feel cleaner.  I mocked up a comments section with five visible items that was meant to be collapsible. The comments section would be collapsed by default on tablet and mobile views, in consideration of minimizing the scroll distance to the bottom of the page--so that users would be able to see the related content and relevant product links.

Differentiating admin, staff, and user accounts: TechSoup staff members often respond to user comments, but have to sign off with their names and relation to Techsoup since there was to differentiate themselves. In the redesign, I differentiated TechSoup accounts with user accounts with different colored names.

Login Flow: The site currently requires commenters be registered users. After examining the current process of commenting, it seemed disruptive that the login flow took the user to a stylistically inconsistent login page. I aimed to create a design that would allow the user to login easily, without leaving the blog page that they were on. For a registered, but non-logged-in user, I envisioned the comment field with the prompt "Login to join the discussion...". When they clicked on the text field, email and password fields and a login button would appear. At this point, they would be unable to comment. After logging in, the comment field would be enabled and the user would be able to leave their thoughts and questions.

Feedback & Critique

After completing my mockup, I sat down with the team to present what I had. The team was very helpful and some of the main feedback included being aware of accessibility standards and style inconsistencies for CTAs. There was some confusion with the login flow I proposed (which I think could have been helped with a higher fidelity prototype). With the feedback I iterated and designed the above mockups.

 

Reflections

Though this did not arise in the design critiques, I soon realized that my design lacked some critical considerations. I assumed blog visitors were TechSoup users who were not logged in, who remembered their login information, and thus did not thoroughly consider edge cases where users forgot their username, password, or both, or if a new visitor wanted to leave a comment. My existing design also made it difficult for users see where they were on the site, and lacked an option for the user to go back to the blog hub.

Designing with many technology constraints initially felt limiting, since some functionality like threaded comments, which would have led to a better experience . At the same time, it was a fun challenge to work with and optimize what was available. It was really validating to see the impact that even a surface level interface redesign could make.