context!

During the summer of 2024, I worked as a Forward-Deployed Software Engineer (in general terms: software engineer and UI/UX/Product designer… more on this later) at Levytation, a startup backed by Liu Idea Lab's Summer Venture Studio — Rice University's startup accelerator for student entrepreneurs — after winning 1k at a pitch competition for best use of AI and 15k with the venture studio.

Levytation also later got into the Nvidia's Inception program — an initiative that supports startups by providing access to NVIDIA hardware and software, technical expertise and training.

what did levytation do?

Below was our official tagline:

Levytation's platform eliminates the guesswork for coffee shop management by using data science and AI to answer critical questions about sales and customers in seconds.

For businesses, every decision they make and every insight they discover is based on data. This is obvious, but these businesses just have so, so, SO much data.

The popular platforms used by these restaurants unfortunately fail to (or simply choose not to) translate the tons of overwhelming, number-heavy data into more digestable insights. As a result, large corporations rely on skilled data specialists to interpret and transform this complex information into the actionable insights/strats: i.e. your best selling item is the Matcha Latte or consider selling the Matcha Latte and Avocado Toast as a combo.

However, small companies — such as our starting user demographic: small coffee shop owners ☕️ — do not have the luxury to hire multiple data specialists or even spend the time to interpret this data. Many coffee shop/small business owners then misinterpret this data, or… even worse… simply leave it untouched.

what i did!

Again, I was employed under the role of Forward-Deployed Software Engineer (Jahnavi and Henry, the founders of Levytation, were a huge fan of Palantir) with Svelte, Tailwind, TypeScript, MongoDB and more (i.e. chart.js for graphs). However, the actual work I did was basically the combination of everything a UI/UX/Product Designer does and everything a software engineer does.

My process was very, very hands-on:

1. define the problem

2. communicate to the founders about design vision

3. craft a design

4. iterate and refine the design based on what users say

5. code everything from start to finish

6. iterate code based on what users say

7. repeat

And I loved this: this gave me complete ownership over the product. When I solely designed, I would get frustrated because I wouldn't be able to create a working prototype (and, when it was worked on by other people, the wireframe wouldn't be 100% followed). When I solely developed, I would also get frustrated because I'd want to change a bit of the design. This was the perfect fit for me.

some design works (scroll down for dev!)

landing page

I actually first got involved into Levytation by contract work, and the first thing they asked from me was a landing page. They gave me a list of what they wanted on the website, what the "vibes" of the website should be, and a very general color scheme… and I made it work! Below is the first wireframe I sent them (with annotations).

After I joined them officially over the summer, they decided they wanted a remake of the landing page… with a couple of changes (RSVP form, FAQs, values we add). I made two versions… but both of these were later scrapped (#startup) :(

After lots of iterations, we decided to restructure the entire landing page:

• We had the website viewed by a professional (forgot who it was, but she was so badass and accomplished), and she mentioned that the hero page was not descriptive or call-to-actiony (?) enough. Testimonials should be first.

• I needed to add two new sections: Our Services and Our Future Services

• And more UI changes to make the website seem more professional & uhhh easier to code (LOL gotta set myself up for success).

The final wireframe (rightmost on the screenshot above!) was chosen and later developed by moi! I was so happy with it because there were so many iterations and I loved how it looked/would be used. See this in action at the very end of this page!

insights page & insight cards

First, we had to illustrate how the "insights" should look. We knew that it would have to be in a card format, and the card would have:

• a graph representing the data we pulled it from (i.e. pie chart, bar chart)

• the name of the insight (i.e. Best Selling Hours)

• the actual insight (i.e. You make the majority of your profit between the hours of 1 PM - 5 PM!)

• later on, in future iterations, we even added:

  • a chat section for each insight for users to ask questions. I implemented these through a Slack bot!

  • displayed categories for each insight (not displayed in the wireframe, added during code production)

A lot of iterations were set through this (i.e. display vertically or horizontally? Where do we add the chat? How would user favorites? How would they add categories?). Again, note that the categories for each insight were implemented during code production.

Now, all the users need a page where all their insights — the ones that we generate for them with AI! — are displayed where they can select them based on "category:" i.e. Best Selling, Item Optimization.

A lot of iterations were also done here! As a quick walk through over what the page does:

• can print out a PDF of every single insight

• favorites section

• insights organized by categories

dashboard page

Now, the user needs something similar as a "home page:" we called this the dashboard. Here, we would display everything that the user needs to get a summary of their business progress.

• KPIs (key performance indicators)

• favorited insights (key word: favorites!)

• a system to trigger the user to check out ALL the insights

Afterwards, I made one last iteration just spicing up the UI; I also added how the platform would look if certain parts of the page was empty. I love drawing on the trackpad!!!!

onboarding page(s)

This is self explanatory: we need to onboard the user first! Here, we asked basic information of the user (name? business name? your role?), and the more we iterated, the more we ended up adding (i.e. uploading their Square data or Excel data)! It would be too long to show everything single page, so I'll include a screenshot of all the iterations instead.

Also, note that we wanted the UI to be clean and friendly — Typeform was a HUGEEE inspiration here!