I attempted to redesign the TechCrunch website to make it easier to use and more valuable to users. The purpose of this website is to provide people with the latest news in the realm of technology and business and provide people with the ability to learn and stay informed. The purpose of these high fidelity wireframes is to visualize new features like categorization of articles under tech topics and saving articles to a personal library.I went through several rounds of iterations and kept asking users around me for feedback to improve upon my designs. The prototype submitted provides users to do the following tasks:
Tasks
- View News of the Day articles quickly as soon as one opens the site
- Search for articles through systematic categorization. Ex: View all Attificial Intelligence articles in one place
- Save or bookmark articles to a personal library where the user can view all their saved content (even in catrgories)
- (EXTRA TASK) Subscribe to newsletters of the user's choice
Representative Screen Designs
Icons
I used icons from the Material Design UI kit in order to maintain a clean consistency across the websit. Some of the key icons I made use of included chevrons, notifications, Bookmark, search, and filter. The benefits of using an established UI kit were that it maintained consistency, and used icons that people are already familiar with, making it easy to recognize calls to action. One of my users remarked that the "bookmark" icon is very well recognized.
Typography
I wanted the font to be easy on the eyes because this is such a text heavy website. I tested several fonts with users through a survey to see which felt easy to read while looking good aesthetically Reading articles with serif fonts. 64% of users picked Roboto and so that's what I chose as my sites main font.
Colors
I did not want to stray from the TechCrunch color of green. Green respresents freshness, growth, progress, and energy - all important aspects of technologicall advancements. So I picked several varieties of green and picked the one that permormed best with accessibility checks.
You can find the video of the impression test here
Summary of Findings Overall, the user quickly understood the purpose of the website and elaborated on the tasks they could perform. They did not mention the library function but touched upon all other tasks that could be achieved through the website. Intrestingly, the user asked sbout events and why that is on a Tech website. Unfortunately the events page wasn't made yet so I could not demonstrate it. Compared to my last impression test, this performed better since I made some titles bigger and added more descriptive text.
Here's a screenshot of my Accessibility check report for key colors
You may find my working prototype here.
You may view all screens here.
Here's a screenshot of all my screens linked to each other to form a flow.
To more simply understand the key steps, I made a flowchart that represents the three main features:
You may find the audio to the cognitive walkthrough here.
Summary of findings I did walkthroughs for two tasks - accessing saved articles and finding all articles under artificial intelligence. The user stated that over all the flow was pretty clear and easy to navigate, with a decent sense of progress. Although the user was in general able to understand both but, he had some points of questions and confusion. The user asked about whether the categories in the personal library were generated by TechCrunch or the user themselves. They expressed how it might be cool to give the user the ability to give their own labels for better organization of content in the future. He said that the top navigation bar may need more of a distinct separation since its the same color as the screen. He also pointed out a mistake where one of my chevrons were upside down. I also realized that not all my pages are linked correctly and that's something I'd need to revisit.
SOME of the GUI Changes I made based on feedback from the class review as well as the impression test and cognitive walkthrough I did after
1. Adding the text "TechCrunch" underneath logo
Users from class metioned that people might not know what TC means and having the name of the website there is really important. So I incorporated it underneath the logo as follows
2. Implement a Next button at the end of article
Users recommended that after reading one article, they should have the option to read another related one. So I implemented a "Next article" button to maintain a better sense of continuity.
3. Added done and clear filter buttons for filters
Based on my classmates feedback, I altered the action of closing filters to provide users with more feedback and a sense of security. Upon testing, I found that this eliminated the initial confusion around filters.
4. Implemented a drop shadow in the top nav bar
Some users expressed confusion about how the top navigation bard is not the most distinguishable and so they did not know the could click on it. In order to make it stand out more, I added a drop shadow to make sure users know it is separate from the main site content.
5. Eliminated some Extra steps
Based on the feedback I got from users I saw that for my library feature, it was possible to achieve the goal in one less step by rearranging some content. So I went ahead and did so to make the task easier.
6. Ensure better wireframe connectivity
During several tests, not everything was connected. So I spent some time correcting the erroneous connections, and adding more necessary connections in the prototype.
The design and testing process was a great learning experience. I had several moments of confusion and frustrations when I did not know how to implement some aspects of my GUI. I found it helpful to draw inspiration from other websites and see how they implemented different flows. During user testing, I realized how important it is to make sure all the screens are connected properly. Overall, this was a wonderful process and I'm really happy to have put all this work together!
Design Changes Going Forward
Based off of the feedback I got in the latest round of testing, here are some things I might want to change:
1. Add pages for Events & ExtraCrunch
Because these pages are not related to the three tasks, I did not include them in the prototype. It might be useful to design them and complete the entire website.
2. Potential new feature: Custom Tags
Based on my last test, I found that it may be cool to give the users to make their own tags to organize their library. This might be a cool feature to design and explore in the future.