We specifically chose to focus our efforts on a cart targeted at grocery stores for this initial prototype.

Our smart cart has functionality to import your grocery list from the grocery store’s preexisting smartphone app. It then shows the user a map and a route to follow to get all their items.

As the user checks items off their list, they get added to their virtual “cart”. Then when the user proceeds to checkout they can review their virtual cart and pay for their items right at the cart.

View it live | Source code

Design Stage

We began by brainstorming and gathering our requirements.

For this project, we wanted to make something that was ergonomic and intuitive for the users. This led us to consider design components such as an advanced scanner that monitors all products taken in and out of the cart, and make the navigation and shopping list UI easy to use and straightforward by placing the list next to the map, which allows a seamless transition between selecting and editing list items and locating them in the store.

Some of our initial ideas involved a 3D navigation interface.

We quickly realized however that although that was a cool idea it was not going to be feasible to implement in the time we had. We iterated on that a few times and came up with a similar design with a 2D map that still communicated all the same details.

We then needed to iterate on that design further to include a storyboard sketch in which we showcased how the user would interact and progress through our app.

Finally we needed to create a hybrid sketch of how our interface would work on an actual cart.

The App

The app works by linking your list of items from your personal profile, the one you use to login, and generates a path for you to follow to get to those items. It also gives you directions as to where on the shelf those items are. The “magic” is that it scans the barcode of the item as you put it into the cart. After this you can checkout and pay right at the cart. No need for checkout lines.

The pages are as follows:

Login Page

This page consists of a QR code on the left which connects the grocery app on your phone to the shopping cart, allowing a quick and easy way to load your shopping list for navigation. Otherwise, users can login with their username and password. If they don’t have an account (or don’t want to log into it), users can simply click the “No thanks” button on the bottom.

For testing purposes, clicking the QR code, Login button, or the “No thanks” line will take you to the next page of the application.

Shopping Cart Page

This page’s layout has the map you follow on the left side, the grocery list in the middle, and a static image of the shopping cart on the right. The map is supposed to automatically tracks your movement, leading you to the first item on the list. When you arrive at the first item, you can check off the item as needed. When you’re finished you can push the “Checkout now” button. This will take you to the payment page, where the items you’ve checked out will be added to the list for purchase.

For testing, select the “Next Step” button and the map will update as it follows the path to the item. You can click on the items to strikethrough them (which add them to the purchase list), and clicking “Checkout now” will take you to the payment page.

Payment Page

The X buttons and Add Item fields are not present in the hosted version of this project. We ran into merge conflicts with little time to fix the code, and so this section was commented out of the payment page component. This functionality has been restored to show how it should look if there was enough time to fix the conflicts.

The payment page consists of a review section where you can view your items listed for purchase, their quantity, cost, and total price. On the right you can tap to pay with a card, or you can select “I only have cash” where an employee would help you complete a cash transaction.

For testing purposes we added X buttons to eliminate items from the list, as well as an add item option where you can add items not on your shopping list. This was implemented as the “magic” of the shopping cart would automatically scan items as they were added or taken out of the cart. This would add the item to the purchase list or remove it, respectively.

The “Cancel Transaction” will take you back to the login page.

Implementation Details

We implemented our app using Svelte (without SvelteKit).

Beyond our initial sketches we finalized the look and feel of the application using Figma and used Blender for our hybrid sketch/3D model.

Our screens are managed from one main entrypoint which allows us to easily share/bind data between screens.

Our map component uses a combination of Svelte/HTML and SVGs to create what essentially consists of a bunch of modular tiles that can be rendered according to user interactions. In the real cart the user would progress simply by moving the cart and adding items that would be scanned, however for the sake of this demo app we have implemented a “Next Step” button that can instead be used to make progress along the route.

Future Work

If we were to actually implement this on a real cart we would have to first of all hook up a backend and/or database.

Additionally, due to some of our time constraints we had to hardcode some of the items and routes. In the future we would like to implement an actual pathfinding algorithm that could adapt when new items are added to the route.

Finally, we had some additional testing functionalities like adding and removing an item from the cart that would normally be handled by the cart automatically that we had code for but ran into last minute merge conflicts and didn’t have time to add to the hosted app.

