Miksbhatnagar - UX & UI Pathway

Self-Assessment #1 June 16, 2020

Things Learned:
-Technical Area - As for the technical aspect as a whole, I was able to learn about what UX Design is, I was able to learn what factors are a part of User Experience; UX requires design, research, and strategy. Specifically, I was able to learn about how to research and gain user data through interviews, to better design a website; this is because the User Interface should fulfill and satisfy the needs of the user. I was able to learn about low fidelity prototyping as well as how to do it through wireframing.
-Tools - I learned how to use the Mural website in order to do group ideation, for example, group wireframing was great for brainstorming and collaborating with others to come up with a consensus for the group. I also learned how to use Balsamiq, which was awesome for wireframing websites, I was able to design a website on there and gain a visual and interactive idea of what I envision the STEM-Away website to look like. I was also able to contribute my ideas to the team as I had a visual representation in front of me.
-Soft Skills - I was able to learn about design in general, whether it be through a simple sketch on paper of what a website would look like, or wireframing to see the layout in a much more clean and organized way. I learned how to perform interviews that allow the interviewee to be comfortable in an environment, as well as get the most out of an interview through certain tasks, card sorting, contextual inquiry, and observations. I was able to draw empathy maps, so a skill I picked up from this was how to understand the perspective of the user. How to make generic as well as specific attributes to personas were also a soft skill that I picked up.

3 Achievement Highlights:
-learned how to conduct proper interviews to gain user data
-learned how to dram empathy maps and personas based on interviews and understand the different perspectives of the user, as that is important in designing the website
-was able to do wireframing, specifically on Balsamiq, which gave me a rough visual idea of the STEM-Away website, and helped me contribute to the group discussions

List of Meetings/Trainings Attended including social team events:
-attended all meeting
-caught up with the group when I missed the second meeting
-attended an extra meeting for discussing wireframing

Goals for the upcoming week:
-design the website in a neat and organized way
-make sure to utilize all the skills I learned
-work as a team to achieve the final product
-do all the assignments/tasks needed

Detailed Statements of Tasks Done:
-Drawing a layout of the website was a task I completed. I drew what I thought the layout should look like for the home page of the STEM-Away website. This included different sections for different types of users as well as general information. I did not want to make the home page too crowded or messy.
-Empathy maps are a task I completed. I created these based on my User research from interviews. These personas included all types of viewers of the STEM-Away website as well as what they would be thinking when seeing this website
-Personas are a task we completed as a team. My team and I created two valid personas on a slides presentation and a document. These personas were based on our interviews, they each had generic and specific attributes. They both also covered two different types of viewers of the STEM-Away website.
-Wireframing is a task I completed. I used Balsamiq to do this. I was able to wireframe all the pages I wanted to include if I were to create the STEM-Away website. I was able to create a functioning prototype and I gained great ideas from this visual representation of the STEM-Away website.
-Group wireframing is also a task we completed as a team on the mural website. We were able to collaborate in order to come up with an idea of how we wanted to organize the STEM-Away website. We combined all our ideas and discussed these ideas as well to do so.

Self Assessment #2- July 2, 2020

Things Learned:
-Technical Area - As for the technical aspect, I am able to sort of learn how to translate low-fidelity to high-fidelity prototyping. I have learned how to apply this technical aspect to our STEM-AWAY redesign. This is because I am able to transition the design that we created on Balsamiq for wireframing, to the Figma Design. I am also learning that this technical skill is good to have, as it is much easier to do a website or high-fidelity design after you have finished wireframing or low-fidelity design.
-Tools - I learned how to further use Mural and Balsamiq. I have expanded my expertise in Mural as I have learned to ideate and collaborate with this tool such that the group comes to a consensus. For example, we were thinking about subsection titles for our website and were able to do that effectively with the Mural tool. As for Balsamiq, I was able to learn how to use this tool and translate it to Figma. Which brings me to my next tool, Figma. Figma is a very cool website for designing screens. So far, I have finished creating a rough draft of the high-fidelity design of the Home Page.
-Soft Skills - In general, I have improved in design. In that, I am able to do low-fidelity and high-fidelity design. As I have used different tools, Balsamiq and Figma, to create prototypes of the Website. I will be able to apply these design skills whenever I have to create something, like an app, or website!

3 Achievement Highlights:
-learned how to create Balsamiq Design, wireframing, use these to improve the website design
-learned how to translate Balsamiq Designs to Figma Designs, in general, I was able to experiment with Figma
-was able to understand how to perform low-fidelity and high-fidelity design, and what exactly these design types are

List of Meetings/Trainings Attended including social team events:
-attended all meetings except 2 meetings (personal reasons), caught up separately
-attended a meeting with another team

Goals for the upcoming week:
-design the high-fidelity website in a concise and clean manner
-use Balsamiq to redesign
-make the website pages interesting
-add actual information to the high-fidelity design

Detailed Statements of Tasks Done:
-Balsamiq wireframing is done. Used these designs to communicate to others about how our design functions and gained advice.
-The mural ideation process is completed. We have done multiple Mural sessions where we brainstorm categories for the website. That is now completed.
-Helped create a survey to send out to the others. Gained advice from others about how they think are Balsamiq design is. As well as if they think the layout is complicated/what to change on the website redesign (low-fidelity design).
-Completed the rough home page high-fidelity STEM-AWAY design on Figma. Used Figma to create the layout of the website, add actual information, add buttons, and different features. I also wanted to keep the home page simple, so I made sure to do that.

