Kognit Flashcards: Memory That Lasts

Next Step: Coding

Designed Library Section to an extent.
Since I have designed enough to understand the design language of my app msyelf and get an overall idea about how & where things should be, I’m halting the design process for now to save time as I must ship before 31st march… not much time left to code.
At the very least, I’ll code the back end logic for card creation, review & dashboard elements and ship a partial but in a way, complete & good project.

I’ll come back at times when needed.

Multiple things this time.

• Made refinements to the dark mode styles.
  Designed:
• card drop down
• card review (front)
• card review (back)
• create card (front)
• create card (back)
• create deck
• create shelf
• scratchpad
• tested these designs’ modified version for mobile layout
• added flow to try, test & get feedback from friends

IMP NOTE for Reviewers: The next devlogs will only be major ones to avoid devlog clutter.

In this Devlog:

I designed Dark Mode by learning more about variables, setting up new values & making a few manual modifications
Don’t mind the cut-off search bar in the attachment. I’ll fix those things when I’m coding and make it responsive.

Mini Milestone: Completed Dashboard for Mobile

These are for light mode only, dark mode is yet to design.
Also, the designs are not responsive. I don’t find the need, for now at least.
I’ll most likely add responsiveness when I code.

Milestone: Dashboard Design Complete

• Improved streaks
• Improve mini-analytics
• Added “today at a glance”
  – The round progress display took me over an hour to figure out (I tried a couple of things – all complex to design at my level)
• Added Scratchpad
• Changed the overall Dashboard layout

Major Leap on the Dashboard

• Updated Views (Today, Week, Month, All Time -> 7 Days, 30 Days, All Time)
• Updated color for selection on views
• Revamped mini-analytics so that it feels like the dashboard
• Completed streaks panel
• Changed Search Text
• Added red & green color variables
• Minor changes in alignments in some places

Completed Mini-Analytics on the Dashboard & Started Building the next: Streak

Minor Update

• Updated font variable & re-aligned what was needed.
• Centered Search with the dashboard screen. Shifted views accordingly
• Further refined action buttons

This devlog contains ~2hrs of time which should have been added in the last devlog; it couldn’t due to a lapse error I was facing.

Anyways, so in the rest ~2h18m, in ~60% of the time, I added the two action buttons which are one of the most important and will be consistent across multiple sections of the app. I completely redesigned the buttons twice and tampered a lot with it to make it look good. It’s still not up to the mark imo tbh but it’ll do for now. I spent the rest of the time enhancing some icon effects for the sidebar & updating variables.

Updated top navbar & completed sidebar (Missing 2hr to be added in next devlog due to lapse error)

• Added & updated color, font & size variables
• Refined layout
• Added feedback for buttons & current selections
• Added shadows & blurs for better aesthetics
• Updated colors across typography, subtle but powerful (imo)
• Separated branding area
• Have created three variants of icons for theme selection (system, dark, light)
• Planned sidebar content in detail
• Have created two variants for every menu option except theme, one variant to display while it is selected (active) and another while it’s not selected (inactive)

Feedback is welcome.

Attachments: Some Planning + Paper Wireframe + Hi-Fi Figma Prototype (so far)
Don’t mind my handwriting :melting_emoji:

After abandoning the last design structure and pivoting to a new one, I have made some progress with this.

This time, before beginning, I did some paper prototyping (wireframing).
So far, I have:

• Completed wireframing
• Started in figma
• Completed the top nav bar (common for all app sections)
• Completed the view options (common for analytics & most likely dashboard)

Next Step: Making the sidebar

The last dashboard style (as in attachment) wasn’t exactly what I was looking for.
Designing this gave me a lot of design insights and helped me learn more in Figma.
….
I’m pivoting towards a slightly different concept, inspired by insights from the last one & feedback from friends & cousins. – which you will see in the NEXT DEVLOG.

I’ve been progressing with the designing – wireframing + some colours for less strain on my imagination.
I’m currently wireframing the dashboard (homepage) of the app. – So far so good.
..
It’s been slow because I’m still learning Figma. There’s a landslide of a difference between my first & this (3rd) project but it’s still not fast or efficient or where I want it to be.
..
Anyways, I’ve added some attachments for anyone who wants to check it out.
Feedback/Critic is always welcome & appreciated!

Since voting resumed, my first published project has received repeated feedback for more frequent & more detailed devlogs so I’ll be following that now.

I have now:

• created wireframes (with some detailing & images as well) for onboarding pages – though it’ll need refining at later stages
• have been simultaneously creating one for desktop size (macbook air) and one for phone (iPhone 17)
• created some images using gemini for an onboarding page – have mentioned in the main AI Usage part of the project as well.

Honestly, I myself feel this work is kinda sloppy.. idk… let’s see.
Feedback is always welcome, of course.

NOTE: The attachments are widely zoomed out to not reveal too much and also, save myself from embarrassment :melting-emoji:

I have:

• created more exportable & usable logo, icon sizes with transparent & non-transparent options.
• created typography variables.
• written down a release plan (thus, the development plan).
• created the promotional website sitemap.
• created the app userflow map (for first release).
• written down some architectural points (based on my limited knowledge).

I did all of this in Figma, while also learning it.

I have now moved to wireframing and have created designs for registration page, login page & account recovery page for both desktop and mobile.

The feedback I received from people around me was not as good as I was expecting.
Made some tweaks to the design.

Feedback is welcome!!!

I have completed making the logos, icons in different export sizes (16x16, 32x32, 64x64, 256x256, 1024x1024 – for now).

This is the third app I’m working on and I can see that my design is improving.
This time I took care of the minute details too; I have learnt that the little tweaks matter more than I thought.

I’m open to suggestions, critics & applaud!

I am finally starting work on the first project I created on flavortown.
I have created the favicon and created exportable for different dimensions.

Next Steps are creating the complete logo and adjusting for a dark icon.