logo_final.png

Penzils

a design of a student-driven marketplace that provides one-on-one lessons from our community of passionate student tutors, coaches, and instructors

Platform: Desktop Website, Mobile Application

Team: 2 UX/UI Designers, 1 Product Designer, CEO, CTO

Role: User Experience Designer, Visual Designer, Product Strategist

visual browser, 

RATIONALE

CONTEXT

Penzils is a student-driven marketplace to empower students to help others learn anything. Focusing on connecting tutors to their local communities, Penzils allows a compassionate and effective learning environment for students who truly understand their student’s struggles.

Understanding how Penzils is different than the plethora of tutoring platforms available is crucial for the viability of Penzils as a unique product on the market. 

PROBLEM

Previous designs were outsourced by a group of designers who used mostly trend-driven design decisions. This lacked user research. There was no usability testing nor customer testimonials and focused on visuals. I worked closely with another Product Designer to come up with a strategy to test the previous designs and understand what areas are lacking and how our customers and future users would respond to them.

logo_final.png

How might we provide a useful and unique source of tutoring that will benefit our users?

CURRENT MOBILE VIEW

The current mobile application encompasses all functionalities of the desktop platform.

Using Google Analytics to understand the most used features for each user group and noting key instances of rendering errors were the focus in creating an intuitive and easy-to-use mobile responsive platform.

CUSTOMER VALUES

MOBILE USAGE vs. DESKTOP USAGE

DESIGN HIERARCHY & LAYOUT

POSSIBLE CHANGES

40% of all users access the platform through their mobile devices. In interviewing all user groups, I noted specific features that users are more likely to utilize from their phones. Google Analytics also provided data on this. For example, the message feature is heavily used by coordinators. In breaking down what specific actions users are taking on their mobile devices, we may be able to provide a more directed and intuitive mobile responsive design.

Current mobile designs lack visual hierarchy throughout different text types (heading, body, etc.). The majority of data visualization is inappropriately visualized on the mobile perspective and unable to be treated or understood the same way due to dimension differences. 

Taking into account different feature usages, it was apparent to simplify the features on the mobile view to allow a better experience for all users. This would also help development and ease the process of fixing the mobile responsive state. I had to keep in mind that creating a usable mobile responsive was the priority and then later we could focus on adding additional elements that could be developed from the start.

BUILD + DESIGN

Rectangle.png

Heading 1: SF Pro Display Bold Pt. 24

Heading 2: SF Pro Display Bold Pt. 18

Body 1: SF Pro Display Medium Pt. 14

Body 2: SF Pro Display Regular Pt. 12

#333333

The most important thing to focus on was text hierarchy as the rendering from the desktop view was not appropriate for mobile view.

I proposed a dark gray to allow a more accessible read.

Most Design System

Rectangle.png

10 px. radius

18% #000000, Blur = 9 

Frame 9.png

I discussed with the CTO and CEO UI updates including some button updates as well as rounded corner designs on the tile designs. These updates allow for a more updated and current look. The buttons provided easier access of features for our 50+ demographic.

Coordinator

Doctor (before)

Patient Side Menu Dashboard.png

Patient

Doctor (after)

These are the simplified menulists for each user. I included updated icons from the Most design library.

Based on shadowing the CEO, Head Patient Coordinator, and speaking to doctors, I was able streamline mobile menu features without impeding functionality.

FINAL SCREENS

A lot of the data tables and features were not practical to include. For example, the accounting table encompasses almost 7 different columns which I felt were all not necessary to be viewed on the mobile responsive view for the timeframe. I spoke with doctors and coordinators to ensure my understanding of the features' usages.

Desktop Performance Overview

Mobile Performance Overview

Conversations (before)

Conversations (after)

Conversations (after)

Conversations (before)

Dashboard (before)

Dashboard (after)

KEY TAKEAWAYS +
NEXT STEPS

I reworked the current unusable mobile responsive side of the platform working closely with the CTO and engineers to come up with solutions that not only updated UI elements but also kept within current engineering structures - allowing straightforward updates.

I interviewed key user groups to understand areas for improvement as well as key feature usages throughout the platform.

As this was a 3-month internship project, I would have loved to A/B test my redesigned screens with original screens to collect data on their impact. I estimate that it impacts the efficiency by 60% in testing the designs myself and a few users.

 

There is also going to be a mobile application developed solely for doctors and due to that, I would want to do some cross-referential analysis on the mobile application and responsive purpose. Being able to leverage both their purposes will allow for a more streamlined usage of the mobile application and responsive for doctors.

OTHER WORK

ORGANIZE DESIGN FLOW

I personally organized all Figma design pages into one comprehensive location to facilitate streamlined nature of design process. This document serves over 7 designers, 4 engineers, and over 5 other executives.

I redesigned various aspects of the SaaS Platform to solve issues of inaccessibility and lack of intuitive use from customers. I designed a payment flow on the patient side, updated the chat feature to include additional document uploading abilities, and a potential Help Center.

I lead the clarification and redesign of onboarding flow. I introduced other platforms such as Typeform and VideoAsk to facilitate patient, doctor, and coordinator leads for the platform.

Design PulseProtocol Landing Page through Figma and implemented through Webflow. Focused on creating an intuitive and informational site to serve doctors, patients, patient coordinators, and investors. see it here 

PLATFORM REWORKS

HIGH LEVEL PLATFORM DECISIONS

LANDING PAGE