Final Self Assessment:

Things Learned:

-Technical Area: This was a great experience, as I especially got hands-on technical experience. I was able to learn about what UX Design is, I was able to learn what factors are a part of User Experience; UX requires design, research, and strategy. Specifically, I was able to learn about how to research and gain user data through interviews, to better design a website; this is because the User Interface should fulfill and satisfy the needs of the user. I was able to learn about low fidelity prototyping as well as how to do it through wireframing. In addition, I am able to sort of learn how to translate low-fidelity to high-fidelity prototyping. I have learned how to apply this technical aspect to our STEM-AWAY redesign. This is because I am able to transition the design that we created on Balsamiq for wireframing, to the Figma Design. I am also learning that this technical skill is good to have, as it is much easier to do a website or high-fidelity design after you have finished wireframing or low-fidelity design.

-Tools: I learned how to use the Mural website in order to do group ideation, for example, group wireframing was great for brainstorming and collaborating with others to come up with a consensus for the group. I also learned how to use Balsamiq, which was awesome for wireframing websites, I was able to design a website on there and gain a visual and interactive idea of what I envision the STEM-Away website to look like. I was also able to contribute my ideas to the team as I had a visual representation in front of me. I learned how to further use Mural and Balsamiq. I have expanded my expertise in Mural as I have learned to ideate and collaborate with this tool such that the group comes to a consensus. For example, we were thinking about subsection titles for our website and were able to do that effectively with the Mural tool. As for Balsamiq, I was able to learn how to use this tool and translate it to Figma. Which brings me to my next tool, Figma. Figma is a very cool website for designing screens. So far, I have finished creating a rough draft of the high-fidelity design of the Home Page.

-Soft Skills: I was able to learn about design in general, whether it be through a simple sketch on paper of what a website would look like, or wireframing to see the layout in a much more clean and organized way. I learned how to perform interviews that allow the interviewee to be comfortable in an environment, as well as get the most out of an interview through certain tasks, card sorting, contextual inquiry, and observations. I was able to draw empathy maps, so a skill I picked up from this was how to understand the perspective of the user. How to make generic as well as specific attributes to personas were also a soft skill that I picked up. In general, I have improved in design. In that, I am able to do low-fidelity and high-fidelity design. As I have used different tools, Balsamiq and Figma, to create prototypes of the Website. I will be able to apply these design skills whenever I have to create something, like an app, or website!

3 Achievement Highlights:

-learned how to conduct proper interviews to gain user data as well as draw empathy maps and personas based on interviews and understand the different perspectives of the user, as that is important in designing the website

-was able to do wireframing, specifically on Balsamiq, which gave me a rough visual idea of the STEM-Away website, and helped me contribute to the group discussions; learned how to create Balsamiq Design, wireframing, use these to improve the website design

-learned how to translate Balsamiq Designs to Figma Designs, in general, I was able to experiment with Figma; essentially, I was able to understand how to perform low-fidelity and high-fidelity design, and what exactly these design types are

List of Meetings/Trainings Attended including social team events:

-attended all meetings

-caught up with the group when I missed two meetings (personal reasons)

-attended meetings when the group was split

-attended a meeting with another team

Goals for the upcoming week:

-design the high-fidelity website in a concise and clean manner

-use Balsamiq as a reference

-make the website pages interesting

-add actual information to the high-fidelity design

-get ready to make a presentation

Detailed Statements of Tasks Done:

-Drawing a layout of the website was a task I completed. I drew what I thought the layout should look like for the home page of the STEM-Away website. This included different sections for different types of users as well as general information. I did not want to make the home page too crowded or messy.

-Empathy maps are a task I completed. I created these based on my User research from interviews. These personas included all types of viewers of the STEM-Away website as well as what they would be thinking when seeing this website

-Personas are a task we completed as a team. My team and I created two valid personas on a slides presentation and a document. These personas were based on our interviews, they each had generic and specific attributes. They both also covered two different types of viewers of the STEM-Away website.

-Wireframing is a task I completed. I used Balsamiq to do this. I was able to wireframe all the pages I wanted to include if I were to create the STEM-Away website. I was able to create a functioning prototype and I gained great ideas from this visual representation of the STEM-Away website.

-Group wireframing is also a task we completed as a team on the mural website. We were able to collaborate in order to come up with an idea of how we wanted to organize the STEM-Away website. We combined all our ideas and discussed these ideas as well to do so.

-Balsamiq wireframing is done. Used these designs to communicate to others about how our design functions and gained advice.

-The mural ideation process is completed. We have done multiple Mural sessions where we brainstorm categories for the website. That is now completed.

-Helped create a survey to send out to the others. Gained advice from others about how they think are Balsamiq design is. As well as if they think the layout is complicated/what to change on the website redesign (low-fidelity design).

-Completed the rough home page high-fidelity STEM-AWAY design on Figma. Used Figma to create the layout of the website, add actual information, add buttons, and different features. I also wanted to keep the home page simple, so I made sure to do that.