Case study

AI-Powered Document Assistant

Role

Web / Product Designer
Front-end Developer

Client

Southpaw Digital (USA)

Year

2024

Website

mindcrate.io

Since ChatGPT's launch in late 2022, LLMs and generative AI have transformed how businesses operate. A large language model (LLM) called Mindcrate was planned to operate to help generate text, translate languages, write various types of business documents, and provide with helpful answers to queries. Southpaw Digital formed a team to start building this project from the ground up aiming to help agencies, startups, and freelancers. The primary goal for the first iteration was to generate a minimum viable product who can produce top-quality professional docs & marketing tasks.

I worked as the web / product design and web developer on a major iteration of Mindcrate’s product. We took the platform in a bold new direction, focusing on becoming the best tool for agencies, startups, and freelancers. Aside from that, I was in touch with the Director of Product and BAUART Software to report issues and bugs within the software, as well as to respond to improvements regarding certain functionalities. It was exciting to see how the product thrived and improved with each update during Q2 and Q3 in 2024.

The problem

First, we had a poor team with very little spirit for the project. Next year, we reshuffled the team and make a fresh start for the project. At that moment, I joined the team together with an outsource team, BAUART Software. We started from the ground up benchmarking from our existing design. Because our new team was distributed around the world, we wanted our workplace to be transparent and comfortable for everyone, therefore we only use group chats and prohibited any kind of communication in private chats.

Second, the platform was still using old technology. Technology was advancing rapidly but the platform was still using AngularJS, jQuery, and vanilla CSS. There was a series of extra efforts needed to do to move the old platform to modern JavaScript frameworks and libraries. So more time was needed to do for that stuff. Besides, we also tried to make the new platform easier to use while maintaining scalability in our system.

Third, everything was poorly designed. The content and the web structure were also the same. No wonder the platform was plagued with a number of user experience problems which led to a higher bounce rate. Besides, we also had no design system for such a large project. Hence we couldn't ensure the aesthetics and user experience across the product.

The mastermind

It was time to refresh our 'mind' to give us a better start for the project. We hired a graphic designer specifically assigned for the new logo. This was intended to enhance both the aesthetics and user experience across the product itself, as well as the website and marketing materials.

The initial iteration started in early 2024 which involved internal team understanding user needs, analyzing market trends, gathering insights from competitors, and lastly creating a roadmap. This roadmap was created based on the research, technological feasibility, and future goals, ensuring each feature aligned with user needs and business strategy. The goal was to release an MVP.

Implementation

I was responsible to design the UI mockups, creating prototypes, and helping the development team to implement my design. While I wasn't in-charge for the front-end development, I actively helped them providing SVG animations and LottieFiles to speed up the process for the front-end development. Besides, they were also responsible in the backend system such as database, cloud storage, ChatGPT integration, and testing. They did a daily Slack update reporting progress, performance issues, and bugs to monitor every progress.

Building website

After the main product, then I was assigned to design and develop a website. The website was designed to explain the product so first we needed to sketch out the sitemap. After we did then we move on to the wireframe. Just as Dr. Frankenstein pieced together his creation, we meticulously did the same thing. We collected references piece by piece to be assembled to a Frankenstein wireframe. I was responsible to turn his Frankenstein wireframe to a high-fidelity design in Figma. After the design was ready then I used Framer for development. I also built custom code on the top of Framer to get certain features that were not available by default.

Web optimization

To give the best user experience, I consistently tested the website every night and meticulously optimized every aspect including web structure, metadata, SEO, and its accessibilities. I used GTmetrix to measure the website performance; Google Analytics to analyze traffic; and Google App Script to post form submission data to Google Sheets. Lastly, I also will perform redirect to keep and maintain our SEO score on Google search engine.

I've worked with Daniel for the better part of 2024. He's an excellent designer and a very hard worker. He's helped me launch several complex SAAS and web projects and brought my ideas to life through his keen eye for UI and style. Highly, HIGHLY recommended!

Tim Perry —

Chief Executive Officer of Mindcrate