Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Google UX Design Course - Portfolio Project 1 - App Design for a Fictional Store (A. G. Sports World)

•
•
A
AnandGopalakrishnan8

This is my First Portfolio Project that I made as a part of the Google UX Design Course. I worked on this project from July to November 2022. It is a design for an e-commerce app for a fictional shop selling sports equipment/clothing.

1 of 26
A. G. Sports World App Design Anand Gopalakrishnan Designing an E-Commerce App for a Shop That Sells Sports Equipment/Clothing My First Portfolio Project as a part of the Google UX Design Course
The product: A. G. Sports World is a shop that sells quality sports equipment/clothing that is located in a busy metropolitan area. They offer a wide range of products at competitive prices, and target customers interested in sports or physical activity. Project overview Project duration: July 2022 to November 2022
The problem: Busy workers want to make time for physical activity within their schedules, but they don’t have an easy way to get the equipment they need without going to a physical store. Project overview The goal: Design an app for A. G. Sports World that would help users easily order sports equipment/clothing without needing to take the time to go to a physical store.
My role: UX Designer tasked with creating the A. G. Sports World e-commerce app from the idea of an app to the creation of polished designs. Project overview Responsibilities: My responsibilities throughout this project included conducting user research through interviews and usability studies, creating wireframes and mockups, creating low-fidelity and high-fidelity prototypes, considering accessibility, and iterating on the designs after carrying out usability studies.
Understanding the user ● User research ● Personas ● Problem statements ● User journey maps
User research: summary In order to understand who were the users I was designing for along with their needs, I conducted user research through interviews, and I created empathy maps. I identified that a major user group included working people who wanted more time for physical activity and sports, but did not have the time to go to a sports store to buy things. Although some initial assumptions were confirmed, it was found that a lack of time was not the only factor. Other factors that affected the users included a busy schedule, commitments and responsibilities to family members and unfamiliarity of the local neighbourhood (for recent immigrants).
User research: pain points Busy Schedule Working people want to make time for physical activity, but their busy work schedules and commitments to their families prevents them from going to an actual sports store. Accessibility Online stores may not be compatible with assistive technologies such as screen readers, and may not have a feature to translate the page into another language. Filter Options Working people are conscoius of their budget and have their own personal preferences, and so want options to filter the results of the online store. IA Online stores may have much more text than images, and the text has a very small font size, making it difficult to obtain all the information about the product. 1 2 3 4
Persona: Vikram Problem statement: Vikram is a busy software engineer who needs an easy and reliable way of order sports equipment and clothing online because he wants to make time for physical activity amongst his busy schedule and family commitments.
User journey map By making a user journey map for Vikram, I saw how important it was for users to have a stand- alone e-commerce app for the shop.
● Paper wireframes ● Digital wireframes ● Low-fidelity prototype ● Usability studies Starting the design
Paper wireframes I took the time to draw my initial ideas out as paper wireframes, iterating on each one in order to align it with the user pain points that I had identified. I initially sketched out a simple user flow by which the user could place their order, only including the major screens.
Digital wireframes When creating the initial designs, I kept the user pain points that I found during my initial user research in mind, and I tried to incorportate features that would help to solve these pain points. Simple way to access the Navigation Menu; present in all wireframes Easy-to- access sort and filter options for the users, as users mentioned during initial research.
Digital wireframes Alongside addressing pain points, I also made sure to address accessibility considerations as early as possible in the design process, such as features for enabling a screen reader, or changing the language. Accessible screen-reader option, present on all pages initially Simply way to select a convenient date and time range for delivery of the order
Low-fidelity prototype After creating all of my wireframes in Figma, I connected them together, in order to create a low-fidelity prototype that would mimic the user flow in the final app. You can see the low-fidelity prototype at this link.
Usability study: findings I conducted two rounds of usability studies. The first round helped guide me when creating my mockups, and the second round helped me refine those mockups into the final designs. Round 1 findings The search functionality was confusing to users. 1 Users felt confused in some parts of the flow, as there were too many animations. 2 Round 2 findings Users needed an easy way to find and enable accessibility settings 1 Users wanted a way to add products directly to the cart 2 Users wanted an easier way to select a date/time for delivery 3
● Mockups ● High-fidelity prototype ● Accessibility Refining the design
Mockups The usability studies demonstrated that users felt that the products screen was too crowded, so the design of the screen was altered to make it easier to read. Also, users wanted a way to add items to the cart directly from the products page. I incorporated this as well. Before usability study After usability study
Mockups The second usability study showed that users were confused by the search functionality in on the original Home Screen, so this was updated to a button instead of a search bar. Along with this, the position of the “back” buttons was changed from the bottom to the top of the screen. Before usability study After usability study
Mockups
High-fidelity prototype The final high-fidelity prototype featured an updated search option and simpler animations, while also incorporating all of the feedback from the first usability study as well. The completed high-fidelity prototype can be seen at this link.
Accessibility considerations Provided access to people who primarily speak or use other languages by giving options to change the language during the sign-up process and in the profile. Used icons to make navigation easier for all the users. All icons are also accompanied by descriptive labels. Provided accessibility to visually impaired people by providing alt text to images and functionality for an in- built screen-reader. 1 2 3
● Takeaways ● Next steps Going forward
Takeaways Impact: Users feel that the app considers their needs well, including being accessible to a wider range of people. The following is a quote from peer feedback: “It was super easy to place an order on the app, but what I liked the most was that I could select the date and time I preferred for my parcel to delivered! That way, I can make sure I’m at home to receive it.” What I learned: While designing the A. G. Sports World mobile app, I learnt about the Design Process and the various stages involved. I also learnt about the importance of user research, and saw how it helped me to iterate on my designs.
Next steps Conducting a third usability study to assess whether the user pain points have been effectively addressed. Adding/elaborating features such as the sort and filter options, the “What’s Trending”, “Favourites”, etc. on the Home Page, as well as the My Orders page mentioned in the Navigation Menu. Conducting a fourth usability study along with more user research to find out whether these new features help to enhance the user experimence or not. 1 2 3
Let’s connect! Thank you for taking the time to review my work on the A. G. Sports World App! If you would like to get in touch, my contact information is given below: Email Address: anandgopalakrishnan27@gmail.com
Thank you!

