Metsetwhoo - UX & UI (Level 2) Pathway

Week 1

THINGS LEARNT:

  1. Technical Area:

    • Introduction to the concept of qualitative research and various other UX design techniques.
    • An insight into Bioinformatics as a multidisciplinary field along with the project goals of STEM-Away’s Bioinformatics Pathway.
    • Introduction to RStudio and RShiny.
    • The practise of secondary research (it was my first time doing it).
  2. Tools:

    • As a team, we illustrate all our ideas on Miro.
    • We used LucidChart to create the Stakeholder Map.
    • Before creating the final presentation slides on Google Slides, we used Notion to organise and structure the (disarrayed) collected information.
    • Almost all communication and team meetings happened on Discord.
  3. Soft Skills:

    • Working together in a team.
    • Communicating ideas to a group.
    • Collective brainstorming and building up on ideas.
    • Planning the course of the project and setting deadlines and goals.

ACHIEVEMENTS:

  1. Understanding the importance of Secondary Research: When I first heard of Secondary Research, I was practically clueless about its why and how. After going through various blogs and guides, I was finally able to grasp and appreciate it. It provided me with useful insights into the Bioinformatics Pathway.
  2. Communicating with my team: I knew no one on my team initially. After the first meeting, I was acquainted with the talented and diverse team I am going to be working with.
  3. Presenting the work done by the team (Team 3) over the past week to the heads!

GOALS FOR WEEK 2:

  1. Reaching out to the shortlisted people from the Bioinformatics Pathway and conducting interviews as a process of generative research.
  2. Understanding and updating the core stakeholders of the product. Comparing them to the stakeholders enlisted during the secondary research phase.
  3. Creating an affinity diagram to organise and consolidate the inputs obtained from interviews and brainstorming sessions about the product.
  4. Creating personas and scenarios that represent the needs and frustrations of the group.
  5. Coming up with design techniques that can potentially cater to the user goals and resolve frustrations.

TASKS DONE (AND HURDLES FACED):

  1. Group meetings: Since I live in a totally different timezone than most of the members on my team, attending meetings late at night posed a slight inconvenience for the first few days. Even now, figuring out an appropriate time that suits everyone in the group becomes a bit difficult sometimes. Communication on Discord has greatly helped us though.
  2. Creating a Miro Board, a LucidChart, a Discord Server and a Notion Doc for the team.
  3. Understanding secondary research: As mentioned before, I initially had a hard time understanding its importance in the UX design process. I then went through some reading material to educate myself.
  4. Enlisting people who would be interviewed in week 2. My team members did an excellent job at shortlisting and contacting people from the Bioinformatics Pathway.
  5. Analysing the stakeholders and creating the stakeholder map: This was the hardest part for me. Given that we had little information about the Bioinformatics project and its goals, coming up with potential stakeholders was a non-intuitive process (for me). In the end, some brainstorming and online resources helped a lot.
  6. Curating interview questions for week 2. I had a fun time coming up with interview questions with my team.
  7. Putting the research into slides and presenting it.
1 Like

Week 2

THINGS LEARNT:

  1. Technical Area:

    • Introduction to UI/UX primary research methods.
    • Understanding the intricacies of the Bioinformatics Pathway Project.
    • The practice of creating affinity maps
    • Conducting semi-structured interviews for generative user research.
  2. Tools:

    • I used STEM-Away to reach out to and communicate with the people from the Bioinformatics Pathway to set up an interview.
    • The interview itself was conducted on Zoom.
    • As a team, we used Miro to create the affinity map.
    • We used LucidChart to create the Stakeholder Map.
    • We also used when2meet to decide our meeting schedule.
    • Before creating the final presentation slides on Google Slides, we used Notion to organise and structure the (disarrayed) collected information.
    • Almost all communication and team meetings happened on Discord.
  3. Soft Skills:

    • Teamwork and collaboration.
    • Conducting interviews
    • Networking
    • Planning the course of the project and setting deadlines and goals.
    • Time management.

ACHIEVEMENTS:

  1. Curating open-ended interview questions for week 2 with the team. The questions were fashioned to be suitable for semi-structured interviews.
  2. Conducting Ananya Kaushik’s(participant, Bioinformatics Pathway) interview for user research.
  3. Grasping the essence of the work being done at the Bioinformatics Pathway.
  4. Collaborating with the team to create the affinity map.
  5. Presenting the work done by the team over the past week to the heads.

