Phase 5: Reflect and Communicate
Team 16: Amrita Khoshoo, Diana Minji Chun, Hannah Koenig, Shambhavi Deshpande
This post chronicles our team’s progress as it happens for the fifth and final phase of our Interaction Design Studio 2 Project, taught by Peter Scupelli in Carnegie Mellon University’s School of Design. You can find the full process publication here.
4/15: Presentation Reflections and Planning the Final Phase
Presentation 4 Debrief
On Wednesday, we used our class time to check in with Peter and regroup after the Phase 4 Presentations on Monday. After a quick discussion as a class about final formats, Peter came to our breakout room in Zoom to discuss the presentations. On the agenda for our checkin was our business model and value flow, the final format of the deliverables, and the story we tell about Mosaic.
Given Index’s focus on viability, it was good that we included information about our business model and value flow diagram in our presentation. We should focus on including companies, and also rethink the role of government in our concept. We decided that we should distinguish the business model from the value flow diagram, and be clearer about what our starting point would be compared to our endgame. As for the final presentation, we should focus on telling the story of Mosaic and why we need soft skills. Peter encouraged us to tell the story of how people use Mosaic in their lives, as well as the detailed interactions included in the Mosaic experience.
Next Steps and Phase 5 Project Plan
After discussing the feedback we got on the presentation, we made a list of next steps together. We decided to prioritize building out a prototype of Mosaic before turning back to the question of business model and viability. Before getting to wireframing and brand identity, we agreed we needed to come to consensus on a definition of soft skills, and do a competitive analysis of existing online learning platforms to understand their services better. We took a first stab at mapping out the tasks in a calendar for Phase 5, set our next meeting time, and called it a day.
4/16: Competitive Analysis
We Zoomgathered on Thursday to show and tell the results of our competitive analysis of online learning platforms. The questions we researched included:
- How are they defining soft skills (if at all)?
- Strengths and weaknesses
- How the platform is positioned in the market / brand voice
- User experience (UX/UI)
- Length of courses / types of courses offered
- Style of teaching — online? Virtual person?
With individual research in hand, Diana led us through a few rounds of screen sharing to discuss our findings. Some platforms, like Coursera and EdX, were more relevant to our topic of soft skills than others, but looking at a wide range of platforms helped us to identify various branding strategies and ways of describing Mosaic. One key factor we identified was legitimacy. Coursera and EdX provide courses from accredited higher education institutions, which gives their certificates more credibility. Masterclass takes a different approach, in that they offer content from famous experts as a way to provide legitimacy. Platforms like Udemy, which allow for anyone to put their content online and get paid by student volume, seemed more casual and less expensive, but also caused us to wonder about credibility.
We agreed that motivation of use was also important to consider, as some platforms are used as ways to earn credentials, while others might be more suited for people whose biggest credential is a portfolio, where they show the skills they have. We agreed to consider accessibility in terms of the cost of Mosaic, and wondered if having expert content might mean that it was pricier to access. We also noticed an opportunity area. While some platforms have options for both individuals and teams/enterprise, we didn’t find one that focused exclusively on soft skills and gave people the ability to learn in groups. Codeacademy was a good example of a platform with focused content (in this case, the hard skill of coding) that allowed for multiple tiers of individual learners (basic vs pro) and in teams. This could be a model for us to consider. Finally, some specific soft skills platforms like Colorado State’s Soft Skills Training had the content focus we are thinking about, as well as opportunities to improve on user experience. At the end of our show and tell, we agreed that next steps for us needed to be a definition of soft skills and a target audience for Mosaic.
4/17: Defining Soft Skills
We met briefly on Friday to hash out a definition of soft skills for Mosaic. We started by collecting all of the definitions we found over the course of the semester and putting them in one place to refer to. The articles that Sofia and Hajira shared with us earlier in Phase 4 really helped us to move forward with this step. We also found definitions from a range of online sources, including Masterclass.
Next, we each took a stab at drafting our own definition, in our own words. It was tricky to tease out what a soft skill was, versus describe why they matter and contextualize them within Mosaic’s platform. Last, we used each other’s ingredients to start drafting a cohesive definition and position it as though on an About Mosaic page. We ended our meeting with a working draft and agreed to review it with fresh eyes the next day.
4/18: Determining our Deliverables
We Zoomed in on Saturday for another brief meeting to finalize our soft skills definition and decide how we wanted to communicate about Mosaic in addition to the final presentation. Diana facilitated a synthesis and planning-focused session that helped us to turn the corner from conceptual framework to production mode. Here is where we landed on soft skills, recognizing that we aren’t experts and there is ongoing debate in the literature.
What are Soft Skills?
There are many ways of defining and categorizing soft skills. Experts agree that soft skills speak to someone’s ability to work well with others, navigate their social environment, and achieve their goals. Soft skills include communication, conflict management, critical thinking, and creative problem-solving. Soft skills are distinct from hard skills, or domain-specific, technical knowledge.
Why soft skills? Being Human is the New Differentiator.
Here at Mosaic, we believe that soft skills are what make us human, and they are critical to a resilient workforce today and in the future. That’s why we built a platform to help individuals and teams achieve their goals and better advocate for themselves and each other through the power of soft skills.
Next, we had a discussion around different formats for Mosaic’s final deliverables. We started by asking ourselves what we wanted to communicate, and came up with a list that included scenarios of use, detailed interactions, an emotional storyline, and an answer to the so what question. With this in mind, we decided to begin working on a short video to tell the story of how Mosaic can improve life, per the brief. We also agreed to try our hands at making a microsite to introduce our solution and communicate the details of the platform, including mockups and more detailed interactions. We decided to frame our presentation as a pitch that would also show the back-end details of the platform, such as our process and research insights, our theory of change, and our business model.
After a conversation about who was interested in taking on which roles (wireframes, interaction, video storyboards and script, illustrations, brand identity, etc), we nailed down the three scenarios we wanted to show in the final video. We went with:
- Workplace Team: A team of librarians who work together and use the conflict management modules to help them navigate a transition to remote work.
- Volunteer Team: A group of friends who are forming an animal rescue volunteer organization together and use the new team and collaboration modules to establish their team dynamics.
- Individual Worker: An independent contractor who works for a company that delivers online grocery orders and uses the workplace rights and communication modules to gain knowledge about his rights and better advocate for himself.
As a final step, we agreed to explore Mosaic’s brand identity by each creating a visual mood board of references and inspiration to discuss at our next meeting. With that, Week 1 of Phase 5 was a wrap!
4/20 User Journeys, Brand Identity, Low-Fi Wireframes
We checked in and shared our juggling of the intense workload from all of our other coursework, and dived into our agenda today of scripting user journey maps, and kicking off the brand identity design.
Video Storyboard and User Journeys
Amrita walked us through the first draft of the storyboard of our concept video, which would portray the stories of our three personas. These stories were based on our initial ideas for their user journeys, which we planned to develop further the next day.
Here are a few screenshots of the initial video storyboard:
Brand Identity Moodboards!
Over the weekend, each of us had individually created moodboards of our own ideas for the brand identity of Mosaic. First, we discussed each of those moodboards and pulled out color swatches from them.
Further, we thoughts of various decision-making factors for designing the brand identity, and created a sort of slider menu of pointers for which kind of shapes should we utilize (geometric vs organic), or which kind of illustrations should we make (flat vs dimensional), and so on.
4/21 User Journey Diagram + Wireframe List
We met for a work session with the objective of mapping the user journeys that we had scripted the earlier day. We collaboratively mapped and organized the small steps in the user journey into a sequence.
We drew inspiration from these user journey examples:
Slides from research methods class (slides 34–39)
We utilized a service design framework: “5 E’s of Customer Journey — Entice, Enter, Engage, Exit, Extend by Isaac Jeffries”, and collaboratively worked on Mural to design the user journey maps.
Mural link: 4/21 User Journey Maps
User Journey Map 1: For Teams in the Workplace and Volunteer Teams
User Journey Map 2: For Gig Workers Outside of the Workplace
While mapping the user journey and all the key steps in them, we listed wireframes that could communicate those actions to a wider audience.
4/22 Working Session
We had a working session in class, where Diana and Hannah kicked off Mosaic wireframes, Amrita set in motion the storyboards and script for Mosaic’s concept video, and Shambhavi drafted wireframes for a microsite about Mosaic.
Low-Fidelity Desktop Wireframes
Home and Login:
Navigation, Browsing Learning Modules, and Content Preview:
Video Storyboard/Script Draft
Microsite wireframes
The microsite wireframes explored two possible directions, one where we have one concept video that combines the stories of three personas, and another where we have three mini-videos telling the stories of the three personas.
Wireframes with one concept video (left) and three mini-videos (right):
Next steps
We discussed how to get production-ready! We considered discussing a wireframe list together or dividing and start conquering the first pass.
We decided that Diana and Hannah would focus on the wireframes and user flows, Amrita would be taking forward the video script and storyboards, and Shambhavi and Diana would be exploring Mosaic’s brand identity.
BTW!
Don’t miss out Amrita’s amazing recommendations to watch!
Devs on Hulu
Mrs. America on Hulu
Mythic Quest on Apple TV
Mr. Robot on Hulu or Youtube TV
4/23 Storyboards + Wireframes
We squeezed in a brief meeting amidst our crazy days and reviewed updates on storyboards, and to decide which wireframes and user flows to develop further. We discussed the stories and brainstormed ideas for refinement.
Our video storyboards intended to communicate the stories of our three personas through three scenarios. Here is an overview of the storyboards, along with a few notes that we made as Amrita walked us through it.
Story 1: Workplace Team: Librarians
1 — Bhakti, Michelle, Kin, and Neil are librarians who work on a team together at a local university.
2- Because of coronavirus, they recently made a quick transition to remote work.
3 — Everyone has been handling the transition differently, which has caused some friction within the team
4 — Bhakti is concerned and starts looking for ways to help the team work better together in this new setting.
5 — That’s when she finds Mosaic and the Conflict Management for Teams series.
6 — At the next team meeting, Bhakti asks the team if they’d be willing to give the series a try. Everyone is game.
7 — Each member starts the module individually — going through a module that combines training and reflections.
8 — Once finished with the first module, they are prompted to discuss their learnings and complete an activity together at their next team meeting.
9 — At this meeting, Bhakti takes notes and fills out the team activity sheet / uploads to Mosaic.
10 — Her team earns a badge?
11 — Ends with them meeting together and everyone looking happy.
We discussed around showing what prompts members to be game. We considered that at the end of storyboard 1, maybe the badge is a personalized one for the team, and we could show the team bonding together, and that there could be patterns that a team can choose, or that the badge could be a modular design.
Story 2: Volunteer Team: Animal Rescue
Selena, Ji, and Lee decided to start an animal rescue volunteer group together in their free time.
They want to work more collaboratively together, so they turn to Mosaic.
The three begin working on New Team collaboration modules, which guide them through setting up a new team, collaboration best practices, and getting to know/communicating each other’s working styles. Modules: New team formation — setting up team, best practices, Collaboration practices, Getting to know and communicating your working styles)
We discussed whether in the video, we should show team members coming back to reflect and record after meeting in person, and whether we want to show a completion badge to represent the social aspect.
We wondered if there is any opportunity to bring in elements from story 1 to story 2, and that maybe we can show different content (content specific to story 2) in the same wireframes/mockups. We considered showing story 1 as the main one, and stories 2 and 3 as additional ones.
We then brainstormed on the sequencing of stories in the videos, which were then more like individual videos (story 1 + story 2 + story 3), and considered an alternative narrative of video with all three stories combined (problem + concept + going through modules + impact). This would mean showing different snapshots from different stories, where together they make for 1 complete story, which would be likely more engaging than complete stories.
We discussed that the video won’t include elaborate product demos, and will have more of snapshots. With the video thumbnails as the frame, zooming in and out from a screen to the real world, the video player would become a device screen with mockups.
Story 3: Individual Worker: Tyler
Tyler works for a company that delivers online grocery orders. He is looking to gain more knowledge about his workplace rights as an independent contractor and how he might better advocate for himself in his current position. Modules: workplace rights, communication.
We discussed the trigger that would prompt Tyler to go to Mosaic, and wondered how the story should end — Does Tyler have a conversation with his employer by requesting a check-in with his manager? Or does he get involved in organizing a union?
We also considered other kinds of gig workers, like landscapers, manual labor gigs, or performing artists.
4/24 Production mode, go!
We took out about three hours for a working session to dive into production and decide our next steps. Shambhavi walked us through a few baby stage options for Mosaic’s logo:
And then we discussed initial ideas for the typography, hierarchy, alignment, spacing, cards, and page layout guidelines:
We concluded the session with a list of next steps, took ownership of different components, like style guide: type, buttons, patterns, logo versions, linking assets, illustration style inspiration, and decided to meet with drafts the next day.
4/25 Working Session
We took out a couple of hours to update each other on our progress and get feedback for the next steps! On our agenda was UX/UI Wireframes, Brand Identity + UX Patterns, and Illustrations + Storyboards.
UX/UI Wireframes
Diana and Hannah took us through a more elaborate version of the wireframes, discussing the navigation menu on Mosaic’s website, user flows for module registration, and a series information page where a user would go through the learning modules in detail.
The navigation menu on Mosaic’s website:
Module registration:
Series information page:
Brand Identity + UX Patterns
We then brainstormed fonts and had fun exploring different forms for Mosaic’s wordmark, headings, or body.
Mosaic wordmark samples:
Body copy samples:
Heading samples:
Our type finalists:
And… presenting the winner:
We then moved forward to deciding the color palette of Mosaic. We drew color swatches from the moodboards, vetted it with our indicators for various criteria of brand identity design, and narrowed down to these three options:
And… our final color palette:
Next Steps
We concluded the session with a plan to work on LoFi wireframes for every flow according to the XD list (Diana, Hannah), refining the logo for finalization (Shambhavi), and furthering the illustrations, vectorizing and combing storyboard narratives (Amrita).
Last Week of class: Final countdown!! (4/26–5/2)
Research Method: presentation outline
During the research method class, we had a chance to think about how we can present our research and craft a narrative around our design concept. Sofia and Hajira prepared a spreadsheet where we could write down the main points that we need to convey during our 10-minute presentation. For concept, it asked us to think about the importance, the opportunity space we are working in, and how our concept is distinct from other products. This was relatively easy to write down since it was something we were focusing on for a couple of weeks now.
However, when writing about the research, we felt that it was overwhelming to succinctly describe everything we did in just a few sentences. We had small twists and turns which felt important to what our concept is today. The three questions that were asked in the spreadsheet were: how did we conduct our research, what were the insights and how did you reflect it into your concept? We wrote multiple versions of the possible answers during the class.
During studio check-in with Peter and Hajira, we asked for some of his feedback on this. The biggest advice that they gave to us was that we should focus on the journey that tells a strong throughline from beginning to end- we do not have to show everything.
Another thing that Hajira asked about gave us another idea- the need to explain the workplace right module. Soft skill and workplace rights are not an obvious pair and that made our platform stronger and unique. As of now, that part of the story was missing and we need to keep that in mind when drafting our presentation.
The talk we had with Aadya in our class was helpful in thinking about our video story as well. After listening to our concept and presentation outline, she guided us to a couple of past projects and how they represented the user journey as not a story but as a testimonial. We thought this would be well suited for our situation given that we wanted to show multiple use cases.
Low fi Wireframes
After pinning down the storylines, Hannah and Diana took the first attempt at the Mosaic wireframe. We first listed out all the screens that would be crucial for the complete user journey and screens we needed in the video as well. Having a list of competitors from our competitor analysis was helpful in looking at the pros and cons of each platform.
Diana worked on the website landing page while Hannah worked on the personal dashboard and learning mode. After working on the wireframes for a day, we found out that we were both confused about the hierarchy of the modules, set of modules (what is this called?), and how these all relate to team mode versus individual learning mode. So we went back to the spreadsheet and worked out some of the topics, what is included, and if these modules were offered for teams or individuals. We decided that
- Topics will be acting as categories
- All modules could be taken by an individual while some modules will be recommended to be taken as a teams
- Set of modules will be grouped as Series
- And Badges will be given to people who finished a whole series
The learning mode wireframe was inspired by many focus oriented platform- we designed this to be distinctive from the rest of the website by making it a vertical navbar. We wanted the Mosaic to be special to the learner by showing what is most relevant to the user on their dashboard.
The mobile app echoed this logic as well and showed a hyper-personalized dashboard on the personal landing page.
Brand identity & Illustration style
We continued our exploration this week as well. Amrita worked on illustration of the people for the video and Shambhavi ideated on brand identity and UI assets.
For the video, we wanted to make the illustration style simple so that it would be faster to animate. Our idea was to make a set of face shapes, hairstyles, and skin color to mix and match, creating multiple characters all at once. The simple line drawing for the faces was working well and we all love the explorations we were seeing.
The logo was more difficult to work through. We had two ideas- one that was simple and imitated the look of mosaic tiles and another one was to bring in our research journey. We looked at both options but every team member had strong ideas about this. It was getting difficult to merge together. Considering the wireframe with the logo option made us see that a simpler logo might work better.
Design Week (5/3 to 5/7)
Team 16 turned the corner into Design Week in full production mode. Our focus was to visualize and communicate our assets at a high level of resolution, including: the concept video, the platform UI, and the presentation. We buckled up for some long Zoom working sessions.
Identity
We met on Sunday to take a look at progress across the board. A big focus was on Mosaic’s identity, as we had set a deadline to decide a final logo by the end of the day. Shambhavi led us through a show and tell of her detailed iterations on our final concept. There was much copying and pasting of artboards with minute variations in color and form. We had to try the logo on in the desktop site header and learning mode dashboard, and consider how it would appear in the concept video. Once we agreed on a color, a wordmark and a simpler mark, we then began experimenting with adding gradients to give the logo some dimension. The final step was to perfect the corner radius and ensure the logo would scale to various sizes depending on use. With our final logo, Mosaic’s identity was ready for primetime, and we pushed onwards.
Concept Video
Script + Storyboards
Initially, we envisioned three different concept videos for each of our user journeys. To create a more impactful story, we decided to combine all three stories into one video. We began by first refining our script.
Once our script was locked, we moved into recording. Amrita narrated and various classmates (Ji and Anu) + Diana’s fiance Erick helped us do voiceovers.
Then, to guide video production and asset development, we storyboarded our ideas matching our script to our visual narrative. Our storyboards helped us figure out which assets and UI elements we would need to produce.
Illustration style
To strike a balance between formalness and friendliness, we gravitated towards an illustrative, hand-crafted style. We created illustrations representing the people and contexts that were central to Mosaic and communicating our concept. Amrita started drawing illustration-faces, then Diana developed them (and is an illustration SUPERSTAR) further by refining the faces, adding bodies+color!
Video production
We also decided on workflow and division of tasks. Diana and Amrita tag-teamed the video. Diana created 2D assets in Illustrator, and Amrita animated the assets in After Effects. It was a 2 day and night long process of navigating the depths of After Effects. But, we emerged with a video that tracked the emotional journey of our users, showcased stellar illustrations, and communicated a concept of which we are proud. Hooray team!
Platform UI
We started the day on Monday with a full list of screens that we would need to visualize in our concept video. We knew that we wanted to show Mosaic’s mobile browse experience, the desktop browsing and series detail page, the desktop personal dashboard, and badges being awarded. We got to work making those screens and associated user flows come to life. By the end of the night, we had most of the desktop screens visualized and the beginnings of a mobile app.
On Tuesday, our goal was to lock the screens by the end of the day so that we could record prototypes and incorporate them into the concept video. We went through a series of iterations on mobile until we landed on the final layout with the right mix of color and functionality. Meanwhile, we incorporated the final versions of Mosaic’s icons and logo into the UI, including custom icons for each of the topics (conflict management, collaboration, communication, personal development, and equitable workplace). Shambhavi created a series of illustrations to make Mosaic come to life, including profile avatars and badges.
Once our screen mockups were ready to go, we wired up a clickable prototype for the interactions we would be showing in the video. This turned our focus to the more detailed animations and micro-interactions that would contribute to the user experience of Mosaic. We used a mix of AdobeXD’s native functionality for some simpler interactions, and Principle for more detailed animations. By the end of the day on Tuesday, we had everything we needed on-screen mockups and recorded prototypes to place into the concept video. Our final step on Wednesday was to create some static mockups for the presentation.
Presentation Prep
Wednesday was all about the presentation unless you were Amrita, in which case it was AfterEffects all the way. We woke up on Wednesday morning feeling not quite refreshed, but caffeinated and got to work on updating our presentation outline. With all of the elements coming together, it was much easier to decide exactly where everything should go in the flow, and whether some ideas should be saved for reference in the event of questions after the presentation. We decided to open our presentation with our research process, move to the concept video, recap key design features, and finish with our theory of change and value flow. Once that was decided, we got to work writing the narrative of our presentation, in detail.
Many drafts later, the presentation narrative was in good shape, and we turned back to the slides themselves. Some of us worked on making mockup assets and others refined the slide animations and visual storytelling. We created a visualization to describe Mosaic’s place in an ecosystem of stakeholders and the value flows among them, and also developed an archive of slides to show if asked relevant questions. Finally, late into the night, we did a few run-throughs to work out the timing and transitions. With that, we signed off to get some sleep before the big day.
Final Presentation (5/7)
Our team’s final presentation was on Thursday 5/7. We were first up in the presentation order and had many of our family and friends joining us via Zoom, as well as some of our research participants. We ran through our slides and got to take a few questions from our Index guests.
Some quotes from our feedback session with Liza, Arnold, and Mariano:
- “I get the depth and how thorough your investigation has been.”
- “ It was very clear to see how well you collaborated during this process. This speaks empowerment, being able to offer people to build soft skills. More so now in the current climate.”
- “You shifted your focus from the white-collar worker in Pittsburgh to the full spectrum of workers. Providing a tool that addresses the whole spectrum is a really smart shift.”
- “The way I think about Mosaic is an attempt to make tacit and implicit knowledge explicit. It makes public knowledge that isn’t normally shared public.”
- “You’re distilling this info into a universal site that gives access to knowledge that academics and govt and researchers have collected using public funding. Then you’re making individual knowledge shared. Most people don’t even know they belong to a community of practice.”
- “I see Mosaic as being a delivery system. A collector and then a delivery system for the whole history… to medieval times. How to transfer knowledge, norms, practices, methods, from one generation to the next. What you have here is an incredible box into which a tremendous amount of existing knowledge — public, private, historical, emergent — can be stuffed and reshaped, reimagined as tools and methods and techniques for today’s and tomorrow’s workers.”
It was great to hear the positive feedback and suggestions on how to push the concept further.
Conclusion
And then, we reached the end! We conducted a private retrospective with Peter and our cohort on Friday, and finished up our deliverables over the weekend. It’s hard to believe that our semester is coming to a close. In the end, we felt proud of our concept and our teamwork. Given all that has happened in the last four months, we couldn’t tell a difference in quality between what we made while working remotely and what we have made on previous projects while working in person. We are grateful to each other, to Peter, Aadya, Hajira, and Sofía, to our research participants, and to the INDEX team for helping us along the way. Many thanks to all! Team 16 over and out 🎤.
