About High School

Greenfield

Greenfield High School is deeply committed to providing quality education to its diverse students.

Goals

The school’s primary goal is to enhance the learning experience by introducing a test-taking tool. This tool aims to streamline the assessment process, making it more efficient and user-friendly for both students and teachers.

Services

• Offers a diverse range of subjects and courses
• Organizes workshops and seminars
• Offers guidance and resources to help students explore post-graduation options

The Problem

Need for a modern, efficient, and interactive text-taking platform.

This platform would address the challenges associated with traditional paper-based exams.

Project’s Goal

Develop a user-friendly digital test-taking platform that provides students with an interactive and efficient testing experience.

My impact as a Product designer

Responsible for the design of Greenfield High School’s digital test-taking platform.

Responsibilities

• Conducting user research to understand the specific needs and pain points of Greenfield High School students and teachers
• Creating both paper and digital wireframes
• Developing low and high-fidelity prototypes
• Conducting usability studies to assess the effectiveness and user-friendliness of the platform’s design
• Iterating on designs based on user feedback and testing results
• Implementing responsive design principles

Target Audience

For designing a test-taking platform, I considered the following target audiences:

Students

They are the primary users of the platform who will be taking tests. The platform should be user-friendly, accessible, and engaging for students of various grade levels.

Teachers and Instructors

They will use the platform to create, administer, and grade tests. The platform should be intuitive, efficient, and offer tools for effective test management.

Research

In the research phase, I delved into the current challenges faced by both students and teachers in the test-taking process. Through interviews and surveys, I gained valuable insights into their experiences, pain points, and expectations. This research laid the foundation for developing a user-centric and effective solution to enhance the overall testing experience at Greenfield High School.

Research Goals

1. Ensure the platform is easy to navigate for both students and teachers
2. Support various question types multiple choice, short answer, essay,…

Interview Questions

Student:

1. How do you feel about the current process of taking tests at school?

“I find the current process to be a bit stressful, especially when it comes to managing time during exams. The traditional paper-and-pencil format has its challenges, and I often feel pressured.”

2. Can you describe any challenges you face when taking tests?

“One major challenge is the time constraint, particularly for subjects with lengthy written responses. Additionally, the process of flipping through pages and managing physical answer sheets can be a bit overwhelming.”

3. What would help you feel more comfortable when using a digital platform for taking tests?

“I’d feel more comfortable with features like a clear and user-friendly interface, the ability to navigate between questions easily, and having a timer displayed in a less stressful way.”

4. Are there any specific accommodations or accessibility features you would find beneficial?

“Having options like text-to-speech for questions and answers would be helpful. Also, the ability to adjust font sizes and background contrasts could make the platform more inclusive for everyone.”

Teacher:

1. What are the main pain points you encounter when creating, administering, and grading tests?

“Making tests takes a lot of time, especially when I want to make them just right for each student. Giving exams involves handling a lot of details, and grading can feel a bit boring.”

2. How do you currently track and analyze student performance on assessments?

“I grade tests by hand and use simple spreadsheets to keep track of how students are doing. It works, but it takes a lot of time, and I wish I had more detailed information.”

3. What features or tools would make it easier for you to manage tests and assess student progress?

“I’d love a digital tool that makes creating tests easier, grades them for me, and gives detailed info on how students are doing. Features like managing a question bank and seeing real-time progress would make my job much better.”

User Persona

As my primary focus was on the student side of the test-taking platform in this phase, I considered crafting a main user persona representing the student experience. This approach allowed me to delve deeply into the specific needs, preferences, and pain points of the students, ensuring that my design decisions were centered around delivering an intuitive and tailored test-taking journey.

Empathy Map

I constructed empathy maps to better understand student’s thoughts, feelings, and behaviors. This visual tool guided me toward creating a user-centric design that not only addressed functional requirements but also resonated with the emotional and cognitive aspects of the student experience.

User Journey Map

