/w=3840,quality=80)
Newbie Project for Penn Labs - Leading UI/UX design of Penn Mobile Portal, a web application to manage marketing campaigns / polls shown to 8k+ users of Penn Mobile.
Name: Penn Mobile Portal
Role: Product Designer
Team members: Hassan Hammoud (Business Dev), Jasmine Cao (Frontend), Justin Zhang (Backend), Matthew Rosca-Hamlamgean (Full Stack), Michelle Pang (Frontend)
Timeline: September 2020 - Present
Tools: Figma
About Portal
The Penn Mobile Portal was originally a side project spun out of the Penn Mobile iOS project by former Labs Director Josh Doman. He noted that Penn Mobile users wanted an interactive homepage that could tell them about relevant events on campus.
For Spring Fling 2018, the Penn Mobile app included a map and description of the concerts happening during the events, and students loved it. This was the basis from which Portal was born.
The Portal has been used for advertising alumni talks, outdoors programs, and our own recruiting process. In the future, the Portal will be expanded to become the primary method by which Penn students/admin can interact with our products.
How Portal works
Creating Posts / Polls
Users must create a post or poll on the behalf of an organization, which means that we only allow certain people to submit posts — for example, a club president can be a Portal user, whereas a general body member would not be approved to make posts for that club. These roles are verified through Penn Clubs and Hub@Penn.
Posts or polls are then reviewed by Portal admins, who may approve, reject, or submit revision feedback. Users should be able to keep track of their submissions along the stages of approval.
Viewing Analytics
Users can checkout the stats on views (total and unique) and clicks on all posts. Generally our clickthrough rate (defined as the number of clicks divided by the total number of views) hovers around 3%, which is triple the average rate for an online ad.
Synthesizing Previous User Research
Club Leaders
- Needs a more direct way to spread the word about happenings
- Recruit new members
- Promote upcoming events
- Polls would be useful in gauging interest on topics, and researching things like "would you attend this event" or "do you care about this issue?"
- Currently relying on Instagram, Facebook, Newsletters, physical booths, word-of-mouth
- Problem: Inefficient. At most reaching ~200 students or less at a time
University Admin
- Wants to virtually connect with students to gauge potential concerns and needs
- Wants to see post engagement and poll results by demographics, school and year most important, major and housing are less important
- Wishes to understand why people do things: "Did you attend the football game? Why?"
- Interested in asking about student wellness and sentiment. E.g. "are you aware of x resource? " (Linking to that resource if the student says no)
- Currently relying on Instagram, Listserv, small focus group meetings
- Problem: Low response rate since not many students are subscribed in the first place. Difficult to gauge opinions representative of the Penn population through focus group meetings.
Post / Poll Management
This semester I worked on the Post / Poll Management feature, which is a dashboard where users and admins can manage posts and polls throughout the different stages of approval.
Here is the existing design of the dashboard:
/w=3840,quality=80)
Based on the feedback that users are looking for an effective content management tool, I identified several problems with the existing design:
- Continuous cards of mixed posts does not distinguish between posts at different stages (awaiting approval, under revision, approved etc.)
- Submitting feedback and approving posts had to be done manually in the database, since there is no direct way to interact with the posts on the dashboard
Iteration: Kanban Board Design
I began by ideating on how we can best organize the content in a way that helps the user visualize submissions at different stages of approval.
As I was brainstorming, I was especially inspired by the Kanban board, which is a system used to manage work by depicting work at various stages of the process. The system uses cards to represent tasks and columns to represent stages.
I did a rough sketch of how the kanban board system could be incorporated into our product, using the stages of post approval as categories.
Based on this idea, I created a more detailed mockup of the dashboard:
Business Update
As I worked on the dashboard design, our product manager announced that he would like to fully launch Portal to the entire Penn population at the start of next semester.
To prepare for this launch, we decided to introduce a more public-facing side of our website, including a landing page, about page, and tutorials to introduce our product.
Issues with current user flow
- All important pages are embedded in the nav bar, which remains constant throughout the entire process of using the web app (regardless of login status)
- We need to clearly divide the public-facing pages from the internal-facing features that can only be viewed after logging in.
Remapping User Flow
With these in mind, my teammates and I went back to the drawing board to map the new and improved user flow. We decided to organize all user-relevant pages (post management, analytics, settings) within a dashboard that can only be accessed after logging in.
Final Design
Here is the final result of dashboard design after remapping the user flow.
- We decided on using a side menu to accommodate for potential feature additions in the future.
- We got rid of the top navigation bar to create a full-screen dashboard experience that is distinctive from the public-facing side of the website.
/w=3840,quality=80)
Results
Portal is still an ongoing project in the process of development. After we have launched our post feature, we have seen some great results in engagement and impact. Our users have been quite satisfied with the reach of these marketing campaigns:
Engagement of portal posts
- Over 9,000 views on a single post, with 3,000 unique viewers
- 2.2% CTR on a post that was untargeted
- Over 15,000 views across all posts, with less than 10 public posts in the database
Reflection
I've grown a lot throughout my time at Penn Labs as a designer. These are some of the most valuable lessons I learned:
- Flexibility is key when it comes to adapting design to new business changes. Through this process I learned how to best communicate with the PM to understand the intentions and effects of these changes.
- Working on a product that is still in its early development stage is exciting but also challenging at the same time. There is a lot of uncertainties but asking a ton of questions has always been helpful in understanding my tasks.
- The importance is user research and testing! Unfortunately, we have a very limited capacity for conducting user research as a student club, but that is something that I hope to improve upon in future semesters.