GOALS FOR WEEK 3:

  1. Understanding the requirements of the stakeholders through the collected interview data.
  2. Creating personas and journey maps for two core stakeholders.

TASKS DONE (AND HURDLES FACED):

  1. Group meetings: People in my group belong to four different timezones. So, figuring out an appropriate time that suits everyone in the group was very difficult. After a flurry of texts, polls and when2meets, we finally decided on a schedule for the week.
  2. Preparing open-ended questions suitable for semi-structured interviews.
  3. Meeting people from the Bioinformatics Pathway and conducting the interview: The biggest hurdle was. dealing with timezone differences. Also, choosing a suitable platform to conduct the interview required some thought.
  4. Taking concise notes from the interview to share with the team.
  5. Creating an Affinity Map using Miro from the interview data collected: The main challenge was to organize the interview responses into categories since they vary depending on the interviewees.
  6. Putting the research into slides and presenting it.

Week 3

THINGS LEARNT:

  1. Technical Area:

    • Creating custom templates on Figma for Personas and User Journey.
    • Understanding the user requirements of the Bioinformatics Pathway project.
    • Looking for suitable Figma Plugins.
  2. Tools:

    • We used Figma to create the personas and the journey maps.
    • As a team, we used Miro to put our ideas together.
    • We used https://generated.photos for AI Generated photos to use in our personas.
    • All communication and team meetings happened on Discord.
  3. Soft Skills:

    • Teamwork and collaboration.
    • Imagining users’ journey, scenarios and personas.
    • Planning the course of the project and setting deadlines and goals.
    • Time management.

ACHIEVEMENTS:

  1. Recognising users’ requirements and creating personas.
  2. Understanding Journey Maps.
  3. Creating Scenarios and thus planning out the user journey.
  4. Grasping the essence of the work being done at the Bioinformatics Pathway.
  5. Collaborating with the team to create the personas and journey maps.

GOALS FOR WEEK 4:

  1. Creating a Storyboard for each persona.
  2. Creating a UX Flowchart for the design solution.

TASKS DONE (AND HURDLES FACED):

  1. Group meetings: People in my group belong to four different timezones. So, figuring out an appropriate time that suits everyone in the group was very difficult. After a flurry of texts, polls and when2meets, we finally decided on a schedule for the week.
  2. Creating templates for personas and journey maps.
  3. Identifying the core stakeholders and coming up with their needs and requirements, goals and frustrations.
  4. Planning their journey and creating their journey maps: initially, we had some trouble figuring out the way to create one since there were many templates to choose from.

Week 4

THINGS LEARNT:

  1. Technical Area:

    • Creating storyboards on various convenient online tools like storyboardthat.com.
    • Creating the UX flowchart on LucidChart.
    • Notion and Miro for collecting all the relevant study material.
  2. Tools:

    • We looked for several online storyboarding tools and decided on Storyboardthat.com.
    • Creating a UX Flowchart was convenient on Miro as well as LucidChart, but we used LucidChart for the final flowchart.
    • As a team, we used Miro to put our ideas together and Notion to track our progress.
    • All communication and team meetings happened on Discord.
  3. Soft Skills:

    • Teamwork and collaboration.
    • Imagining a compelling storyboard for our personas in a way that brings out their usability goal and how our product and its features come through.
    • Forging ideas to define the interface and interactions of the app.
    • Planning the course of the project and setting deadlines and goals.
    • Time management.

ACHIEVEMENTS:

  1. Creating an extensive storyboard for the personas to bring out their usability goal and how our product and its features come through.
  2. Looking into narrow-and-deep and wide-and-shallow flowcharts and deciding what works best for us.
  3. Ideating the app’s UI/UX, bringing unique ideas to a meeting and using them to create the most suitable one.
  4. Keeping the storyboard in mind while creating the flowchart.
  5. Collaborating with the team to create the deliverables.

GOALS FOR WEEK 5:

  1. Creating a Low-Fidelity Prototype for the app.
  2. Creating Wireframes based on the Low-Fidelity Prototype.

