SlideShare a Scribd company logo

UIUX Design - report on summer training.docx

•Download as DOCX, PDF•
•
B
bhawnamangla2

Bhawna completed a summer training program in UI/UX design at UIUX Studio. As part of the program, she worked on a project designing a mobile app and branding for a food donation nonprofit called Kai. Her process involved user research, competitor analysis, persona creation, wireframing, usability testing, and visual design. Her final prototype for the Kai app aimed to seamlessly facilitate food donation scheduling and pickups between businesses and recipients.

1 of 33
Summer Training Report UIUX Studio B-409, 4th Floor, Bestech Business Tower, Sector 66, Sahibzada Ajit Singh Nagar, Mohali, Punjab 160066, India. Training- UI Designing Duration- 27 May,2019 to 15 July,2019 Submitted in partial fulfilment of the requirements for the degree of Bachelor of Technology in Information Technology Submitted by- Bhawna (161476)
Table of Contents Serial No: Content Page No.: 1. UI Experience 2. UX Experience 3. Grid System 4. Maslow’s Hierarchy of Needs 5. Difference between Graphic Designer and UX Designer 6. Project- KIA app and branding
Acknowledgement I would like to express my deepest appreciation to all those who provided me the possibility to complete this report on UI Designing. A special gratitude I give to our final year project incharge, Mr Ravinder Bhatt whose contribution in stimulating suggestions and encouragement, helped me to coordinate my project especially in writing this report. Furthermore I would also like to acknowledge with much appreciation the crucial role of the staff of UIUX Studio who gave the permission to use all required equipment and the necessary materials to understand the concepts as well as usage of software. A special thanks goes to my project faculty incharge , Mr Harminder Singh who help me to assemble the parts and gave suggestions about the tasks. I have to appreciate the guidance given by other supervisor as well as the panels especially in my project lectures that has improved my concepts on UI Designing.
DECLARATION BY THE CANDIDATE I the undersigned solemnly declare that the report is based on my own training carried out during the course of my study under the supervision of Mr. Harminder Singh. I assert the statements made and conclusions drawn are an outcome of my training lectures. I further certify that : I. The work contained in the report is authentic and has been done by me under the general supervision of my supervisor. II. I have followed the guidelines provided by the university in writing the report. Bhawna Roll no:161476
Introduction- User Interface Design User Interface (UI) design is a large field. In theory, UI is a combination of content (documents, texts, images, videos, etc), form (buttons, labels, text fields, check boxes, drop-down lists, graphic design, etc), and behavior (what happens if I click/drag/type). It takes a good eye, a lot of practice, and a lot of trial and error to get better at it. As a UI designer, our goal is to create a user interface that is engaging, beautiful, and also creates an emotional response from the user to make your products more lovable and beautiful. When I started out, something I learned from my mentor is to take a tour guide journey to your product. Imagine your app/website as a journey. Every user that downloads your app right from spotting it in the App Store/web, through using it, achieving goals or completing tasks within the app is taken on a journey. And that journey should be a delightful one. And you, as the app designer, are the craftsman that designs this journey. So you don’t want to throw all the information on the screen hoping that the user will pick it up. That’s the very opposite of a good UI. Instead, you’re the tour guide that takes the user on a wonderful journey through your app. And in order to this, you have to be able to shift and move their attention from place to place guiding them. Design isn’t all about learning to use design software —although that’s certainly important. Software is like a designer’s sword. You need the sword to fight the battle, but that’s not all you need to learn to use. You need to learn the strategies, processes, tricks and tips of the fight/game to be able to win it. In UI design, you need to brainstorm, experiment, test, and understand your users and their journey throughout using your product.
The benefits of having a well-designed product is that you’ll have a higher user retention rate. Things to remember about creating delightful UI 1. On a screen, people will always read the biggest, the boldest, and the brightest first.This is human nature. Our attention is programmed in such a way where we see the biggest, the boldest, and the brightest first. And then it moves to smaller, less bold, and less bright things. 2. As a designer, you can use this information to curate the experience of your user. 3. The Importance of Alignment. Alignment is a fundamental aspect of UI Design. And an important design principle is: minimize the number of alignment lines. It improves readibility and makes the design more pleasing to the eye. There are two fundamental types of alignment: Edge alignment and Center alignment.  Edge alignment is where you have all the elements having one side or edge lining up with a single line.  Center alignment is where you line up all the elements by their midpoint. Depending on the usecase, you’ll choose one or the other. Usually, edge alignment is considered better. It’s quite easy to align elements in design software like Photoshop. Most design software will usually provide a ruler/guide to edge align all the elements. 3. Become an attention architect. Here’s two ways to interpret this: 1) You need to grab the user’s attention with your design. 2) You need to pay attention to every little thing in your designs. To be a great designer, you need to do both. The latter lets you achieve the former.
UI Design is about tailoring the experience for your users by guiding their attention towards different important things. Ways to use text to grab user’s attention:  Make its size larger or smaller.  Bolder or brighter in color. Or make it muted.  Use a typeface with a heavy weighting versus something that is thin or light.  Italicize words. Capitalise or lowercase some words.  Increase the distance between each of the letters to make the overall size of the words take up more space. The most important thing when designing is testing! Make sure you try out different everything: colors, fonts, tones, angles, alignment, layout, etc. Experiment with different designs so that you can architect a user journey using various ways of commanding attention. User Experience Design User Experience (UX) design is about creating pain-free and enjoyable experiences. Here are 7 questions to ask yourself to know if the UX of your product is good: 1. Usability: What is the user using my app for? What is the core functionality of my app? What is it that I need to get right in order for my app to be used? Now how can I minimise the number of steps that it takes for the user to achieve it within my app? What is the main thing my users want to achieve with my app? How can I make the experience of achieving that as smooth, quick, and enjoyable as much? 2. User Profiling: You have to know who your users are and what they want to achieve using your app. The best way to do this is by profiling your users. You have to do a few thinking exercises to understand your market.
Narrow down your target/user audience. The main question to keep asking yourself is: What is the core functionality of my app? Profile your users to continually reevaluate that question. 3. Asking for permissions: If your mobile app has push notifications, needs location services, integration with social media, email, etc, you know you need user’s permission on an alert message that pops up on the screen when they’re using your app. Instead of asking all at once which would overwhelm the user, use The Benjamin Franklin effect. Before asking someone for a big favour, ask them for a small favour. And slowly nudge the user towards a certain direction. Make sure your app sends the permission notification only when the user is about to use that feature and not when they just launch the app. 4. Form vs Function: Design is not always about the form — beautiful color scheme, the fonts, the layout, and such. It’s also about the functionality. Always go for function over form. 5. Consistency: Am I being consistent throughout my app? Is my app consistent with my brand? Inconsistency in design creates confusion. A confused user is an unhappy user. Think of consistency, not just in terms of appearance, but also in terms of functionality. 6. Simplicity: Can I make it simpler? Make sure your app is grandma-proof, i.e., older people can understand it and use it. A bad confusing app would be rows upon rows of buttons, lots of different colors, and a tightly packed user interface. 7. Don’t make me think: Am I making things difficult for my user? Humans don’t like to be confused. When we’re programming, we’re trying to make our code as lightweight and as efficient as possible. When we’re designing, we’re trying to make the interface as clear and as least confusing as possible. And beautiful!
Project- Kai: Mobile App Design + Branding Overview : The Client- Kai is a food donation non-profit that connects businesses with excess food to India’s food-insecure residents. The Challenge- Create a mobile app that will allow businesses to painlessly donate food. Outcome- A mobile app that seamlessly facilitates the scheduling and management of food donation pick-ups. Length of Project- 2 weeks (Speculative Project) Tools- Sketch, AdobeXD. Research : During the research phase, I sought to understand the trends that set the standard in the non-profit sector. I also needed to uncover the needs and frustrations of the target user to better understand how to appeal to them. Research Goals 1. Define the standard for donation services. 2. Learn about popular donation apps on the market. 3. Understand why businesses and organizations donate and why individuals receive food donations. 4. Define common behaviors of businesses and organizations when donating food 5. Define common behaviors of individuals receiving food donations 6. Determine users’ needs and frustrations when donating and receiving donated food
7. Understand how donors, food recipients, and intermediary startups interact. 8. Identify areas of the donation experience that could be improved. Secondary Research: Market Research First, I conducted secondary research to familiarize myself with food donation apps that are already on the market. I gathered data on the problem of food waste in India and the use of technology to tackle the issue. Secondary Research: Competitive Analysis A competitive analysis was performed to understand the strengths, weaknesses, similarities, and differences between competitor food donation start-ups. My competitive analysis produced the following insights: Findings  There are not many competitors in this industry, at least not who have a mobile app to coordinate donations. There is an opportunity to use mobile-based technology to improve the efficiency of the donation process.  Many food donation apps have tight restrictions on what types of entities may donate; some only allow restaurants or corporations.  There is very little information about how these food startups go about choosing the recipients of the donated food- more transparency would help users who want to make sure their contributions are reaching people who truly need them.  Tax deductions play a major role in incentivizing businesses to donate. Almost every competitor outlined the financial benefits of charitable giving.
Secondary Research - Provisional Personas I created provisional personas that reflected the data I had collected through user research. Understanding the target audience helped me think about how the app would appeal to different demographics with varying needs. Primary Research - Interviews To better understand the perspective of the target user, I interviewed 4 people- two people who regularly donate to a food bank and two people who receive food from food banks in the DC area. Research Assumptions:  The donation process needs optimization via technology.  Donation recipients have mobile devices on which to access donation services.  Users are unsatisfied with the current donation structure in place.
After completing the interviews I wrote down all of the responses on sticky notes and began to cluster them based on topic. By clustering interview responses, I discovered trends and patterns that revealed insights about the user experience. Through this process I identified several user needs: 1. Users need convenience throughout the food donation process. 2. Recipients need to know they will receive high-quality food donations. 3. Users need efficiency throughout the food donation process. 4. Donors need to find donating mutually beneficial.
Persona Creation Next, I used all of the qualitative data i gathered during the research process to create two personas. Since Kai is a two-sided service, meaning it is used by both donors and recipients, I wanted to capture both types of users through my personas. I found that donors and recipients have different needs and motivations. Point of View Statements & How Might We Questions At this point, I realized that I would only have time to focus on one user group, so I decided to move forward with the donor persona. I had identified the needs of donors, so I had to shift gears from intensive research to ideation. I created Point of View statements and How Might We questions to generate a list of solutions to the challenge. Define and Ideate:
Group Brainstorming I asked two friends to assist me in generating ideas for this project. For each How Might We question, I asked them to come up with as many solutions as possible in the given time frame.
Business and User Goals Next, I reflected on the business goals, user goals, and technical considerations for all stakeholders. Once I had identified common goals, I could decide what product features were necessary for the prototype.
Information Architecture : A high-level list of app features was created to further define and guide the vision for the product. Prioritizing the features with supporting research created a clear order of execution.
Next, I created a site map for Kai that outlined the app’s navigation and information hierarchy. Interaction Design I completed a task flow and user flow to imagine the ways a user might navigate through the app to donate food. These tools helped me ensure that the information was organized in the most intuitive fashion for the user.
UIUX Design - report on summer training.docx
Test Wireframes: Low-Fidelity I began the process of wireframing with sketches of several of the main screens for Kai. During this process, I thought about how the layout and content could be structured to satisfy user and business goals in a technically feasible way. The sketch I chose served as a guide for my digital wireframes.
Wireframes: Mid-Fidelity I created a UI requirements document to outline all of the features and elements I wanted to incorporate into the design. Once this was complete, I started creating digital wireframes for the main screens in Sketch. Usability Testing I asked 4 participants to test out the prototype's usability. The participant pool was comprised of people over the age of 18 who are android users. The participants were given four scenarios, each with a task to complete. Tasks: 1. Use the tracking feature to see how close your driver is. 2. Navigate to the donation guide and read the food donation regulations for your state. 3. Message your driver to give him the access code to the security gate. 4. View your rank in the office’s donation league.
Affinity Mapping I created an affinity map to organize and synthesize the responses and observations I captured using testing. I uncovered insights, which were reconstructed into a list of recommendations. I organized these by priority level (high to low) as a way to determine what needed to be changed immediately and what could be saved for later.
Findings: All participants were able to complete all tasks; however there. The most challenging task for users was the first task, which asked them to use the tracker feature to see how close their driver was. Overall, most issues users had were caused by information hierachy. Recommendations: 1. Move Track Driver feature to the pick-up details screen. 2. Simplify the schedule donation button by removing the vector image. 3. Reorganize the information hierarchy of the donation page. 4. Increase font size of ETA message on the tracker map. 5. Change the title “Contact Information” on the pick-up details page to something more descriptive. After updating my wireframes to incorporate the recommendations, I moved on to visual design. Up until this point, my prototype lacked a color scheme, typography, and a brand identity. I looked for inspiration for the mobile app on Pinterest.
Visual Design: Next, I started brainstorming logos. Coming up with brand adjectives helped me narrow my vision. I sketched ideas first, and then created digital versions of my favorites.
The logos were added to the Style Guide and UI Kit, a comprehensive collection of all site components and UI patterns. Both documents are constantly changing as the website and brand grow.
Finally, I applied the branding from the style tile to the mid-fidelity wireframes, the result of which was a set of high-fidelity wireframes.
UIUX Design - report on summer training.docx
The final prototype -
The Differences between Graphic Design and UX Design User-focused vs pixel-focused Graphic designers tend to pursue pixel perfection in their designs. Ensuring that texts have perfect kerning and colors conform to brand guidelines often take up a significant portion of graphic designers’ jobs—and for good reason, too. UX designers, however, are primarily focused on users. They study the interface between users and the product, finding ways to ensure that the product answers to the user’s key needs. And they do so by conducting a lot of research—by talking to and observing users, creating user personas and stories, doing usability testing on the products, and many more. Graphic designers looking to switch career tracks will need to do a substantial amount of work finding out how to conduct user research (more about this a bit later on in the article). Iterative problem solving UX design is very much an iterative problem solving process, and it can be very different from what you’re used to doing as a graphic designer. It begins with the identification of a problem; this is often found through user research, and if it’s not, it will then be confirmed through user research. There is no point in solving problems that users don’t care about; they won’t pay to solve those problems, and that means your company won’t make money. From the problem identification stage, more research is conducted into how best to solve the problem in a way that the user will be happy with—usually via observations, surveys, ethnographic studies, etc. This research then informs the product’s design. Designs are then tested with users to see if the research led to the right solutions. The designs are constantly iterated until research confirms that they are good enough. Once this happens the product is launched, but the design process is not over. The design will be continually tested and user feedback will be taken, thus beginning a new round of user research. Future improvements to the design will be made based on this feedback. Multi-disciplinary vs specialized Graphic design is a specialized discipline, and there is a certain level of craftsmanship and set of specialized skills (such as typography and color theory) required to produce great visuals. UX design, on the other hand, is much more multi-disciplinary and involves many schools of knowledge. UX designers have to constantly learn about human psychology, interaction design, information architecture and user research techniques, just to name a few, in order to create the right solutions to a user’s problems. Don Norman, the man who coined the term “User Experience”, explains that user experience covers “all aspects of the person's experience with the system including industrial design graphics, the interface, the physical interaction and the manual.”
UIUX Design - report on summer training.docx
The Grid System: Building a Solid Design Layout The grid system helps align page elements based on sequenced columns and rows. We use this column-based structure to place text, images, and functions in a consistent way throughout the design. Every element has its place that we can see instantly and reproduce elsewhere. Consider the grids we find in maps. Islands, towns, lakes will appear on an exact part of a map, on a set of North- South/East-West coordinates. They will always appear in the same place on other maps. The grid system was first used to arrange handwriting on paper and then in publishing to organize the layout of printed pages. Given that the printed page and the virtual page have much in common,it should come as no surprise that we also use it in web and app design. Creating a grid system for the virtual page is a little more complex than for the physical page – browsers handle information differently, and screens vary in size.Happily, however, the principle remains the same.The best layout is one which provides no distraction from the content. Thanks to its mathematical precision, the grid system is a great example of this kind of layout.
Maslow's Hierarchy of Needs User needs are no different from our general needs. For each of the levels of Maslow's hierarchy, we can recognize these needs in the drives displayed by users. Advertising represents one of the clearest examples of Maslow's hierarchy of needs influencing design. It would be quicker to name products that are not advertised using models (male and/or female) to tap into the physiological need for the sex. Such is the power of harnessing the drive presented by human need, even where there is no genuine link between a product and one of the basic physiological needs, that it does not stop advertisers from playing (or should that be preying?) on one or more of them so as to grab our attention and get us to part with our money. Take Richard Branson's failed attempt to get a piece of the soft drink market, with Virgin Cola, which had a bottle design apparently modelled on Pamela Anderson's figure. Human needs should also be considered when you are trying to highlight the positive aspects of your products. For example, if you are selling drinks, images and text which draw attention to or accentuate the thirst-quenching nature of the product can improve its appeal. Likewise, a package holiday deal can seem a lot more attractive if you show people enjoying a meal and a few drinks (i.e. two physiological needs). Regardless of the product you are working on, it will be for some human need, whether it is to satisfy a physiological, safety, love/belonging, esteem, or a self-actualization need; if there is no need, then you should probably look at starting another project.
Conclusion:- Since I was coming into UX Design from a completely unrelated area, I wanted to educate myself about the field. I wanted to know what a graphic design is about and know about latest trends. I signed up for various design newsletters and also subscribed for courses on interaction-design.org . I followed popular UX publications on Medium. While doing some reading on design, I came to know I needed high quality way for theoretical and practical knowledge of this field. So I joined UIUX Studio company to gain practical knowledge on how to handle projects and learn more about UIUX Experience. I did the project on food app under supervision of the manager of the company which helped me in increasing my knowledge to good amount about this field. References- https://www.interaction-design.org/courses?r=bhawna-1
UIUX Design - report on summer training.docx

