TESTBOOK

Blog and discussion forum for the Testbook Android application.


UX Design Internship

Testbook discussion forum screen
 
 


Context

Testbook is a platform for simplifying exam preparation for
cracking the most popular competitive exams in India such as Banking, Railways and GATE. It provides daily quizzes, tests,
study material and notifications for efficient learning. During
my internship, I was responsible for creating a discussion forum
and revamping the Testbook blog for the mobile app.


Duration

May - July 2016

Tools used

Adobe Illustrator, Sketch, InVision, Principle

Work setting

Individual project, worked alongside developers, designers and marketing


Needfinding

Need for a new discussion forum

  • To incorporate more dynamic content to increase user engagement

  • Multiple requests in user feedback for a discussion platform

  • To build a platform for clearing doubts encountered in tests and getting alternate solutions

  • To get more feedback about quality of questions

  • Enhance personalisation of app

Need for a revamped blog

  • Improve user experience and visual design

  • Decrease the bounce rate

  • Meet marketing requirements (strategic placement of ads and promotions)

UX analysis of existing blog

I began by analysing the existing product, specifically the Testbook blog. Though the blog was the most visited section of the entire website, there were multiple issues with the existing version. The bounce rate was high. The website and app versions of the blog were inconsistent in terms of features, visual design and content. They were also inconsistent with the overall Testbook app and website. Moreover, the website was not personalised, i.e., there was no difference in content for a logged-in user and a logged-out user. 

Blog.png

Major problems identified

  • Disharmony between web and mobile interface
    Interface (Layout, colours, categories) of web and app are incongruous

  • Varying features in web and mobile version
    Customised feed available in app and not on website, save offline option on mobile and download pdf option on website creates confusion

  • Insufficient features in mobile version
    No option to like, comment, share or search posts by category

Problems identified.png

Comparative analysis

I analysed both direct competitors (GradeUp, Pagalguy and OnlineTyari) and indirect competitors (Magoosh, Memrise, Duolingo) of Testbook. Insights gathered from direct competitors were mainly at the feature level (Eg: introduction of a 'Post my score to the comments' button in the quiz section of the Discussion Forum) and insights gathered from indirect competitors were focussed on making the content more engaging (Eg: the use of cards and visual cues.)
 

 
companalysis.png
 


Constraints

For ease of development, Testbook had decided to use a web template ('Flarum') for initial implementation of the discussion forum. This decision came with certain constraints:

  • Features in the web template must be incorporated in the mobile application as well.

  • The UX and UI must be harmonious with the web template, the main website and the mobile application.

 
 Flarum: Web template of Discussion Forum

Flarum: Web template of Discussion Forum

 


Initial sketches and defining information architecture

While defining the user flow and creating the information architecture, I studied the existing structure of the Testbook application. The hamburger menu in place was crowded and made it difficult to change destinations from anywhere within the app. After weighing the pros and cons of my suggestion, the team decided to change the navigation of the application and switched from a hamburger menu to a bottom tab navigation with additional items in the hamburger menu (such as Help, About Us etc.). I was responsible for deciding the elements of the navigation bar and hamburger menu, and created the Discussion forum and blog according to this new navigation. 

 Initial sketches and defining Information Architecture of the Testbook app

Initial sketches and defining Information Architecture of the Testbook app

Wireframes and user flow

After multiple iterations on paper and through wireframing, and getting feedback from in-house testing, I created the final wireframes and user flow for the Blog and Discussion Forum. To address the problems with the previous version of the blog, I simplified the search feature with the use of tags, increased personalisation and customisation for logged-in users, added a 'Trending' feed to increase dynamic content, and included a like, comment, share functionality to the posts. I also sketched wireframes for the web version of the blog to ensure synchronicity when it would be implemented. For the discussion forum, I used tags similar to those in the blog and web template (Flarum) to make the experience uniform

BlogWireframes.png
Discussion Forum.png

Digital Prototypes

To create the final high-fidelity prototypes, I used the design guidelines provided by Testbook. The main features of the discussion forum include the discussion feed, reading and commenting on existing discussions, starting a new discussion, following discussions, and searching using tags. I used colour-coded tags to make it easier to find relevant topics.  


DISCUSSION FORUM
 

HiFi1.png
 
HiFi3.png
 

BLOG

TestbookBlog.png
HiFi3 Copy 2.png
 
 Final prototype (Sketch + Principle)

Final prototype (Sketch + Principle)

Reflection

Being my first internship in UX design, I learnt a lot about the design process, presenting my ideas and collaborating with teams. The design team had weekly meetings with the Product Manager and the technical team, which made me aware of the development end of the process and the feasibility of design solutions. The fast paced start-up environment allowed implementation alongside experimentation and highlighted the importance of multiple iterations in the low-fidelity stages of the design process. There were a few limitations in the final design solutions due to the use of a web template and the lack of extensive user research. However, overall, I had a wonderful experience learning about design and the ed-tech industry, experimenting with Sketch and Principle, and managing expectations of different teams.