Avanade 2

I was responsible for crafting the overall user experience, conducting research on current AI trend, creating wireframes, and building interactive prototypes to validate design concepts.

Our mission? Transform a basic demo into a useful tool for document handling and inquiries.

Initial Demo

the project's starting point

“Here’s what the current demo currently looks like ” said our project lead.

Timeline

5 Weeks of Innovation

Over a 10-week internship at Avanade, I worked with the other Visual Designer dedicated 5 weeks to the design of a generative AI chatbot.

We embarked on an intense 5-week sprint, pushing the boundaries of design and AI to deliver a functional MVP that would redefine how users interact with documents and information.

Our Goal

From Basic Demo to Productivity Powerhouse

Enhance productivity with an Azure OpenAI-powered app for document inquiries.

Use Case Ideation Workshop

Brainstorming and Project Direction

We started our project with a brainstorming workshop, where we came up with potential use cases for a chatbot. This helped us decide the direction for our project, aiming to meet user needs effectively. Below are some design ideas I had based on the current demo.

Market Analysis

Understanding the AI Landscape

Diving into my first AI project, I explored current AI trends, examining notable products like ChatGPT, BING, Midjourny, Google Bard, and Gamma.app.

This research highlighted common features like chat-based interactions and visual feedback, alongside unique elements such as history tabs and multi-language support.

Design Screens

Multiple iterations refining user experience

Our design went through multiple iterations, each time addressing feedback and improving the user experience. Some changes included adjusting layouts, enhancing features, and adding visual design elements. Each iteration brought us closer to a user-friendly and efficient design.

User Persona

Meet Jane: 15 Minutes Before a Crucial Meeting

She is excited to roll onto her first project. However, 15 minutes before her initial meeting, Jane realizes she forgot to read an essential attachment in preparation.

Luckily for Jane, Avanade offers a solution that can help her access the necessary information swiftly.

User Flow

Quick and Secure Registration

Jane lands on the product’s homepage and watches an engaging video that demonstrates the AI assistant’s capabilities. She quickly registers, comforted by the platform's commitment to secure data storage.

User Flow

File Management: Upload and Preview on the Go

Before her meeting, Jane uploads the necessary document from her device or retrieves it from her personal database. She selects and previews the appropriate file.

User Flow

Tailored Conversations with AI for Instant Insights

Once the file is uploaded, Jane begins interacting with the AI assistant. The AI provides relevant information tailored to the file and her preferences, with suggested questions to help guide the conversation.

User Flow

Enhanced Preparation and Lasting Resource Access

With the AI's assistance, Jane feels prepared for her meeting. She values the option to revisit her chat history and uploaded files for clarification, appreciating the efficiency it provides.

Visual Design

Moodboard and Color Palette

The design process used a moodboard for inspiration, and we settled on a color palette that balances professionalism with a friendly and positive vibe.

Visual Design

Type fonts

We chose Open Sans font for its readability and alignment with our design goals.

Visual Design

Responsive Design

We implemented five breakpoints to optimize the user experience across devices:
1. Large desktop (1440px)
2. Desktop (1024px)
3. Tablet (768px)
4. Mobile (390px)
5. Small Mobile (320px)

At each breakpoint, we adjusted:
1. Layout
2. Functionality
3. Interactive elements

These changes ensure the design adapts to various screen sizes and orientations.

Data Mapping Diagram

User and Data Interaction

I have created a data mapping diagram that outlines the user flow when interacting with the product and details where the data will be stored. This diagram is essential for engineers during development and invaluable for new users to understand the data interaction process.
(Click on the image to enlarge)

Reflection

What I learned

One significant takeaway from this project is the importance of collaboration and communication. Working with people in different specialties in the process, maintaining transparency in my work, and providing progress updates to the project lead, stakeholders, and team members are crucial for our MVP deliverables. Another lesson learned is the necessity to prioritize the most important tasks. When facing time constraints, I've come to realize that we may not always be able to fulfill all our ambitious goals. Therefore, focusing on feasible functions and features within the limited time is essential.