TASKS DONE (AND HURDLES FACED):

  1. Group meetings: People in my group belong to four different timezones. So, figuring out an appropriate time that suits everyone in the group was very difficult. After a flurry of texts, polls and when2meets, we finally decided on a schedule for the week.
  2. Creating a storyboard: Most of us weren’t good at sketching and drawing, so we had to look for a storyboarding tool convenient for everyone to use.
  3. Creating a UX Flowchart: We had to look for sample design templates that looked easy to use and aesthetically pleasing, draw inspiration from them and mould them into the user requirements of our app.

Week 5

THINGS LEARNT:

  1. Technical Area:

    • Creating a low-fidelity prototype on Excalidraw.
    • Creating the Wireframes on Figma.
    • Notion and Miro for collecting all the relevant study material.
  2. Tools:

    • We used Excalidraw for lo-fi prototyping instead of the traditional paper and pen since sharing and collaborating was easier that way.
    • We used Figma for wireframing.
    • As a team, we used Miro to put our ideas together and Notion to track our progress.
    • All communication and team meetings happened on Discord.
  3. Soft Skills:

    • Teamwork and collaboration.
    • Focussing on the pros and cons of the traditional pen-paper method and using excalidraw for lo-fi prototyping.
    • Looking for inspirations to define the user interface.
    • Working with and exploring new tools and technologies.
    • Researching design ideas.
    • Planning the course of the project and setting deadlines and goals.
    • Time management.

ACHIEVEMENTS:

  1. Expressing an individual’s idea of how the interface would look and work virtually.
  2. Everyone designed their version of a low-fidelity sketch and created the wireframes together.
  3. Designing different versions of the low-fidelity prototype.
  4. Creating wireframes on Figma.

GOALS FOR WEEK 6:

  1. Sending out the prototype for user-testing and documenting the feedback.
  2. Refining the wireframes based on feedback obtained after user-testing since designing is an iterative process.
  3. Adding interactions for the Figma prototypes

TASKS DONE (AND HURDLES FACED):

  1. Group meetings: People in my group belong to four different time zones. So, figuring out an appropriate time that suits everyone in the group was very difficult. After a flurry of texts, polls and when2meets, we finally decided on a schedule for the week.
  2. Designing different versions of low-fidelity prototypes: Drawing using pen-paper makes collaboration difficult, but excalidraw is very buggy and doesn’t save your work. If you open a new link, it replaces your previous work, so we had to be mindful of that.
  3. Creating a mockup of the app on Figma, i.e. Wireframes: Many of us were unfamiliar with Figma, so it took them some time to get used to it.

Week 6

THINGS LEARNT:

  1. Technical Area:

    • Using Figma to refine the prototype from last week.
    • Getting a deeper insight into how the RShiny app should actually function.
    • Notion and Miro for collecting all the relevant study material.
  2. Tools:

    • We used Figma for refining the wireframes.
    • I personally looked up and studied web-app templates on Behance and Dribble to modify the designs.
    • We used STEM-Away to reach out to the Bioinformatics team and ask their feedback on our new design.
    • As a team, we used Miro to put our ideas together and Notion to track our progress.
    • All communication and team meetings happened on Discord.
  3. Soft Skills:

    • Teamwork and collaboration.
    • Appreciating aesthetics, accessibility, usability and visibility in designs.
    • Exploring Figma and its multitudinous plugins.
    • Researching design ideas.
    • Planning the course of the project and setting deadlines and goals.
    • Time management.

ACHIEVEMENTS:

  1. We revamped the design from the previous week to something more sleek, modern and aesthetically pleasing. I took the lead in researching design ideas and best practices. I also designed most of the. screens on Figma.
  2. Inculcated all features required of the app to the mockup and took care of the persona’s requirements.
  3. We Constantly updated the prototype based on user-testing feedback.

GOALS FOR WEEK 7:

  1. Refining the interactive prototypes into high-fidelity interactive mockups
  2. Creating a draft presentation slide deck that introduces the pathway, design problem, research findings, design process, and the final product to support our design decisions

