Check out the prototype here:
One of the most effective ways for me to study is to create mini-quizzes or mock exams for myself to practice. I find that practicing problems helps me learn concepts better, and remember them.
planetarium is an online platform that allows students to create and share mock exams. The features of this website were inspired by Spotify, Leetcode and Quizlet. The design of the website is guided by a subtle outerspace space and planet theme.
What it does
When opening the prototype of planetarium, users are greeted by a homepage that briefly summarizes what the platform is about. Users can then log in through a login modal. Upon login, users are greeted by their customized planetarium of study plans. They can view their most recently used study plans called playlists, check up on their friends, look at their top topics, and browse through all topics.
Clicking into a specific playlist, users can then see all the items in the playlist. There are three types of items that users can add to a playlist. Multiple choice/short-answer questions, calculation/long-answer questions, and a review article. Each item also has an associated difficulty level, and users can see when they added the item to their playlist.
Users can also drag and drop items in the playlist to reorder them. To add items to the playlist, users can either click Find More where they can browse items created by other people, or click Create New where they can create a new item to add. There is also a recommended list of items that users can add to their list based on the topic of the playlist.
Going into the Create New interface, users are shown a form where they can fill in details about the item such as the title, type, difficulty level, and topics.
Users also have a Created by Me playlist which includes all items they created. Clicking into any item of any playlist allows users to start the playlist at that item. When users are in Study Mode, they view one item of their selected playlist at a time. Playlist controls allow users to stop and start their study timer, go forward and backward in the playlist, shuffle playlist items, and repeat items, much like a music playlist.
To see all their created playlists, users can visit the My Playlists page. They can also create a new playlist from this page.
How I built it
Figma for the entire project. I used both the Design and Prototype modes.
Challenges I ran into
This was the first time I ever used Figma, or any kind of prototyping tool. Some things that I did not understand how to use at first, but eventually got a hang of included:
- Smart animate
- Component variants
Coming up with a theme and colour palette for the design was also something that took a good chunk of my time.
Accomplishments that I'm proud of
I am proud of creating an almost complete prototype with no help or prior experience.
What I learned
I learned a lot about how to use Figma! I learned how to create frames, styles, assets, components and component variants, prototyping animations, and more. I also learned a lot of useful shortcuts. For example, I learned how to use smart selection and how to use a random name generator plugin.
What's next for planetarium
- Add interactive components (this Figma feature is currently in beta mode)
- Create a discover page where users can see playlists created by friends or other people
- Add contests for friends to compete in
- Create a more cohesive and consistent design style