Students begin by effortlessly accessing the platform, where they select and complete exams with ease. The process includes answering questions, reviewing answers, and submitting the exam seamlessly. This user-friendly journey ensures a positive and efficient experience for students from start to finish.

User Story: As a student, I want to take exams digitally, so that I have a more interactive & efficient test experience.

Pain Points

During the research phase, I identified three key pain points in the student experience. By analyzing these pain points, I gained valuable insights into areas that needed improvement.

1. Potential Frustration and Stress: The current method leads to frustration and stress for some students
2. Limited Interactivity: The current testing process lacks interactivity, making it less engaging
3. Complex and Time-Consuming Process: Traditional and manual methods reduced efficiency in the learning process

Information Architecture

I focused on creating a clear and intuitive structure for the platform. I prioritized the main elements that students interact with, ensuring a seamless and straightforward navigation experience. A key consideration was the logged-in status, with a specific emphasis on students looking to initiate or resume an exam.

User Flow

I focused on optimizing the main user task of taking an exam, carefully mapping out the user flow to ensure a streamlined and intuitive process. By prioritizing simplicity and clarity, the design encourages students to navigate through the exam-taking journey effortlessly, enhancing the overall user experience.

Sketches and Wireframes

In this phase, I translated conceptual ideas into tangible sketches and digital wireframes. These served as foundational blueprints, allowing me to identify crucial design elements and test initial concepts. The process not only guided me in the right direction but also laid the groundwork for usability testing, ensuring a user-centric approach to the platform’s development.

1. I wanted to make sure the website is easy to use and looks interesting. So, I carefully placed two important buttons in the main section to create a user-friendly experience. This made the design process more exciting and highlighted the importance of putting things in the right place to make the user’s journey better.

2. I implemented a progress bar to track the number of questions completed during the test. This feature offers students a clear and visual indication of their progress, allowing them to manage their time effectively throughout the examination.

3. I designed various states of the main widget in the introduction section to guide students seamlessly through their first view of the platform. These intentional designs aim to provide a clear and intuitive user experience, ensuring students feel supported and informed right from the start.

Low-Fidelity Prototype

I focused on the primary user task — a student taking an exam. The prototype allowed me to visualize and test key interactions early in the design process.

Usability Study Findings

After conducting usability testing, several valuable insights emerged:

1. The integration of three important widgets in the initial view proved to be a practical approach, enhancing the personalized feel for students
2. Placing crucial information on the profile page facilitated easy access to a student’s progress, ensuring a seamless and informative experience.
3. Maintaining full concentration during the exam step on the current question, without any distracting elements, emerged as a crucial factor for an optimal testing experience.

Design refinement

These were the main findings uncovered by the usability study:

• Users expressed stress and anxiety when encountering the timer for each question during the exam.
• Participants faced confusion and uncertainty in locating the “Start Exam” button, leading to delays in beginning the test.

1. I addressed the time-related stress by relocating the question timers from the main view to the sidebar. This adjustment allows students to manage their time without the added pressure of constantly visible timers for each question.

2. I replaced the iconic CTA with a clear and concise textual representation. The updated version features a larger, more prominent button with clear text, ensuring a straightforward and unmistakable initiation of the exam, as opposed to relying solely on an icon.

Design System & Mockups

After conducting the usability study and refining my wireframes, I proceeded to craft a well-defined design based on an accurate and efficient design system. Leveraging the enhanced features of Figma, I incorporated an accessible color palette and tailored styles to cater to the needs of my main users.

Impact

This test-taking platform has a transformative impact on students and teachers alike.

By providing a stress-free exam environment, it enhances the overall user experience, fosters a positive learning atmosphere, and facilitates efficient exam management for both students and educators.

What I Learned

• The valuable insights into the significant impact of thoughtful design adjustments on user experience.
• Reinforced the importance of prioritizing user needs
• The power of even minor design changes

Next Steps