TASKS DONE (AND HURDLES FACED):

  1. Group meetings: People in my group belong to four different time zones. So, figuring out an appropriate time that suits everyone in the group was very difficult. After a flurry of texts, polls and when2meets, we finally decided on a schedule for the week.
  2. Revamping and updating the prototype: I looked for designs over the week and decided to update the prototype to make it more accessible, consistent, and overall aesthetically pleasing without compromising its functionality.
  3. Getting user feedback: We contacted the Bioinformatics team over Discord and STEM-Away, but we couldn’t receive their responses on time. We had to resort to asking other people for their feedback.

Week 7

THINGS LEARNT:

  1. Technical Area:

    • Inculcating user feedback into the design. Design, test and redesign.
    • Using Figma’s Flows to simulate interactions.
    • Notion and Miro for collecting all the relevant study material.
  2. Tools:

    • We used Figma for creating the high-fidelity prototypes.
    • We used Flows on Figma to create interactions and get an idea about the working of the app based on our UX Flowchart.
    • We used Canva to create the presentation. I also designed the app’s logo on Canva.
    • We used a Kanban Board to make the prototyping process streamlined and organised.
    • As a team, we used Miro to put our ideas together and Notion to track our progress.
    • All communication and team meetings happened on Discord.
  3. Soft Skills:

    • Teamwork and collaboration
    • Compartmentalization and division of work.
    • Appreciating design as an iterative process.
    • Empathizing with users of all backgrounds.
    • Planning the course of the project and setting deadlines and goals.
    • Time management.

ACHIEVEMENTS:

  1. We successfully divided the work among us for making the process quicker. One group of people worked on the presentation; the other worked on the prototype.
  2. I took the lead in creating the high-fidelity prototype. I proposed the colour scheme, the typography and also designed the logos for the app on Canva.
  3. I proposed using a Kanban board on Notion to keep track of the edits and modifications to be done or been done on the prototype.
  4. I added interactions to the prototype and edited the screens to improve the app flow.
  5. The other team carefully compiled the resources from the previous week into a draft presentation.

GOALS FOR WEEK 8:

  1. Some more user feedback, more design, redesign and repeat
  2. The final presentation!

TASKS DONE (AND HURDLES FACED):

  1. Group meetings: People in my group belong to four different time zones. So, figuring out an appropriate time that suits everyone in the group was very difficult. After a flurry of texts, polls and when2meets, we finally decided on a schedule for the week.
  2. Division of work: Many of us were busy that week and decided to split the work among two groups to work more efficiently. It was hectic, but compartmentalization did help!
  3. Creating the high-fidelity prototype: I edited the flow of our prototype because it wasn’t step-wise before. We also increased feedback received by the user from the app, as suggested in last week’s meeting. Editing the prototype again was a bit exhausting, and I had to redo a few screens.
  4. Creating a flow; adding interactions to the prototype: I added all the interactions since my teammate was busy preparing for an important exam. She created the remaining screens, and I created an exhaustive flow. It was a bit difficult working with a prototype as big as this since the entire board became jumbled very soon.
  5. I wanted to add a little flair to the app by creating a brand identity. I named the app and made its logo on Canva.
  6. Creating a presentation showcasing the UX portfolio.

Week 8

THINGS LEARNT:

  1. Technical Area:

    • Explored Figma some more and perfected the interactions.
    • Notion and Miro for collecting all the relevant study material.
  2. Tools:

    • Used Figma for further improving the high-fidelity prototype.
    • Used Canva to add more content to the presentation.
    • Used a Kanban Board to make the prototyping process streamlined and organised.
    • As a team, we used Miro to put our ideas together and Notion to track our progress.
    • All communication and team meetings happened on Discord.
  3. Soft Skills:

    • Teamwork and collaboration.
    • Inculcating and appreciating feedback.
    • Appreciating design as an iterative process.
    • Working on improving the previous version.

ACHIEVEMENTS:

  1. I edited and worked on the prototype a bit more- fixing font weights, sizes, adding labels etc.
  2. I appreciated my decision to use a Kanban Board to document the prototyping process.
  3. We readily distributed the presentation among us. I presented the final high-fidelity prototype and personas to the mentors.

GOALS FOR WEEK 9:

     NA

TASKS DONE (AND HURDLES FACED):

  1. Edited the prototype and the presentation.
  2. Presented the final design portfolio to the mentors!

PS- The final high-fidelity prototype can be found on this link here: http://tiny.cc/team3-demo