User Experience Design

Certification Project

User Experience Design

Certification Project

Developing A UX Design Concept

Developing A UX Design Concept

Developing A UX Design Concept

Presented by: Adriana Fruchter

Presented by: Adriana Fruchter

Cornell Certification

Cornell Certification

Scroll for more

Sketching Ideas to Explore the Design Space

Sketching Ideas to Explore the Design Space

Part -1 Design 10 sketches

Part -1 Design 10 sketches

Welcoming video
that introduces the product.

This idea aligns with the need to showcase a fresh approach to using collaborative tools to engage employees. It responds to the goal of sparking interest among decision-makers, encouraging them to support the project and invest in it.

Utilize a one-page format on the website to display cases and introduce the product.

This idea meets the requirement of presenting comprehensive information and use cases to decision-makers using a one-page website format. It aims to provide a user-friendly and concise way to convey essential details and encourage decision-makers to take an interest in the product.

Implement a conversational form (like Typeform) to collect information.

This idea addresses the need to gather data on managers' goals, the number of participants, tech skills, preferences, and budget. This information is vital for recommending the most suitable campaign that aligns with the company's requirements.

Create a user manager interface for controlling and generating campaigns.

This idea meets the need for a system to handle user accounts. It covers both managers who adjust settings and participants who have login details. It empowers users to manage campaigns.

Launch the "So Sweet of You" Campaign to inspire employees to be kind and grateful towards the colleagues.

This idea aims to encourage employees to pay attention to their co-workers and express gratitude for their actions. It promotes positive interactions in the workplace.

Establish a way to gather feedback and suggestions from users to enhance the product.

This idea relates to creating a user-friendly platform, known as the Feedback Mechanism. It allows employees to share their thoughts, ideas, and feedback, even anonymously if they prefer. The goal is to encourage open communication and ensure that the company collects input from all employees.

Provide engagement metrics for stakeholders

Uses analytics tools to measure and monitor employee engagement, campaign participation, and their impact on productivity. The aim is to keep stakeholders informed with numbers and results.

Embrace Inclusive Design.

This idea relates to creating a user-friendly platform, known as the Feedback Mechanism. It allows employees to share their thoughts, ideas, and feedback, even anonymously if they prefer. The goal is to encourage open communication and ensure that the company collects input from all employees.

Boost Stakeholder Engagement to Secure More Budget.

This idea aims to kindle the interest of leaders in getting involved and encouraging more activities. When leaders support us, it becomes simpler to secure a higher budget for employee engagement.

Enhance Data Security and Privacy.

This involves ensuring that all user data, including personal information and feedback, is encrypted and stored securely to comply with data privacy regulations.

Sketching Ideas to Explore the Design Space

Sketching Ideas to Explore the Design Space

Part -1 b Capture feedback on the ideas

Part -1 b Capture feedback on the ideas

Creating a Design Concept

Creating a Design Concept

PART 2 A

PART 2 A

Starting Point

I will begin designing a tool for collecting data on managers' objectives, the number of participants, technology proficiency, preferences, and budget in a conversational manner.

Why this one?

I selected this idea because I believe that gathering information in a conversational manner will make the task more manageable and increase our chances of success. It provides a user-friendly approach to acquiring essential data.

Define 3 Tasks

Task 1: The design will allow users, like managers, to choose the most suitable project for their team. This involves using a conversational form to gather initial information, such as the number of participants, demographics, and special occasions.

Task 2: The responses to the initial questions will trigger more specific follow-up questions, helping to refine the project selection process.

Task 3: After going through Tasks 1 and 2, the user can explore further details about the selected project.

Task Relations: Task 1 leads to Task 2 in a sequential manner. Task 2 can become hierarchical based on the user's choices. Task 3 follows both Task 1 and Task 2 sequentially as it's the result of the preceding tasks.

Creating a Design Concept

Creating a Design Concept

PART 2B - Scenario/ Storyboard

PART 2B - Scenario/ Storyboard

Create the Scenario

Character: Manager or Decision Maker
Goal: To improve employee engagement and create a comfortable environment for sharing ideas and learning.
Setting: A workplace during business hours. The participant will interact with a website to input information and receive suggestions.

Plot:

The participant, a manager, initiates the interaction by tapping the "Start" button on the welcome screen of the website. A series of questions are presented, guiding the participant to specify their goals and provide information about the team that will be participating in the engagement program.

Based on the answers provided, the website tailors the experience. It generates a specific question designed to assist the app in defining the best services and approaches for this unique scenario.