1. Develop a collaborative platform for teachers to connect with students, enabling them to monitor progress and manage exams efficiently.
2. Enhance the “Analyzing Progress” feature for students, providing more comprehensive insights and actionable data to support their academic growth.

Your time and attention are greatly appreciated!

You can check out the HQ presentation on Behance.

Stay connected:

Linkedin, Behance, Dribbble

UX/UI Case Study: Test-Taking Platform was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.

What is Toogreen?

It is hard to find vegetarian dishes or restaurants in Turkiye, cause the majority of the population loves meat dishes. Toogreen is a food delivery just for vegetarians in Istanbul/Turkey. You can find a variety of vegetarian meals in Istanbul’s restaurants.

Business Goles

• Ease of use
• Users able to prepare vegetarian dishes with recipes
• Orders frequency
• Returning users to the app

What should we do as product designers?

As product designers of this project, we should design it for ease of use for users to find their wished dishes quickly and make sure they can find recipes for dishes if they want to make that dish.

So we did:

• Determine user priorities and tasks
• Create and post user surveys online
• Conducted user interviews with four people who are vegetarians
• Determined user problems
• Created user persona
• Competitive analysis
• Conduct card sorting
• Prepare IA, flow chart, and task-flow
• Generated ideas by the Crazy 8, then designed UI and the design system
• In the last step, we conducted a usability test. We found five issues to solve, so we did an iteration

User Research

To fully comprehend our users, we conducted a survey and interview with vegetarian people, which helped us know their pain and make something more helpful for them and the business.

Survey

By sending a survey to some community of vegetarians to know them, we got surprised and had 32 participants!

Interview

We interviewed four people who took part in our survey. We found some crucial keys that you can see in the user problems and user pain points sections. You will see some of our questions and answers below:

User Problems

• Lack of content of foods (ingredients, photos) on current apps
• Lack of vegetarian types
• Lack of finding a variety of vegetarian dishes
• Set address
• Difficult to find vegetarian restaurants or those restaurants that have vegetarian dishes

User Pain Points

• Find dishes based on the type of vegetarian
• Encounter distracting home page on food deliveries
• Adding address
• Longer checkout time

User Persona

By on the data we obtained from our small and quick research, we draw up a general user persona that reflects the app’s users.

Competitor Analysis

By analyzing our significant competitors, Yemeksepeti and Getir, we have identified our strengths and weaknesses, by knowing those, we can become aware of opportunities to grow and surpass rivals.

Card Sorting

Card sorting is an effective technique in information architecture; It can help us organize content so that it suits our users’ mental models rather than our point of view of us. Fast, Affordable card sorting is remote card sorting that we did with Figma.

Information Architecture

By combining our research we obtained an optimized and organized structure that helps users navigate them to find and process the information they need.

Flow Chart

By depicting the whole process, we can identify how the user is navigating and see if they meet their needs. Also, by creating the user flow, we know the steps a user takes to complete that task. It helps us make a clear way for the user to achieve its goal.

Low-Fidelity

Crazy 8

For the main page of this application, we needed to generate as many ideas as possible, so we decided to do it with the Crazy 8 method. After we came to a common opinion, we went to draw other sketches.

Sketches

High-Fidelity

As always, we prepared the general design system before going to design interfaces, and little by little, we completed the design system while we designed each screen.

Design System

User Interface

In this project, we had both light and dark themes that you will see below.

Light Version

Dark Version

Usability Test

We ran a usability test with 5 participants and found some minor UX writing issues and two spots for improvement.

#Issue 1

The first one was when users searched for dishes, some of them didn’t realize there was more than one dish in each restaurant, and some of them had problems with swiping them in restaurant cards.
We decided to change them to vertically order and show up to 3 foods, then a more button to see more foods.
Here you can see before and after the usability test result.

#Issue 2

In the second issue, we found some users had problems when they wanted to explore the menu list, so we added links to each topic of the menu that by clicking on that, the user will scroll to the related section.
Here is what we did:

