SciQuel
@Harvard E-Lab
Tools
Figma, Trello, Notion, G-Suite, Zoom
The Team
2 Co-PMs, 20+ developers, 5 designers
Time Line
Half a year: March-July 2022
Introduction
SciQuel is an up-and-coming website and app that focuses on creating media that allows everyday readers with all kinds of scientific backgrounds to learn about science. Science topics range from Biology, Computer Science, Geology and more. Users can filter through the type of information that they would like to see, like science podcasts, videos and articles. I worked on the interface for science articles, liking and sharing features, and study method (bookmarking, defining) and quizzing techniques.
My Role
I was the Co Team-Lead for Web Design, and later on a Project Manager. My responsibilities included leading critique groups, reporting progress and process improvement to management, ensure that design requirements were being met by engineers and coordinating 1-1 feedback and Figma group work sessions. I led weekly meetings with the design team to discuss upcoming deadlines and holistic feedback. Design wise, I was working with user profiles, ensuring the personalization and customization options for users to provide individualized learning.
Problem
When everyday readers want to learn more science, it’s hard to do so because science research is often inaccessible to the general public due to jargon and paywalls.
Action
Curating a design that invites users to enjoy science through different mediums and having full control of their science media intake in order to have an experience that is enjoyable and tailored to their preference in learning.
Goals
-promote individualized learning
-minimize learning curve with simple notetaking interface
-create community and other incentives users to continue learning
User Research
Through several user interviews, we found that:
science research was too confusing and complicated to understand
users are not willing to commit to learning because they don’t want to spend the money
things don’t stick when people read
Thus, we simplified quotes from these research pain points into actionable items we wanted to see in our upcoming web design. Some included having customizable learning options, allow for community commentary and a different incentive to learn everyday.
The Prototyping Process
We went straight away to trying to find designs that could be applicable to get as much attention as possible. We decided on trying to make the colors pop, but also implement modern-day application design styles like standard iconography like the pencil for editing, magnifying glass for searches and soft rectangles to indicate that a button or article could be clicked and interacted with.
As you can see, we focused heavily on trying to ensure that there was plenty for users to sift through and read about, making our screens as busy as possible and adding plenty of features like different colors per subject, allowing users and students to take notes and write definitions and take quizzes about what they have read.
Bump in the Road I
It was difficult to garner interest because there were a lack of personalization and it seemed like just a digital newspaper. It felt like a website that didn’t stand out as “easy and accessible” and more like a conglomerate of information. To combat this, I proposed to provide an emphasis on making learning fun to continue to incentivize the audience to make things easy and my team proposed an achievement system and more concise quizzing system (see below). We were zooming in on overwhelming the audience as least as possible and to make learning enjoyable by mirroring the effects a videogame or dopamine had on users in other apps like Duolingo or Quizlet.
What we thought was helpful in order to help gain attention (making the screen busy, putting in lots of different colors to help organize the plethora of information) was not very helpful. It was hard and too much for the eye to bear so we minimized to a single 5 hue color palette to maintain order for users and designers. We then decided to create a standardized UI kit, as seen here.
Finally, it was noted that there was too many subpages in order to get to the page they want like to get to do a quiz, they had to click a topic, then go on to their profile page and then onto unfamiliar words and phrases and then being able to quiz themselves on how they did (and also do the same process to refer back to the reading to get the highest score possible). To improve our design, we recreated the information hierarchy so that there is less backlog and page clicking in between, trying to keep few buttons in between and all elements on one main page. We then decided that we would focus on these three main UX goals and revamp the interface to combat these issues.
Reviewing Prototypes
Therefore, for our incoming mockup designs, we made sure to implement the changes based on our critique session:
We also decided to revamp the quiz section more to look cleaner as well as more understanding and pleasant to the eye by making the background easier to see with and providing feedback and what was wrong and how to fix it. We also tried to minimize the amount of times you need to jump back and forth with a back arrow by having a quick link to the article as needed.
To measure up to the issue of there being too subpages to navigate, we ended up making a smoother design with all necessary elements. This was the aftermath of recreating the information hierarchy where before there were multiple subpages but here everything was presented on one page.
This achievement system employed badges to use everytime the user hit a milestone. There was still discussion on what kinds of things counted as victories-should it be time studied, articles read, quizzes aced? After reflecting on the company goal of trying to expose Science, we left it at types of articles read and meeting a daily quota of reading.
We implemented a comment section to substitute the notes and bookmarks section. With our findings on trying to make SciQuel more personalized and personable, we found that there is no better way to do that than to tap into the scientific curious community and to learn from each other.
Improvements for Next Time
During this process, I found myself having to do many iterative processes because we hadn’t set up the UI kit early enough. We should’ve put this together at the beginning and tackled the style guide at the start to prevent issues with design ideation like different visions, having to critique designs that were freehanded. Next time, as a web design lead, I would also like to have reorganized the critique group meetings to be different and more engaging rather than a “show and tell” and not being efficient with everyone’s time. I plan to expedite the crit group session to a summary of work, specific questions they may have and looking at the work beforehand to give my personalized feedback from management, redefining critique group to conversation.
Personal Reflection
SciQuel was my first professional experience outside of Cornell. SciQuel helped me develop my presentation and speaking skills dramatically by working in a large startup and taught me the importance of the interdisciplinary teams that go into making a product.
Through SciQuel, I was introduced to the personalization of apps and strengthened my fondness for the small interactions like certain buttons and flows to give the user full rein on their experience. This experience sparked my interest for edutech and how much thought goes into it. Through my time with SciQuel, I improved my communication skills, leadership style and how to maintain a team’s morale.
Professional Takeaways
By leading a design team, I learned how to use Trello and practiced G-Suite skills to organize feedback, hold meetings to report back to engineering leads and managers and provide documentation for product progress checks. I also attended programming meetings to help with implementation.
This project helped trained me to improve efficiency and design skills as being one of 15+ designers in an edutech startup, as a project manager of a team of 4, working closely with management and team leads in a small group of 6. I was able to learn how to critique and provide feedback in within 1-1 meetings and teaching Figma to others.