GSoC coding period begins!

Adding visualizations, ES6 destructuring, Code refactoring, User testing…

Sejal Khatri
Jun 18, 2017 · 3 min read

Adding visualizations to the User Profile Pages.

Adding Visualizations for the Total Courses/Programs and total Students/Editors taught by an user to the User Profile Pages, using Vega specification.

  • Visualization for the Programs Taught by an Instructor — Programs are distributed on the time scale to show the period in which user was active as an Instructor.
  • Visualization for the Editors taught by an Instructor — Number of editors distributed on the Y scale and plotting the time when they joined the courses taught by the user. Helping user to see the increment in the editors count taught by him.

Code refactoring using ES6 destructuring syntax.

Refactoring a React component into a function. Sage explained it to me in simple words saying — “The idea is that, since some of the React Components strictly take props and render HTML, we can write it as just a plain function of its props that returns the JSX, which otherwise render() would return. The other nice thing is the destructuring of props in the function’s arguments, So we can just call them by the prop name, rather than using this.props.something everywhere in the component”

Link to the Commit made for refactoring the ByStudentsStats component and StudentStats component Using ES6 Destructuring syntax.

We are using arrow functions in the code.

Basic Syntax —

func = (param1, param2, …, paramN) => { return expression;}

Advance Syntax —

func = ({param1, param2, …, paramN}) => { return expression;}
// Parenthesize the body of function to return an object literal expression

This Syntax is used for the Main function which accepts the object and assigns properties of an object to variables of the same name. Destructuring can be applied to function arguments that are objects or arrays, that’s why we use the advance syntax.

User testing session with Shani Evenstein.

In User testing session, we ask the user to do a task on the dashboard so that we can see how he/she uses it and talk about anything that is confusing about it.

Shani uses the dashboard as an instructor and programs leader. She had some feedback about the Dashboard, I’ll mention few features which Shani suggested we should add to the Dashboard —

  • For an instructor or admin: Finding out which user is still active after the course has ended, Basically a way to track users.
  • Able to fetch old data from the Education Extension into the Dashboard, but Sage mentioned that it is not feasible.
  • Include page views of old programs for historic courses, while calculating statistics for the page views of an article — currently it displays zero page views, so it seems that some courses didn’t have an impact.

Shani helped us comprehend the user understanding of the Dashboard and it helped me prioritize the tasks to be completed. I am yet to have a in depth discussion about this with Sage.

Week 3 of Coding has begun for which I have submitted few patches and now working on the suggestions given by Shani, I’ll update you guys of the further enhancements made to the Programs and Events Dashboard in my next blog post. Stay tuned!!

Sejal Khatri

Written by

User Researcher| UX Designer | Information Architect — Actively seeking internship opportunities @ United States