Artificial intelligence App

UI / UX Case Study

Medical Blog Content Creator

Your Go-To Writer for Health and Wellness

Designed in figma

Overview

The Medical Blog Content Creator is an app that uses AI algorithms for multi-prompt conversations with ChatGPT, helping medical professionals and bloggers create high-quality and informative content on various medical topics. It offers tailored suggestions and prompts for an intuitive user experience.

Features:

Simplified Research – Abstract Retrieval: The app’s abstract fetching system retrieves relevant research papers and resources from trusted sources, reducing the time and effort required for research.

AI-Powered Content Generation: The app generates high-quality medical blog posts using AI algorithms and offers tailored suggestions through multi-prompt conversations with ChatGPT.

AI-Powered Title Generation: The app’s content-based title generation feature uses AI to create informative and engaging titles that accurately reflect the blog post’s content, increasing the likelihood of reader engagement.

Where

Platform

Web

Role

UI / UX Design

Project Duration

2 Months

Design Process Journey

We went through the design process journey to provide the best user experience for this project. We carefully researched the user experience and developed an easy process that includes the following steps:

User Flow Diagram

This flowchart outlines the process of using AI to generate a blog post from research papers. It involves retrieving relevant papers, summarizing their abstracts, and using them as prompts for a ChatGPT multi-prompt model. The finalized content is evaluated for satisfaction and a title is generated using AI.

Low-fidelity wireframes

At the beginning, once the planning is finalized, we begin by sketching on paper. After sketching, we move on to creating Lo-Fi designs on Figma to convert the sketches into low-fidelity representations. During this phase, we finalize the components and the rough layout of how the application will look.

Tech Stack

Style Guide

This document contains all the design guidelines for each element, specifying how they will appear in the high-fidelity design. The purpose of this style guide is to save time and improve efficiency by providing information on colors, typography, headings, body copy, and image captions.

Colors:

Back Ground Color

Icons

Here are the icons we used throughout the project.

UI Kit Component

A UI kit, also known as a user interface kit, is a set of design assets that includes various design elements, such as UI components and styles. UI components are elements that convey meaning and provide functionality to users. In this project, we utilized UI kits that included navigation menus, input fields, and tiles to accelerate our progress and achieve our milestones.

Buttons

These are the various button styles that we used throughout the project, each with different states depending on their functionality and purpose.