For this project I built a simple reading tracker and note taking app. The need for this app arose out of my own notetaking and logging needs when reading books for a book club I am a part of.

I like to take notes about the book as I am reading it, however all the existing solutions I have found are not well designed for books. This app aims to fix that!

I had a lot of fun creating this app and I hope you enjoy it.

View it Live | Source Code

Design Stage

With almost any project a lot of serious design work has to happen before you can even start thinking about writing a single line of code. This project was no exception!

I broke my design process for this project into a few non-linear steps.

Interviews

An important part of solving any problem is making sure you completely understand it and what makes the current solutions insufficient.

This is where conducting interviews is really beneficial.

For this project I conducted a couple interviews, one more formal, the other in a more informal group discussion.

From those discussions I came away with a list of things people liked and disliked about their current reading tracking solutions.

NOTE: The following table combines feedback from multiple different sources discussing features of several different solutions.

In addition to understanding what people liked and disliked I wanted to get a good grasp of the motivations people had for tracking their reading.

Everyone I interviewed for this project was part of their own book clubs. As such, notetaking for discussions was the primary motivating factor for tracking their reading.

Some also liked to have a way to keep track of what books they had read and what they thought about them.

After all my discussions and interviews I felt I finally had enough of an understanding of what was important to people in a reading tracking application to begin sketching some initial designs.

Sketching

Especially after conducting my interviews I had a lot of different ideas when it came to the potential layout for my app. By sketching these different ideas I was able to get a much better idea of how each potential layout would look and work without having to go through the whole process of designing and developing each one.

I like the look and feel of physical books and bookshelves so I tried a few designs that really leaned into that.

Another design was essentially a physical notebook where each page contained scrollable notes about a specific book.

Other designs leaned less heavily on skeuomorphic elements.

For example this design was heavily inspired by social media feeds.

I had a few more completely different designs and design variations that combined different elements in a number of different ways, but the design I ultimately settled on was this one.

I liked this design for a few reasons. Not only did I feel like it was the most user friendly with a clear bookshelf on the left and notes panel on the right, but it also let me combine some minimal skeuomorphic elements like physical looking books, with a more modern bookshelf and editor layout.

Since I was happy with this design I copied the concept over to Figma to create a more formal looking wireframe and layout to play around with.

Once I was in Figma I was able to start choosing colors and styles.

While websites are typically the domain of clean minimal sans-serif fonts, books and printed material still overwhelmingly use serif fonts. Since I was looking to create a bookish feel I knew very early on that I wanted to use a nice serif font.

Although you have a couple options, when it comes to serif fonts it is hard to go wrong when choosing a Garamond typeface. I settled on EB Garamond in part because it is freely available on Google Fonts, but also because it’s a variable font that supports all the bells and whistles like ligatures and italics.

In a similar vein I knew that I wanted my colors to feel natural and book inspired. I took inspiration from a green themed color palette I found online (pictured above) and combined some of those colors with the light cream of faded book pages and a classic dark gray and white to form my final color palette.

Finally, I took all of that and expanded my initial sketch and wireframe into a full design prototype in Figma.

Feedback

Aside from conducting initial interviews it is important to get feedback early and often to ensure you don’t sink too much time and/or resources into something the end user doesn’t want.

I certainly followed at least the first part of that mantra. I got feedback on some of my early designs and sketches but did not get as much feedback later in the process.

Most of the feedback I got was pretty positive, however some of the early feedback led me to realize I had overlooked the goal tracking elements of the project in my initial designs and sketches.

This feedback is another reason I ended up selecting the design concept I did, since not only did it give me a place to put the notes about each book, but also a convenient place to include this overlooked goal tracking functionality.

The App

The app itself is divided into two main panels. On the left is the persistent bookshelf. This shows all the books that you have added and gives you the opportunity to add and switch between books.

On the right is the reading log. This includes information about progress towards your yearly reading goal as well as a graph showing all the reading you have logged.

The reading goal widget shows the number of books you have read as well as your goal for the year. This goal can be edited by clicking the “Edit goal” link.

