Design Process
Empathize & Define
Drew upon the need for additional educational assistance within class outside of class through the use of:
- Mock User Interviews
- Stakeholder Interviews
- Personas
- User Journeys
IDEATE
Set our sights on a mobile product that crowd sourced users driving an educational inter-class community.
prototype
test
In the final design stage of testing for feedback, Pitt Overflow won 2nd place overall (out of ~250 submissions) in the Pitt Mobile App Design Competition.
Pre-Design Phase
A Competition of Colleagues
The University of Pittsburgh's annual Mobile App Design competition is where this project grounded it's roots. My team was comprised of myself and a business student whom of which I connected with via the pre-competition social board.
My Goal
I had one overarching ambition in approaching this project and it was to fulfill the role of a UX designer throughout the full design process of a product as well as learning as much as humanly possible in applying a user centered design process.
Design Phase
challenge one
Due to the human resource constraint my team faced, my partner and I found out rather quickly how many hats we would be wearing over the course of this design effort. To remedy expectations and workload, we prioritized assigning fluid responsibilities for ourselves as follows:
Shoueb
- User Researcher
- UX Designer
- Product Designer
- Final Prototyping
My Partner
- User Representative
- Stakeholder
- Product Owner
User Research Method: User/Stakeholder Interview
In the initial project session, my first concern was understanding the needs of my stakeholder and users (represented through my partner). Multiple pain points were brought up but there were 2 common themes that consistently arose through the interview session:
- More mentoring resources
- The need for a modern online collegiate community
Solution
Upon further ideation for plans of attack on the 2 major needs we defined during the user interview, my team called upon our own experiences with online resources akin to "Stack Overflow" and "Reddit" and from there, the idea for a forum based app resonated strongly when a scholastic lens was glazed around it.
Challenge TWO
We needed the best method for assessing how well our proposed solution would function and what types of functionality users would be looking for. Personas coupled with user journeys proved to be the best choice.
User Research Methods: Personas & User Journeys
By creating a matrix of three personas and comparing them to attributes, desires, and behaviors, my team was able to get a better sense of how our product could help address user needs. This also opened up one of my favorite moments in the project as much deliberation and analysis took place based off of the results we came across by creating 2 mock users and their journey mappings leading into the creation of our final list of deliverables.
Persona Grid
User Journey Mapping
SUSAN
Launches the app and is greeted by Pitt Passport Login. Susan notices the school color palette of golds and blues then enters her credentials.
She is forwarded to a Home screen where she scans through a list of her current semester’s classes. Everything from her "Intro to European Art" class to "Seminar in Composition" are all accounted for on the home page. Susan then examines the navigation bar along the bottom of the screen comprised of home, search, notifications, and profile tabs.
She doesn’t care to explore the navigation bar items at all and taps on her first class: "Intro to Chemistry". Susan is brought to a forum board of her Chemistry 101 course where the topics are classified in date/time posted order, with pinned posts at the top from the course TA.
She taps on the first forum topic that is titled “Homework 3 question 4 help” created by Scott, another student in her class. This opens a screen with an interface resembling a common messaging app.
At the very top, just under the topic title, are loads of forum posts pertaining to the topic of molecular compounds. Susan sees a pinned “Favorite Response” post, as chosen by Scott, which Susan notices and answers the question.
Tom
Launches the app and is greeted by the Pitt Passport Login.
He is forwarded to a Home screen where he notices and scans through a list of his current semester’s classes. He doesn’t see the class he is TA of, but notices a typical navigation bar on the bottom of the screen, with one of the choices being "Search".
Upon tapping on "Search", he is displayed with a screen that lists out the schools of Pittsburgh (University of Pittsburgh - Main Campus, University of Pittsburgh - Greensburg, etc). He also sees a search bar at the top, and decides to tap on that and enter the intended class directly.
After typing in "Finance 101", he sees multiple listings, but eventually sees the one that corresponds with the correct time, location, and professor. He sees a star on the right of the button denoting a Favorite feature, and taps on that because he needs to be able to access the class quickly.
Tom is brought to a listing of created forum topics in classified in date/time posted order.
Tom’s first order of business is creating an announcement about an upcoming homework assignment so he taps on the plus button in the top right, types in the information, and makes sure to select Pinned Post.
Challenge three
A major point of contention for my partner and I were manners of incentivizing usage of the product. We finally decided on a compromise: an incentivized point system where users spend points to post and score points by answering. All end users would be able to track their point count on their personal profile page of the app. This incentivization was also attractive for it's scalability in allowing for spending accrued points in other manners (like school merchandise)
Deliverables
- Pitt Passport Sign On Process
- Roster of Currently Enrolled Courses
- Main Forum Board
- Posting Option for Posing Questions
- Messaging Mechanic for Driving Discussions
- Fluid Navigation Menu
- Find Feature Allowing for Browsing All Classes
- Notification Pane
- User Profile
- Incentivizing Point System
Prototyping Tools
Two UX tools were utilized over the course of this project: multiple white boards and Adobe XD. Everything from initial ideation, personas/user journeys, through low fidelity wireframes were mocked up on whiteboards for my team to observe and analyze. Much of our internal struggles and dilemmas when making decisions were dealt with visually on large canvases ensuring we were both on the same page. From there, we moved forward with high fidelity wireframing in Adobe XD allowing for us to task-loop through the UX of Pitt Overflow.
DURATION
From ideation to submission, my team member and I spent roughly 2 months cooperating on this effort.
Post Design Phase
in Retrospect
Over the course of this project, there were a handful of hurdles that I reflected on that I aim to utilize in future design applications.
Don't Spread Myself Too Thin. In the initial stages of design, I found myself entering viscous thought cycles where I was teetering on the edge of viewing the project as a stakeholder. It bled into my design intentions and decisions draining me to the verge of burning out. Setting boundaries for my responsibilities helped so much and it made me see the importance of having a team of designated roles, from engineers to designers to owners, supporting the overall design process.
Do More Testing. With the limitations of time, availability, and human resources for this project, relying on my partner to simulate being a user and stakeholder was better than nothing but I definitely aim to prioritize proper testing of the product with users in the future.
Take Pictures. This takeaway is mostly coming from a documentation perspective. Being able to take pictures of artifacts for future reference helps with analyzing my evolution of the design process.
