My Role
UX/UI Designer & Researcher
Duration
6 months
Softwares
Miro, Figma, Photoshop
ECE Depot
ECE Depot
ECE Depot
ECE Depot
The ECE Depot app is a recreation of an existing store website for UMN students, specifically for electrical or computer engineering students, to purchase items for their projects. This project was created in order to make a user-friendly and efficient version of the site into a mobile application.
The ECE Depot app is a recreation of an existing store website for UMN students, specifically for electrical or computer engineering students, to purchase items for their projects. This project was created in order to make a user-friendly and efficient version of the site into a mobile application.
Preliminary view
Preliminary view
Efficient, user-friendly, and easy to navigate
Efficient, user-friendly, and easy to navigate
Includes user-friendly features to enhance the user experience while ordering parts on ECE Depot.
Includes user-friendly features to enhance the user experience while ordering parts on ECE Depot.
Data Collection
Keep track of previous orders
Multiple Options
Creating and cancelling orders made easy
Aesthetics & Visuals
Organized and inclusive designs
Problem
Problem
The current ECE Depot site is not user friendly. Users have to go through a long inventory to find one item. Thus, being time consuming and confusing for the user. The website also lacks certain features such as photos of the items, payment options, and ways to tell whether an item is out of stock.
The current ECE Depot site is not user friendly. Users have to go through a long inventory to find one item. Thus, being time consuming and confusing for the user. The website also lacks certain features such as photos of the items, payment options, and ways to tell whether an item is out of stock.
Solution
Solution
Create a ECE Depot app which enhances the user experience by introducing features such as a search bar and filters to quickly locate items, clear item photos for better visualization, real-time stock availability indicators, and integrated payment options for a seamless checkout process.
Create a ECE Depot app which enhances the user experience by introducing features such as a search bar and filters to quickly locate items, clear item photos for better visualization, real-time stock availability indicators, and integrated payment options for a seamless checkout process.
Competitive Analysis
Competitive Analysis
Competitive Analysis
I conducted a competitive analysis of the existing ECE depot market. The current system is an extremely long inventory list in alphabetical order. Students have to either physically go through every item or use control+F to find their desired item.
I conducted a competitive analysis of the existing ECE depot market. The current system is an extremely long inventory list in alphabetical order. Students have to either physically go through every item or use control+F to find their desired item.
Strengths
1. Includes specific specifications of the items
2. Contains item quantity
3. Describes the color of the items
Strengths
1. Includes specific specifications of the items
2. Contains item quantity
3. Describes the color of the items
Weaknesses
1. Overwhelming for new users due to amount of features and elements
2. Confusing terminology and jargon
3. Extremely time consuming
Weaknesses
1. Overwhelming for new users due to amount of features and elements
2. Confusing terminology and jargon
3. Extremely time consuming
Weaknesses
1. Overwhelming for new users due to amount of features and elements
2. Confusing terminology and jargon
3. Extremely time consuming
Weaknesses
1. Overwhelming for new users due to amount of features and elements
2. Confusing terminology and jargon
3. Extremely time consuming
Weaknesses
1. Overwhelming for new users due to amount of features and elements
2. Confusing terminology and jargon
3. Extremely time consuming
Weaknesses
1. Overwhelming for new users due to amount of features and elements
2. Confusing terminology and jargon
3. Extremely time consuming
User Research
Target User: Students at the University of Minnesota studying electrical or computer engineering. Our users need to buy items for their class projects using ECE depot. They want a quicker and more reliable way to purchase their items than the current system.
Method (Observation): A group of electrical and computer engineering students were observed while completing a task. The task was to complete an order using the current ECE Depot website. While creating the order, the users were told to express their thought process out loud. After completing the observation, users were then interviewed about their experience.
Target User: Students at the University of Minnesota studying electrical or computer engineering. Our users need to buy items for their class projects using ECE depot. They want a quicker and more reliable way to purchase their items than the current system.
Method (Observation): A group of electrical and computer engineering students were observed while completing a task. The task was to complete an order using the current ECE Depot website. While creating the order, the users were told to express their thought process out loud. After completing the observation, users were then interviewed about their experience.
User Research
User Persona
Comments
Mock Order Feedback
Mock Order Feedback
Honest Feedback from Our Users
Honest Feedback from Our Users
Current ECE Depot System
The exhaustingly long inventory is so incredibly time consuming. This makes me not want to order online!!! I'm also worried about ordering the wrong item because the products are so crammed together.
Interviewee #1
EE Major
Overwhelmed when ordering
It’s difficult to tell which item I need since there are too many options.
Interviewee #2
CompE Major
Lack of visuals
There are no pictures of the item in the inventory list. I don’t know if I’m buying the right thing!!!
Interviewee # 3
EE Major
Items ordered wrong
I would rather not use this site due to the possibility of ordering an item wrong. I prefer e-commerce sites like Amazon or Digikey!
Interviewee #4
EE Major
Including categories for the different types of items would be extremely helpful.
Interviewee #5
CompE Major
Affinity Mapping
Affinity Mapping
Efficient, user-friendly, and easy
After conducting several interviews, we categorized the feedback from our interviewees into four sub-categories: navigation, layout, UI/visuals, and ordering. Navigation focused on issues users encountered with the system's wire flow. Layout addressed frustrations related to the organization of features on the screen. UI/visuals encompassed areas where users suggested improvements for better aesthetics. Finally, ordering included feedback provided while users were completing the task of ordering an item.
After conducting several interviews, we categorized the feedback from our interviewees into four sub-categories: navigation, layout, UI/visuals, and ordering. Navigation focused on issues users encountered with the system's wire flow. Layout addressed frustrations related to the organization of features on the screen. UI/visuals encompassed areas where users suggested improvements for better aesthetics. Finally, ordering included feedback provided while users were completing the task of ordering an item.
Design Process
Design Process
Starting our visual process….
Starting our visual process….
We wanted a consistent search bar so our user always had the option of looking up an item. It was also important to incorporate features that give them multiple payment options and tells them if an item is in stock.
We wanted a consistent search bar so our user always had the option of looking up an item. It was also important to incorporate features that give them multiple payment options and tells our user if an item is in stock.
Heuristic Evaluations
Heuristic Evaluations
Efficient, user-friendly, and easy
The mid-fidelity prototype was assessed using Nielsen's 10 general principles to ensure accessibility and user-friendliness. During the evaluation, typical user scenarios were tested, including a student viewing their purchase history, ordering items for a project, completing an order and checking out, and adding an item to the cart. These scenarios were used to conduct the heuristic evaluations, and the findings are presented below. The prototype was then refined to address these issues, enhancing the overall user experience.
The mid-fidelity prototype was assessed using Nielsen's 10 general principles to ensure accessibility and user-friendliness. During the evaluation, typical user scenarios were tested, including a student viewing their purchase history, ordering items for a project, completing an order and checking out, and adding an item to the cart. These scenarios were used to conduct the heuristic evaluations, and the findings are presented below. The prototype was then refined to address these issues, enhancing the overall user experience.
ECE Depot Screens
ECE Depot Screens
Style Guide
Style Guide
User Testing
User Testing
Efficient, user-friendly, and easy
The participants in our initial observational user tests completed five scenarios with our updated prototype and rated their satisfaction on a scale from one (worst) to ten (best).
The five scenarios and the results were:
Viewing an item= Errors: 1, Rate: 9/10
Creating an order = Errors: 3, Rate: 9/10
Deleting an item = Errors: 0, Rate: 8/10
Canceling an order = Errors: 1, Rate 9/10
Navigating to the help page = Errors: 0, Rate: 9/10
The participants in our initial observational user tests completed five scenarios with our updated prototype and rated their satisfaction on a scale from one (worst) to ten (best).
The five scenarios and the results were:
Viewing an item= Errors: 1, Rate: 9/10
Creating an order = Errors: 3, Rate: 9/10
Deleting an item = Errors: 0, Rate: 8/10
Canceling an order = Errors: 1, Rate 9/10
Navigating to the help page = Errors: 0, Rate: 9/10
User Feedback
We fixed this typing issue for our high-fidelity
We fixed this typing issue for our high-fidelity
Animation
A delete animation was added to reassure our users
A delete animation was added to reassure our users
Order Dates
Details that showed our user when an order was fulfilled were added later
Order Dates
Details that showed our user when an order was fulfilled were added later
Final Design
Final Design
Final Results
Final Results
Overall our prototype had very positive feedback from our users. They preferred using the ECE Depot app over the current ECE Depot system. Many comments were made complimenting the UI, animations, and organization.
Overall our prototype had very positive feedback from our users. They preferred using the ECE Depot app over the current ECE Depot system. Many comments were made complimenting the UI, animations, and organization.
What I Learned
What I Learned
I learned ways to effectively use quantitative and qualitative data in order to improve our users experience. Conducting behavioral observations is a great way to understand issues that might've been overlooked!
I learned ways to effectively use quantitative and qualitative data in order to improve our users experience. I also learned that conducting behavioral observations is a great way to understand issues that might've been overlooked!