What’s next?

We want to find a solution to choosing the type of vegetarian to avoid re-selecting that for each use.
In addition, they should be able to choose another type for other people that they want to order for them.

Thanks for reading!

You can check out the HQ presentation on Behance.

Stay connected:
Linkedin, Behance, Dribbble

Case study: Vegetarian food delivery mobile app was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.

Designed in May 2020

About Astra

Astra is a premium mobile app that allows users to quickly read their horoscopes and check their compatibility with other signs.
Astra is for those who want daily guidance in life and events through astrology and related.

Business Needs

• To create a simple and beautiful horoscopes app.
• Aimed to make the horoscopes quick to read and enjoyable.
• The general idea is to have a simple app with authoritative and trustworthy feelings.

User Research

To create our user persona, we need fully comprehend our users. As we didn’t have much time, we decided to get a quick survey, so we sent the survey to some related Facebook groups to know who are they.
Finally, we had 15 participants in the survey.

There is a brief of what we found:

User Persona

By on the data we obtained from our small and quick research, we draw up a general user persona that reflects the app’s users.

Empathy Map

To create a more accurate user persona, we need an empathy map.
The empathy map helps us understand our user’s needs, and what they are thinking, feeling, seeing, hearing, and doing.
There is the empathy map of our user persona:

Pains:

• Is it trustier?
• Lack of confident
• Wrong relationship
• Make a right decision

Gains:

• She knows her horoscope
• Make decisions by more confident
• Set a goal for my career
• Decide a relationship

Key Metrics

These are the key metrics that should keep in our mind in doing this project and try to find adequate solutions for them:

• Trustworthy
• Subscribe to premium
• Break down and categorize wordy horoscopes
• Easy onboarding process

HMW

To have beneficial brainstorming, we chose HMW questions cause it makes many questions and answers according to goal and fundamental keys.

Information Architecture

Optimize and organize the structure, helping users navigate them to find and process the information they need. We achieved an efficient construction to know what we want to do in this app by developing a high details IA!

Flow Chart & User Flow

By depicting the whole process, we can identify how the user is navigating and see if they meet their needs.
Also, by creating the user flow, we know the steps a user takes to complete that task. It helps us make a clear way for the user to achieve its goal.

Low-Fidelity

Design system

As always, we created a design system for each project we did. The primary benefit of a design system is saving time in iterations and changes by utilizing premade UI components and elements.
By doing this, we can use the same elements over and over. Also, keep the consistency whole of the product.

User Interface

Here we present some screens of this project:

1. Onboarding process

Unfortunately, we can’t get less data from the user, so by creating funny, simple, and minimal onboarding, the user will not be bored and proceed easier.

2. Main screen

The primary goal is to attract users to read their horoscope on this screen, we put some recap and a brief of today’s horoscope to motivate them to read that. To avoid crowding this screen, we put the tomorrow, weekly, monthly, and yearly horoscopes in four boxes below today’s horoscope. Also, showing the user’s name and sign created this more personalized.

3. Compatibility

On the compatibility page, we have two states. One is for users with premium accounts, and the other is for free users who need to get a premium account to use it.
In the following screens, you’ll see what users see.

4. Subscription

To attract the user to get a premium account, we designed this page with the needed information such as ratting, reviews, plan comparisons, and FAQs.

Prototyping & Usability Test

We were able to get a test by the prototype high-fidelity that helped us uncover opportunities to improve the overall user experience by building an effective, efficient, and fun experience.
We conduct a usability test with five users in our demographic.
Participants were able to use the app easily. There were just small iterations.

Preview of the Astra application functionalities

What did we learn by designing this project?

We used the HMW method for our brainstorming phase first time, which was a great way to create many questions and answers around the goals and problems.

Thanks for reading!

Stay connected:
Linkedin, Behance, Dribbble

Case Study: Astrology & Horoscope Mobile App was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.