The reading streak widget shows all the reading you have logged and gives you an update on your streak. You can add to your log by either clicking the “Add to log” link to add reading to the current day, or click on any of the days in the chart to add or edit reading for that day.

Back on the left side, the bookshelf pane the “Add to log” or streak button also allows you to add reading to your log for the day.

To add a new book to your bookshelf you use the “Add a book” button. This pulls up a modal in which you can enter the book details.

You can hit “Cancel” or the close icon to close without saving or click “Save book” to finish adding your new book to the bookshelf.

You should now see your newly added book on your bookshelf! If you click on it, or any of your other books it will pull up a notes panel on the right in place of your reading log. This is where you can write away! Take any notes you want here. This editor is intentionally rather unstructured to allow you the most freedom to write your notes the way you want them.

The editor supports many markdown features but also includes a WYSIWYG editor toolbar at the bottom for those unfamiliar with markdown.

Additionally on the left side of the toolbar you will find the bookmark and finished reading options. You can use the bookmark option to keep track of what page you are on in the book and when you are finished click the checkmark button and it will add it to your yearly reading goal.

You can switch between books and all your data will be saved.

BONUS: I actually implemented a dark mode, although I ran out of time to add a toggle for it. Instead if you switch your computer’s preferred color scheme it will update the UI to match.

Here is a brief video demoing the features.

Implementation Details

Especially towards the beginning I organized all the code rather well. I tried to use best coding practices and make everything that could be a well designed reusable component. You can see this most easily with the Button component as it is the first one I started.

As I added more features though and got closer to the deadline I started to become a little less organized and started throwing most of my code in the main +page.svelte file.

This touches a little on the future work I would like to do, but if I had more time I would have done a lot more code cleanup and utilizing routing. I think both the reading log panel and the notes panel should have been their own separate components/pages and the bookshelf a part of the layout. I had originally started the project using SvelteKit because I intended to do a lot more pagination/routing but I simply ran out of time.

One of the features I am most proud of is the reading streak graph. I spent a lot of time (probably too much) implementing it as a custom graph so that I could get it to work and look exactly how I wanted it to. I think it turned out pretty well but in the future I would probably just use an existing graphing library to save on time.

Another cool feature was the notes editor. I knew from the start I wanted something vaguely inspired by Notion and Google Docs, two of the solutions people had said they liked using during my interviews. They liked the free-form nature of being able to easily type and format as they so desired instead of being forced to use some popup or form.

The easy way for me to implement this would have been to just give them a textarea and call it a day, but if I did that I felt a key component of the experience would have been missing — the formatting.

I wanted it to be fully customizable and match my theme correctly, however creating an editor like this from scratch is a lot of work and would likely take a lot longer than I have to get a probably only mediocre final product.

What I ended up using is a library called Tiptap. Tiptap is a headless rich text editor built on ProseMirror. Essentially what that means is that Tiptap provides the place to type and you use the editor’s API to create all your own buttons, styles, and other functionality.

This vastly simplified the complexity of implementing such a feature and is what made it anywhere close to feasible to implement on this timeline.

Use of AI

I didn’t use much AI for this project. Every now and then when I had a bug or problem that MDN or StackOverflow couldn’t answer I would ask Google Gemini and it would sometimes give a useful answer.

I did experiment with using AI to write a function to generate random mock data for the reading log and it worked pretty well for that (although I later changed the data structure I was using to store that data and had to make a bunch of changes to it).

I have never found AI to be particularly adept at designing visual things and since this is ultimately a design project I did not find huge use for it.

Future Work

Other than the obvious, I would love to actually hook this app up to a database of some kind, there are a few things I didn’t have time to get to that I would love to do if I had more time.

• I would love to make it more responsive/work on mobile.

  • It is responsive enough to work on most desktop/laptop screens and maybe a tablet, but there is still a lot of work I would need to do If I wanted to make it a good experience on more devices.

• There are a few minor bugs in both the UI and functionality that don’t seriously affect the user experience but bug me nonetheless.

• I mentioned it before, but some of the code is a mess. If I continued working on this project further I would have to clean some of that up.