UX|UI Designer
About:
Collab is a native IOs app created in a Design Sprint presented by IBM x BrainStation. Our team's hope was to create an accessible learning app that would help our target population, people with different learning capabilities. The idea of the app is simple: a way to pin verbal conversation points to save them for later.
Team: Mads Motush, Taylor Wuthrich, Laura Petre, Dane Carlsen, Mikayla Solomon,
Caio Castelluber, Will Anderson
My Role: UX Researcher & Prototyper
Tools: Figma, Google Docs,
Pen & Paper
Timeline: 4 Days
Click on a screen to test out Collab!
This is the process we'd use to come to our solution based on Ideo's design sprint format
Context
The Collab App came about as a 4 Day Design Sprint Challenge from a Client of IBM: Coastal University. Coastal University was looking for a design intervention that focused on the current state of education. With the onset of the novel Coronavirus, the landscape for learners has changed drastically. Our team was tasked with the following challenge:
How might we make education more accessible to one of the following core user types?
Target
Phase 1: Planning & Research
Day one of our sprint was about figuring out what we wanted to do. We had been tasked with creating a collaborative education application. With the onset of Covid-19, education has taken a vast turn. Our first challenge was figuring out which group we wanted to target from the above groups, International students, Students with disabilities, Mature students or Young professionals.
1. International students
2.Differently Abled Students
3. Mature Students
4. Young Professionals
- different time zones make learning difficult
- Language barriers
- Proxy differences
- Overwhelming amount of information is difficult to deal with
- scope of "disabilities" is very broad
- students over 25 might face ostracization due to age difference
- recent grads going back for more schooling
-might face challenges due to Covid-19 & lack of work
After parting our separate ways to research the specific problems of each of these groups, we would then vote on which group we wanted to focus on. The Majority of our team (5/7) would choose students with disabilities, which is how we would proceed with our design question:
Primary Research
We would then perform 5 interviews with users that matched our persona and figure out common themes our interviewees were having. We would come up with the following:
These are the questions we would ask our interviewees
Distractions
With technology being the primary source for interactions, it's easy for students wit all types of disabilities to get distracted easily. This makes it easy to miss important parts of the conversation.
Motivation
Now that we're all working from home, it can be hard for anyone to find the motivation to be productive, much less folks with disabilities.
Communication
It can be hard for people with disabilities to tell others about their access needs. We wanted to make a product that could help anyone without making people feel ostracized.
From these conversations with users, something that stood out to us was a common pain point: information getting lost during group chats, though for a multiplicity of reasons. We'd use the aggregation of this data for the creation of persona, Annie.
Sketch
Phase 2: Brainstorming Features
After figuring out our target user, we'd then be able to focus our efforts into tailoring a solution to fit student's like Annie's needs via our design question. After coming to a consensus on what we wanted the project to focus on doing, the next step was to sketch and ideate on what we wanted our solution to look like. We would split up as a group and then come back to share our ideas.
Phase 2: Ideation
After completing an competitor audit and examining features we thought were useful, it was then time for the team to bring some of these ideas to life in the form of sketches.
We would start with some "crazy 8" speed sketches to get features we saw useful down on paper.
Some rough ideas of the features we wanted our app to include.
Now that we had a better picture of things we knew needed to be part of the Collab app, it was time for us to start wireframing.
Phase 3: Refining
Decide
Once we had an idea of features we wanted to include down on paper, it was on to putting these features together into a succinct product. We would utilize the following task flow to help us visualize what the primary task flow of the product would be:
Combining this task flow with the sketched features that best met our users need to follow conversations, we would then create the foundation of our user's experience with our application, Collab.
This is the first round of wireframes that I created to reflect the task flow from the start of the user task, getting a notification, to getting to . After deliberation and consideration of time, some of the features such as the collaborative workspace would be taken out as to reserve time for developing the pinned conversation point feature instead.
Designs would also be further developed to reflect sizing and spacing that was more in line with design conventions that are on the market today.
The second round of wireframing would include further development of a consistent style and more additions to the home page and pinning page to include more scheduling functionality for our persona, Annie. We wanted to give the user as much control as possible for scheduling in the app in order to coincide with Neilson and Norman's heuristics for usability: user control and freedom. After the creation of a solid wireframe it was then onto polishing the product into what it looks like today.
Prototype
Phase 4: Stitching
We would utilize this style guide and brand colors to guide us with injecting design elements into the product.
The other constraints our team would have to meet were:
1. Utilize Avenir font style
2. Use the colors shown to the right
3. Meet WCAG AA standards
When these criteria were met, we finally had our product, Collab, shown below.
After updating our product in accordance to design principles, I would then go on to prototype the functionality of the app.
Test
Phase 5: Testing & Presenting
Our team would then break off and perform one round of 5 user tests. Due to the time restraint (4 days only!) we didn't have the ability to make additional iterations of Collab but we did find the following results of our tests.
Test Results:
- The "join" function was dependent on the time left until the meeting which is inaccessible for people who might want to join before the meeting begins
- The countdown timer might cause more anxiety than it's intention to help students with time management
- Some users found the action of touching to bring the menu up to be confusing and unintuitive
As for the future of Collab: we would hope to do more user testing on our product before hitting the market. Next steps also include more accessibility features such as the ability to change the size of font in the application and audio accessibility options. Some further considerations also include more user testing on the flow in order to better guide our users to their end goal.