A conceptual design project
The Project
Duration: October 2020- December 2020
Tools used: Figma, google forms, Miro
Team members: six design students
My role, Research: creating questions based on user frustrations and behaviour, create scenario maps, wireframes and final interactive prototype
This was a project I created for my "Introduction to User Experience" class (GBDA 210) at the University of Waterloo.
Overview
The Problem
Everyone has been moved online due to the global pandemic. This posed many problems, especially students who depend on meeting with teams to successfully finish class projects. My design team wanted to find out what students were feeling as a result of this change and how we could help them successfully accomplish their academic goals even though the semester had been moved online.
The Solution
Our team's solution was to create a project management app to help teams organize their time and track project’s process. The app also has a built in communication feature for easy communication between members and a team member tracker to ensure everyone is completing their part of the work.
Research
Since we were gathering information during a pandemic, we decided the safest way to get the results we needed was to use a series of surveys that were then sent out to students. Myself along with the rest of the team created questions that focused on user frustrations and previous experiences when it came to working in groups.
We learned that students enjoy doing group work when all members do their share of the work. This led us to one of the main frustrations users had, which is when members of a group do not complete their portion of the work. Another concern that students had was that virtual group work could result in poor communication which would make the completion of the project much harder.
Design
Persona and Scenario Mapping
Using the information we gathered, I created a persona representing a potential user. Having a visual representation of the user's behaviours, needs and frustrations was helpful to figure out what exactly the team needed to focus on when crafting our solution.
An important element in my persona making process was the name. I wanted it to be gender neutral because it is a way to ensure that there are no biases, but also because I want everyone to feel represented in my designs. It makes me happy that I can make my designs more inclusive even if it does come down to something minor like a name.
A scenario map made in Miro that was focused on a potential steps and questions a user may have while using our product. There are also comments and ideas I added that I thought would be beneficial to our solution.
Wireframing and User Testing
I had the idea to create a progress tracker for not only the project process but also for all members of the group to help solve users frustrations when it comes to working in groups.
We decided to make the progress trackers one of the main interactions of the app. I started wireframing the interaction and then two other members of the team helped me with other ideas that came from our scenario map.
Our wireframes created in Figma
We used our wireframes as the first stage of user testing. Our group asked potential users to test the screens and give us feedback. This was helpful because we realized that there were certain screens from our wireframe that did not match the overall purpose of our product. From there, we decided to exclude them from the final prototype as they did not benefit the user.
Some of the feedback given to us from a user
Different iterations of our design using different colours and interface elements
Final Design
The Prototype
I designed the interface in Figma alongside two of my other team members. We started with six main colours but I decided that we needed to narrow it down to two. Making that change allowed for our prototype to flow better visually while also still being easy for users to understand.
After completing the fully interactive prototype, we conducted our last usability test. Majority of the feedback was positive as all users were easily able to complete the main tasks of the application without difficulty.
Screenshots from Figma of one of the prototype's main interactions
Takeaways
User testing is essential- User testing helped keep my team on track. Many of the users told us that there were certain screens that did not match with our solution. By having this feedback the team was successfully able to eliminate the screens that did not work and even add elements that we did not think of before. Testing helped us stay true to our vision and provide users with the best possible experience.
Less is more- Our team was a little too ambitious with the UI design. We started off with six main colours in our interface design and it became overwhelming. We decided to cut down the colours and really focus on what would make sense to users (e.g make buttons the same colours so that the design would be uniform and buttons would be easily recognizable to users).