More Related Content

Google UX Design Course - Portfolio Project 1 - App Design for a Fictional Store (A. G. Sports World)

  • 1. A. G. Sports World App Design Anand Gopalakrishnan Designing an E-Commerce App for a Shop That Sells Sports Equipment/Clothing My First Portfolio Project as a part of the Google UX Design Course
  • 2. The product: A. G. Sports World is a shop that sells quality sports equipment/clothing that is located in a busy metropolitan area. They offer a wide range of products at competitive prices, and target customers interested in sports or physical activity. Project overview Project duration: July 2022 to November 2022
  • 3. The problem: Busy workers want to make time for physical activity within their schedules, but they don’t have an easy way to get the equipment they need without going to a physical store. Project overview The goal: Design an app for A. G. Sports World that would help users easily order sports equipment/clothing without needing to take the time to go to a physical store.
  • 4. My role: UX Designer tasked with creating the A. G. Sports World e-commerce app from the idea of an app to the creation of polished designs. Project overview Responsibilities: My responsibilities throughout this project included conducting user research through interviews and usability studies, creating wireframes and mockups, creating low-fidelity and high-fidelity prototypes, considering accessibility, and iterating on the designs after carrying out usability studies.
  • 5. Understanding the user ● User research ● Personas ● Problem statements ● User journey maps
  • 6. User research: summary In order to understand who were the users I was designing for along with their needs, I conducted user research through interviews, and I created empathy maps. I identified that a major user group included working people who wanted more time for physical activity and sports, but did not have the time to go to a sports store to buy things. Although some initial assumptions were confirmed, it was found that a lack of time was not the only factor. Other factors that affected the users included a busy schedule, commitments and responsibilities to family members and unfamiliarity of the local neighbourhood (for recent immigrants).
  • 7. User research: pain points Busy Schedule Working people want to make time for physical activity, but their busy work schedules and commitments to their families prevents them from going to an actual sports store. Accessibility Online stores may not be compatible with assistive technologies such as screen readers, and may not have a feature to translate the page into another language. Filter Options Working people are conscoius of their budget and have their own personal preferences, and so want options to filter the results of the online store. IA Online stores may have much more text than images, and the text has a very small font size, making it difficult to obtain all the information about the product. 1 2 3 4
  • 8. Persona: Vikram Problem statement: Vikram is a busy software engineer who needs an easy and reliable way of order sports equipment and clothing online because he wants to make time for physical activity amongst his busy schedule and family commitments.
  • 9. User journey map By making a user journey map for Vikram, I saw how important it was for users to have a stand- alone e-commerce app for the shop.
  • 10. ● Paper wireframes ● Digital wireframes ● Low-fidelity prototype ● Usability studies Starting the design
  • 11. Paper wireframes I took the time to draw my initial ideas out as paper wireframes, iterating on each one in order to align it with the user pain points that I had identified. I initially sketched out a simple user flow by which the user could place their order, only including the major screens.
  • 12. Digital wireframes When creating the initial designs, I kept the user pain points that I found during my initial user research in mind, and I tried to incorportate features that would help to solve these pain points. Simple way to access the Navigation Menu; present in all wireframes Easy-to- access sort and filter options for the users, as users mentioned during initial research.
  • 13. Digital wireframes Alongside addressing pain points, I also made sure to address accessibility considerations as early as possible in the design process, such as features for enabling a screen reader, or changing the language. Accessible screen-reader option, present on all pages initially Simply way to select a convenient date and time range for delivery of the order
  • 14. Low-fidelity prototype After creating all of my wireframes in Figma, I connected them together, in order to create a low-fidelity prototype that would mimic the user flow in the final app. You can see the low-fidelity prototype at this link.
  • 15. Usability study: findings I conducted two rounds of usability studies. The first round helped guide me when creating my mockups, and the second round helped me refine those mockups into the final designs. Round 1 findings The search functionality was confusing to users. 1 Users felt confused in some parts of the flow, as there were too many animations. 2 Round 2 findings Users needed an easy way to find and enable accessibility settings 1 Users wanted a way to add products directly to the cart 2 Users wanted an easier way to select a date/time for delivery 3
  • 16. ● Mockups ● High-fidelity prototype ● Accessibility Refining the design
  • 17. Mockups The usability studies demonstrated that users felt that the products screen was too crowded, so the design of the screen was altered to make it easier to read. Also, users wanted a way to add items to the cart directly from the products page. I incorporated this as well. Before usability study After usability study
  • 18. Mockups The second usability study showed that users were confused by the search functionality in on the original Home Screen, so this was updated to a button instead of a search bar. Along with this, the position of the “back” buttons was changed from the bottom to the top of the screen. Before usability study After usability study
  • 20. High-fidelity prototype The final high-fidelity prototype featured an updated search option and simpler animations, while also incorporating all of the feedback from the first usability study as well. The completed high-fidelity prototype can be seen at this link.
  • 21. Accessibility considerations Provided access to people who primarily speak or use other languages by giving options to change the language during the sign-up process and in the profile. Used icons to make navigation easier for all the users. All icons are also accompanied by descriptive labels. Provided accessibility to visually impaired people by providing alt text to images and functionality for an in- built screen-reader. 1 2 3
  • 22. ● Takeaways ● Next steps Going forward
  • 23. Takeaways Impact: Users feel that the app considers their needs well, including being accessible to a wider range of people. The following is a quote from peer feedback: “It was super easy to place an order on the app, but what I liked the most was that I could select the date and time I preferred for my parcel to delivered! That way, I can make sure I’m at home to receive it.” What I learned: While designing the A. G. Sports World mobile app, I learnt about the Design Process and the various stages involved. I also learnt about the importance of user research, and saw how it helped me to iterate on my designs.
  • 24. Next steps Conducting a third usability study to assess whether the user pain points have been effectively addressed. Adding/elaborating features such as the sort and filter options, the “What’s Trending”, “Favourites”, etc. on the Home Page, as well as the My Orders page mentioned in the Navigation Menu. Conducting a fourth usability study along with more user research to find out whether these new features help to enhance the user experimence or not. 1 2 3
  • 25. Let’s connect! Thank you for taking the time to review my work on the A. G. Sports World App! If you would like to get in touch, my contact information is given below: Email Address: anandgopalakrishnan27@gmail.com