Upon completing this question-and-answer session, the website presents a set of solutions and services. This marks the conclusion of this phase of the interaction. Now, participants can explore, select, and learn more about each proposal.

Storyboard

Character: Business Woman Manager
Goal: Utilize a new app to foster employee collaboration and encourage a comfortable environment for idea-sharing using the Internet.
Setting: A typical workplace environment during regular business hours. The participant will engage with a website to input information and receive suggestions on the screen.

Plot:
Scene 1: The manager is in her office, seated in front of a computer.
Scene 2: A closer shot focuses on the user, highlighting the "Start" button on the computer screen.
Scene 3: The user views another web page containing a form with a single question.
Scene 4: The user advances to a new page displaying various product options.
Scene 5: The user shares this page with colleagues at work, indicating the product options on the screen.

Developing a User Interface Concept

Developing a User Interface Concept

PART 3 - Sketching and Wireframing

PART 3 - Sketching and Wireframing

Screens

Screen 1: A welcome screen featuring an engaging video that introduces the product. It also provides information about the first steps and includes a prominent "Start" button.

Screen 2: This screen displays an image at the top, followed by one important question and a "Next" button below them.

Screen 3 This screen displays an image at the top, followed by another question and a "Next" button below them.

Screen 4: On this screen, there will be a follow-up question with multiple answer choices. Below it, there will be a message explaining that you can pause to answer the questionnaire and explore all the products that we offer.

Screen 5: On this screen, the best-fit product options will be presented in a single-column layout. Each row will feature a product displayed in a list format with an image on the left and a title alongside it. Below the title, there will be small icons for likes, reviews, and potentially another for related information. Following the title and these subsections, there will be a product short-description. Additionally, an action button where users will have the option to click on a button to learn more about the product or understand how it works.

Guidelines

On all the screens: Logo on left-top - menu on the right side - Clean design, few elements on the screens

Screen 1: Welcome Screen
- Task hierarchy: Video to grab the user's attention and educate.
- Similarity/ No dead ends: The "Start" button is prominent and easily accessible.

Screen 2/3: Questions and Image
- By Importance: Maintain a clear visual hierarchy with the image at the top.
- Common region: Design user-friendly, straightforward questions.
- Similarity/ No dead ends: Ensure the "Next" button is visible and easy to click.

Screen 4: Follow-Up Question
- Common region: Make the follow-up question clear and easy to answer.
- Common region: Design multiple-choice options that are easy to distinguish.
- Exit Point: Keep the user informed about the option to pause and explore products.

Screen 5: Product Presentation
- Similarity/hierarchy: Organize products in a single-column layout for easy browsing.
- Proximity: Ensure each product's title, icons, and description are neatly structured.
- Similarity/ No dead ends: Make the "Learn More" button prominent for users to explore further.

WELCOME

Form 1st Interaction

Form 2nd Interaction

Form Followup

Product Page

Metaphor

The Play triangle, in this context, the triangle is a symbolic representation of the play button, inviting users to initiate the video. It's like a universal cue for starting multimedia content.

The "Next" button consistently placed at the end of the page on the right side serves as a marker, guiding users along the path of interaction. It's akin to a directional sign, ensuring a uniform and intuitive navigation experience throughout the application.

The progress bar acts as a pathway navigator, showing users where they currently stand in the journey of completing the form and how far they have to go. It's like a map, helping users track their progress and anticipate what's ahead.

The button to skip the questionnaire is like a detour sign, allowing users to choose an alternative route that best suits their preferences or needs in the decision-making process.

The "Load More" button can be likened to expanding an endless shelf of products. Each click extends the shelf, revealing more products, just as in a physical store where you keep exploring the items on an extended shelf.

Affordances

The Play triangle, in this context, the triangle is a symbolic representation of the play button, inviting users to initiate the video. It's like a universal cue for starting multimedia content.

The "Next" button consistently placed at the end of the page on the right side serves as a marker, guiding users along the path of interaction. It's akin to a directional sign, ensuring a uniform and intuitive navigation experience throughout the application.

The progress bar acts as a pathway navigator, showing users where they currently stand in the journey of completing the form and how far they have to go. It's like a map, helping users track their progress and anticipate what's ahead.

The button to skip the questionnaire is like a detour sign, allowing users to choose an alternative route that best suits their preferences or needs in the decision-making process.

The "Load More" button can be likened to expanding an endless shelf of products. Each click extends the shelf, revealing more products, just as in a physical store where you keep exploring the items on an extended shelf.

Form 1st Interaction

Form 2nd Interaction

Form Followup

Product Page

© 2024 by Learning Matrix. Empowering Minds!