More Related Content

UIUX Design - report on summer training.docx

  • 1. Summer Training Report UIUX Studio B-409, 4th Floor, Bestech Business Tower, Sector 66, Sahibzada Ajit Singh Nagar, Mohali, Punjab 160066, India. Training- UI Designing Duration- 27 May,2019 to 15 July,2019 Submitted in partial fulfilment of the requirements for the degree of Bachelor of Technology in Information Technology Submitted by- Bhawna (161476)
  • 2. Table of Contents Serial No: Content Page No.: 1. UI Experience 2. UX Experience 3. Grid System 4. Maslow’s Hierarchy of Needs 5. Difference between Graphic Designer and UX Designer 6. Project- KIA app and branding
  • 3. Acknowledgement I would like to express my deepest appreciation to all those who provided me the possibility to complete this report on UI Designing. A special gratitude I give to our final year project incharge, Mr Ravinder Bhatt whose contribution in stimulating suggestions and encouragement, helped me to coordinate my project especially in writing this report. Furthermore I would also like to acknowledge with much appreciation the crucial role of the staff of UIUX Studio who gave the permission to use all required equipment and the necessary materials to understand the concepts as well as usage of software. A special thanks goes to my project faculty incharge , Mr Harminder Singh who help me to assemble the parts and gave suggestions about the tasks. I have to appreciate the guidance given by other supervisor as well as the panels especially in my project lectures that has improved my concepts on UI Designing.
  • 4. DECLARATION BY THE CANDIDATE I the undersigned solemnly declare that the report is based on my own training carried out during the course of my study under the supervision of Mr. Harminder Singh. I assert the statements made and conclusions drawn are an outcome of my training lectures. I further certify that : I. The work contained in the report is authentic and has been done by me under the general supervision of my supervisor. II. I have followed the guidelines provided by the university in writing the report. Bhawna Roll no:161476
  • 5. Introduction- User Interface Design User Interface (UI) design is a large field. In theory, UI is a combination of content (documents, texts, images, videos, etc), form (buttons, labels, text fields, check boxes, drop-down lists, graphic design, etc), and behavior (what happens if I click/drag/type). It takes a good eye, a lot of practice, and a lot of trial and error to get better at it. As a UI designer, our goal is to create a user interface that is engaging, beautiful, and also creates an emotional response from the user to make your products more lovable and beautiful. When I started out, something I learned from my mentor is to take a tour guide journey to your product. Imagine your app/website as a journey. Every user that downloads your app right from spotting it in the App Store/web, through using it, achieving goals or completing tasks within the app is taken on a journey. And that journey should be a delightful one. And you, as the app designer, are the craftsman that designs this journey. So you don’t want to throw all the information on the screen hoping that the user will pick it up. That’s the very opposite of a good UI. Instead, you’re the tour guide that takes the user on a wonderful journey through your app. And in order to this, you have to be able to shift and move their attention from place to place guiding them. Design isn’t all about learning to use design software —although that’s certainly important. Software is like a designer’s sword. You need the sword to fight the battle, but that’s not all you need to learn to use. You need to learn the strategies, processes, tricks and tips of the fight/game to be able to win it. In UI design, you need to brainstorm, experiment, test, and understand your users and their journey throughout using your product.
  • 6. The benefits of having a well-designed product is that you’ll have a higher user retention rate. Things to remember about creating delightful UI 1. On a screen, people will always read the biggest, the boldest, and the brightest first.This is human nature. Our attention is programmed in such a way where we see the biggest, the boldest, and the brightest first. And then it moves to smaller, less bold, and less bright things. 2. As a designer, you can use this information to curate the experience of your user. 3. The Importance of Alignment. Alignment is a fundamental aspect of UI Design. And an important design principle is: minimize the number of alignment lines. It improves readibility and makes the design more pleasing to the eye. There are two fundamental types of alignment: Edge alignment and Center alignment.  Edge alignment is where you have all the elements having one side or edge lining up with a single line.  Center alignment is where you line up all the elements by their midpoint. Depending on the usecase, you’ll choose one or the other. Usually, edge alignment is considered better. It’s quite easy to align elements in design software like Photoshop. Most design software will usually provide a ruler/guide to edge align all the elements. 3. Become an attention architect. Here’s two ways to interpret this: 1) You need to grab the user’s attention with your design. 2) You need to pay attention to every little thing in your designs. To be a great designer, you need to do both. The latter lets you achieve the former.
  • 7. UI Design is about tailoring the experience for your users by guiding their attention towards different important things. Ways to use text to grab user’s attention:  Make its size larger or smaller.  Bolder or brighter in color. Or make it muted.  Use a typeface with a heavy weighting versus something that is thin or light.  Italicize words. Capitalise or lowercase some words.  Increase the distance between each of the letters to make the overall size of the words take up more space. The most important thing when designing is testing! Make sure you try out different everything: colors, fonts, tones, angles, alignment, layout, etc. Experiment with different designs so that you can architect a user journey using various ways of commanding attention. User Experience Design User Experience (UX) design is about creating pain-free and enjoyable experiences. Here are 7 questions to ask yourself to know if the UX of your product is good: 1. Usability: What is the user using my app for? What is the core functionality of my app? What is it that I need to get right in order for my app to be used? Now how can I minimise the number of steps that it takes for the user to achieve it within my app? What is the main thing my users want to achieve with my app? How can I make the experience of achieving that as smooth, quick, and enjoyable as much? 2. User Profiling: You have to know who your users are and what they want to achieve using your app. The best way to do this is by profiling your users. You have to do a few thinking exercises to understand your market.
  • 8. Narrow down your target/user audience. The main question to keep asking yourself is: What is the core functionality of my app? Profile your users to continually reevaluate that question. 3. Asking for permissions: If your mobile app has push notifications, needs location services, integration with social media, email, etc, you know you need user’s permission on an alert message that pops up on the screen when they’re using your app. Instead of asking all at once which would overwhelm the user, use The Benjamin Franklin effect. Before asking someone for a big favour, ask them for a small favour. And slowly nudge the user towards a certain direction. Make sure your app sends the permission notification only when the user is about to use that feature and not when they just launch the app. 4. Form vs Function: Design is not always about the form — beautiful color scheme, the fonts, the layout, and such. It’s also about the functionality. Always go for function over form. 5. Consistency: Am I being consistent throughout my app? Is my app consistent with my brand? Inconsistency in design creates confusion. A confused user is an unhappy user. Think of consistency, not just in terms of appearance, but also in terms of functionality. 6. Simplicity: Can I make it simpler? Make sure your app is grandma-proof, i.e., older people can understand it and use it. A bad confusing app would be rows upon rows of buttons, lots of different colors, and a tightly packed user interface. 7. Don’t make me think: Am I making things difficult for my user? Humans don’t like to be confused. When we’re programming, we’re trying to make our code as lightweight and as efficient as possible. When we’re designing, we’re trying to make the interface as clear and as least confusing as possible. And beautiful!
  • 9. Project- Kai: Mobile App Design + Branding Overview : The Client- Kai is a food donation non-profit that connects businesses with excess food to India’s food-insecure residents. The Challenge- Create a mobile app that will allow businesses to painlessly donate food. Outcome- A mobile app that seamlessly facilitates the scheduling and management of food donation pick-ups. Length of Project- 2 weeks (Speculative Project) Tools- Sketch, AdobeXD. Research : During the research phase, I sought to understand the trends that set the standard in the non-profit sector. I also needed to uncover the needs and frustrations of the target user to better understand how to appeal to them. Research Goals 1. Define the standard for donation services. 2. Learn about popular donation apps on the market. 3. Understand why businesses and organizations donate and why individuals receive food donations. 4. Define common behaviors of businesses and organizations when donating food 5. Define common behaviors of individuals receiving food donations 6. Determine users’ needs and frustrations when donating and receiving donated food
  • 10. 7. Understand how donors, food recipients, and intermediary startups interact. 8. Identify areas of the donation experience that could be improved. Secondary Research: Market Research First, I conducted secondary research to familiarize myself with food donation apps that are already on the market. I gathered data on the problem of food waste in India and the use of technology to tackle the issue. Secondary Research: Competitive Analysis A competitive analysis was performed to understand the strengths, weaknesses, similarities, and differences between competitor food donation start-ups. My competitive analysis produced the following insights: Findings  There are not many competitors in this industry, at least not who have a mobile app to coordinate donations. There is an opportunity to use mobile-based technology to improve the efficiency of the donation process.  Many food donation apps have tight restrictions on what types of entities may donate; some only allow restaurants or corporations.  There is very little information about how these food startups go about choosing the recipients of the donated food- more transparency would help users who want to make sure their contributions are reaching people who truly need them.  Tax deductions play a major role in incentivizing businesses to donate. Almost every competitor outlined the financial benefits of charitable giving.
  • 11. Secondary Research - Provisional Personas I created provisional personas that reflected the data I had collected through user research. Understanding the target audience helped me think about how the app would appeal to different demographics with varying needs. Primary Research - Interviews To better understand the perspective of the target user, I interviewed 4 people- two people who regularly donate to a food bank and two people who receive food from food banks in the DC area. Research Assumptions:  The donation process needs optimization via technology.  Donation recipients have mobile devices on which to access donation services.  Users are unsatisfied with the current donation structure in place.
  • 12. After completing the interviews I wrote down all of the responses on sticky notes and began to cluster them based on topic. By clustering interview responses, I discovered trends and patterns that revealed insights about the user experience. Through this process I identified several user needs: 1. Users need convenience throughout the food donation process. 2. Recipients need to know they will receive high-quality food donations. 3. Users need efficiency throughout the food donation process. 4. Donors need to find donating mutually beneficial.
  • 13. Persona Creation Next, I used all of the qualitative data i gathered during the research process to create two personas. Since Kai is a two-sided service, meaning it is used by both donors and recipients, I wanted to capture both types of users through my personas. I found that donors and recipients have different needs and motivations. Point of View Statements & How Might We Questions At this point, I realized that I would only have time to focus on one user group, so I decided to move forward with the donor persona. I had identified the needs of donors, so I had to shift gears from intensive research to ideation. I created Point of View statements and How Might We questions to generate a list of solutions to the challenge. Define and Ideate:
  • 14. Group Brainstorming I asked two friends to assist me in generating ideas for this project. For each How Might We question, I asked them to come up with as many solutions as possible in the given time frame.
  • 15. Business and User Goals Next, I reflected on the business goals, user goals, and technical considerations for all stakeholders. Once I had identified common goals, I could decide what product features were necessary for the prototype.
  • 16. Information Architecture : A high-level list of app features was created to further define and guide the vision for the product. Prioritizing the features with supporting research created a clear order of execution.
  • 17. Next, I created a site map for Kai that outlined the app’s navigation and information hierarchy. Interaction Design I completed a task flow and user flow to imagine the ways a user might navigate through the app to donate food. These tools helped me ensure that the information was organized in the most intuitive fashion for the user.
  • 19. Test Wireframes: Low-Fidelity I began the process of wireframing with sketches of several of the main screens for Kai. During this process, I thought about how the layout and content could be structured to satisfy user and business goals in a technically feasible way. The sketch I chose served as a guide for my digital wireframes.
  • 20. Wireframes: Mid-Fidelity I created a UI requirements document to outline all of the features and elements I wanted to incorporate into the design. Once this was complete, I started creating digital wireframes for the main screens in Sketch. Usability Testing I asked 4 participants to test out the prototype's usability. The participant pool was comprised of people over the age of 18 who are android users. The participants were given four scenarios, each with a task to complete. Tasks: 1. Use the tracking feature to see how close your driver is. 2. Navigate to the donation guide and read the food donation regulations for your state. 3. Message your driver to give him the access code to the security gate. 4. View your rank in the office’s donation league.
  • 21. Affinity Mapping I created an affinity map to organize and synthesize the responses and observations I captured using testing. I uncovered insights, which were reconstructed into a list of recommendations. I organized these by priority level (high to low) as a way to determine what needed to be changed immediately and what could be saved for later.
  • 22. Findings: All participants were able to complete all tasks; however there. The most challenging task for users was the first task, which asked them to use the tracker feature to see how close their driver was. Overall, most issues users had were caused by information hierachy. Recommendations: 1. Move Track Driver feature to the pick-up details screen. 2. Simplify the schedule donation button by removing the vector image. 3. Reorganize the information hierarchy of the donation page. 4. Increase font size of ETA message on the tracker map. 5. Change the title “Contact Information” on the pick-up details page to something more descriptive. After updating my wireframes to incorporate the recommendations, I moved on to visual design. Up until this point, my prototype lacked a color scheme, typography, and a brand identity. I looked for inspiration for the mobile app on Pinterest.
  • 23. Visual Design: Next, I started brainstorming logos. Coming up with brand adjectives helped me narrow my vision. I sketched ideas first, and then created digital versions of my favorites.
  • 24. The logos were added to the Style Guide and UI Kit, a comprehensive collection of all site components and UI patterns. Both documents are constantly changing as the website and brand grow.
  • 25. Finally, I applied the branding from the style tile to the mid-fidelity wireframes, the result of which was a set of high-fidelity wireframes.
  • 28. The Differences between Graphic Design and UX Design User-focused vs pixel-focused Graphic designers tend to pursue pixel perfection in their designs. Ensuring that texts have perfect kerning and colors conform to brand guidelines often take up a significant portion of graphic designers’ jobs—and for good reason, too. UX designers, however, are primarily focused on users. They study the interface between users and the product, finding ways to ensure that the product answers to the user’s key needs. And they do so by conducting a lot of research—by talking to and observing users, creating user personas and stories, doing usability testing on the products, and many more. Graphic designers looking to switch career tracks will need to do a substantial amount of work finding out how to conduct user research (more about this a bit later on in the article). Iterative problem solving UX design is very much an iterative problem solving process, and it can be very different from what you’re used to doing as a graphic designer. It begins with the identification of a problem; this is often found through user research, and if it’s not, it will then be confirmed through user research. There is no point in solving problems that users don’t care about; they won’t pay to solve those problems, and that means your company won’t make money. From the problem identification stage, more research is conducted into how best to solve the problem in a way that the user will be happy with—usually via observations, surveys, ethnographic studies, etc. This research then informs the product’s design. Designs are then tested with users to see if the research led to the right solutions. The designs are constantly iterated until research confirms that they are good enough. Once this happens the product is launched, but the design process is not over. The design will be continually tested and user feedback will be taken, thus beginning a new round of user research. Future improvements to the design will be made based on this feedback. Multi-disciplinary vs specialized Graphic design is a specialized discipline, and there is a certain level of craftsmanship and set of specialized skills (such as typography and color theory) required to produce great visuals. UX design, on the other hand, is much more multi-disciplinary and involves many schools of knowledge. UX designers have to constantly learn about human psychology, interaction design, information architecture and user research techniques, just to name a few, in order to create the right solutions to a user’s problems. Don Norman, the man who coined the term “User Experience”, explains that user experience covers “all aspects of the person's experience with the system including industrial design graphics, the interface, the physical interaction and the manual.”
  • 30. The Grid System: Building a Solid Design Layout The grid system helps align page elements based on sequenced columns and rows. We use this column-based structure to place text, images, and functions in a consistent way throughout the design. Every element has its place that we can see instantly and reproduce elsewhere. Consider the grids we find in maps. Islands, towns, lakes will appear on an exact part of a map, on a set of North- South/East-West coordinates. They will always appear in the same place on other maps. The grid system was first used to arrange handwriting on paper and then in publishing to organize the layout of printed pages. Given that the printed page and the virtual page have much in common,it should come as no surprise that we also use it in web and app design. Creating a grid system for the virtual page is a little more complex than for the physical page – browsers handle information differently, and screens vary in size.Happily, however, the principle remains the same.The best layout is one which provides no distraction from the content. Thanks to its mathematical precision, the grid system is a great example of this kind of layout.
  • 31. Maslow's Hierarchy of Needs User needs are no different from our general needs. For each of the levels of Maslow's hierarchy, we can recognize these needs in the drives displayed by users. Advertising represents one of the clearest examples of Maslow's hierarchy of needs influencing design. It would be quicker to name products that are not advertised using models (male and/or female) to tap into the physiological need for the sex. Such is the power of harnessing the drive presented by human need, even where there is no genuine link between a product and one of the basic physiological needs, that it does not stop advertisers from playing (or should that be preying?) on one or more of them so as to grab our attention and get us to part with our money. Take Richard Branson's failed attempt to get a piece of the soft drink market, with Virgin Cola, which had a bottle design apparently modelled on Pamela Anderson's figure. Human needs should also be considered when you are trying to highlight the positive aspects of your products. For example, if you are selling drinks, images and text which draw attention to or accentuate the thirst-quenching nature of the product can improve its appeal. Likewise, a package holiday deal can seem a lot more attractive if you show people enjoying a meal and a few drinks (i.e. two physiological needs). Regardless of the product you are working on, it will be for some human need, whether it is to satisfy a physiological, safety, love/belonging, esteem, or a self-actualization need; if there is no need, then you should probably look at starting another project.
  • 32. Conclusion:- Since I was coming into UX Design from a completely unrelated area, I wanted to educate myself about the field. I wanted to know what a graphic design is about and know about latest trends. I signed up for various design newsletters and also subscribed for courses on interaction-design.org . I followed popular UX publications on Medium. While doing some reading on design, I came to know I needed high quality way for theoretical and practical knowledge of this field. So I joined UIUX Studio company to gain practical knowledge on how to handle projects and learn more about UIUX Experience. I did the project on food app under supervision of the manager of the company which helped me in increasing my knowledge to good amount about this field. References- https://www.interaction-design.org/courses?r=bhawna-1