Deliverables

Annotated Wireframe
Prototype

Client

PepTalkHer

Tool

Figma
Invision

TimeFrame

4 Weeks

Team size

4 Designers

Overview

PepTalkHer

PepTalkHer's mission is to close the gender pay gap and support professional women throughout their career. It aims to remind professional women of their value and to stand up for themselves.

The PepTalkHer app encourages its users to form a habit of keeping track of their career achievements (wins), which they can use during performance review to negotiate for pay raises and promotions.


The Ask

To achieve its maximal usefulness, PepTalkHer requires its users to consistently log their achievements. Unfortunately, it has experienced a high user fall-off rate. Our goal for the project was to pinpoint the underlying reason for this fall-off and to improve the stickiness of the app to encourage consistent repeated use.

Jump to the solution

My Role

I worked in a team of 4 as a UX Researcher, UX Designer, and Product Designer. After the project finished, I took the initiative to add a UI to create final high fidelity screens.


Working with Constraints

Our client is a self-funded startup, so we faced strict time (4 weeks), developmental, and financial constraints. With this in mind, we designed a final deliverable that was technically feasible and financially viable to implement, with a quick time to market.

Learn from Peptalkher Users

Who are PepTalkHer's Users?

To clarify who we are designing for, we had to first pinpoint PepTalkHer's target market. After talking with the CEO and doing research, we found that PepTalkHer has a wide range of users, ranging from professional women in their early 20's who just started working to C-suite level users who have more than 30 years of work experience. Even though the target users are incredibly diverse, they share a lot in common with regards to their career aspirations and concerns. To get a comprehensive picture of their motivations, goals, pain points, and behavioral patterns, we interviewed twenty-two current users who fit this criteria. The following design aims to optimize for the shared needs of these disparate groups.

What Causes User Fall-off?

To find the answer, we interviewed:

We discovered that:

Stickiness is the surface problem, whereas user engagement is the underlying issue.

Keep users engaged by offering more features centered on guidance and coaching.

Users find that the app does not offer much value beyond note-taking since it does not have any coaching features on negotiation and career development.

Keep users engaged by providing a more comprehensive and guided win journaling experience.

The current app does not offer users any guidance on writing into their win journal. The majority of users want explicit and structured guidance and flexibility with their win journal experience.

Keep users engaged by redesigning the app to make it more intuitive and personalized.

Users have been experienced usability issues with the current app. The current design is not intuitive enough and many users had a hard time finding and using some of the current features.

Redesigning The app

Building, Testing, and Iterating

In the process of creating the final high fidelity wireframes and prototypes, we iteratively developed and tested each version. We conducted multiple rounds of testing, including concept testing, A/B testing, guerrilla testing, and usability testings. After each round, we took the feedback and implemented changes that we believed addressed user concerns and issues.

Challenge 1: Keep users engaged by offering more features centered on guidance and coaching.

Visualize the data for convincing stories

Version 1

Graph is an effective way to visualize user's journey in marking their wins leading to an employee review
Lack of x and y-axis muddled the purpose of the graph
Line graph caused confusion and improperly represented the data
Did not emphasize performance review date

Categorizes the user's wins based on the top tags for their wins
Visualize and pinpoint users' areas of strength and areas of improvement
Clear visual categorization of progress
Percentages in the labels were redundant

Version 2

Explicitly emphasized performance review date
Bar graph represented number of win entries properly and effectively
Flexibility to filter the numbers of wins by week, month, and year
Difficult to articulate how much time was left until performance review

Numbers in label provided helpful information
Total number of wins entered is valuable information
Unable to personalize the graph

Misleading tab label ("Overview") led to misinterpretation of screen purpose
Disconnect between Overview and data analysis

Ability to put performance review dates and other key dates during onboarding process

Version 3

Proper visual prominence drew user attention
Bolded and big countdown is eye catching, straightforward, and motivating
 Included both countdown and exact date to inform at a glance

Flexibility to customize the chart by choosing different tags
Explantion about how to customize the graph
Detailed title expressing what data is used to generate the graph

"Progress" labelling conveyed a clear message

Challenge 2: Keep users engaged by providing a more comprehensive and guided win journaling experience.

Streamline the win journaling process

Version 1

Did not emphasize the importance of tagging win entries
Did not inform users how tags impact things down the line

Template button was hard to press
Did not look like a clickable button
Did not inform users what templates are and how to use them

Unintuitive user flow
Important features were nested away

Version 2

One-time pop-up modals explained the importance of tags and how they benefit from using them

One-time pop-up modals explained the purpose of the template and how to use them

Template button was removed and templates appear right after clicking "add a win"
Shorter and more intuitive user flow

Categorize wins by filter

Flexibility to view and export wins based on different preferences and needs

Ability to easily sort relevant entries by time,  topics, tags, projects, etc.

Challenge 3: Keep users engaged by redesigning the app to make it more intuitive and personalized

Home Screen

Current home screen

Bullseye icon caused confusion
Users did not associate bullseye with adding a win

Note-taking icon is redundant in functionality (add a win) and caused confusion

Underlined text is redundant in context and functionality (add a win)

Irrelevant image negatively impacted first impression
Image caused user discomfort
Poor use of space

Export button was hard to find
Failed to export wins
Unintuitive information architecture and user flow


redesigned home screen

Floating "Add a win” button brought wins to the front-and-center

“Hello, [users’ name] ” personalized the app for the user and created a connection

Easy to find the export feature and to export wins
Intuitive user flow

Search allows user to find a specific win quickly and directly

the solution

The New PepTalkHer

Our final design implemented a streamlined structure to help professional women acknowledge and negotiate their value in a guided and personalized way.

View prototype

Usability Testing

To measure whether the new app improved the engagement and stickiness issue, we compared the current app with the new app regarding users' behaviors and attitudes. Here are the results:


Results

The client was very satisfied with our work and decided to implement our design. Considering the financial and technical limitation, the client decided to first implement the easy-to-build parts which include win templates, filtering, and the redesigned home screen. Data visualization will be built and included in the premium version. The new version of PepTalkHer has already launched and the user feedback has been much more positive. According to Peptalkher's CEO, they are seeing a higher user retention rate with the new design.

Personal Challenge

Engage and Inform with visual design

As a product designer, I decided to add a UI to create final wireframes after the project was finished.

Color Theory

The CEO of PepTalkHer was not satisfied with the current app's UI and branding color. Even though the app mainly targets professional women, the client wanted a gender neutral branding with a sense of professionalism. Based on this request, I decided to use blue as the main shade to invoke professionalism and minimalism. I used white for the background, light grey for tags, light blue for selected tags, vivid blue for Call to Action and, dark blue and black as text color.


Typography

Since PepTalkHer already used Montserrat as their branding font and have been pretty happy about it, I decided to not reinvent the wheel and to keep using the same font. However I did change the font sizes to create a better visual hierarchy in the screens.

Future recommendations

Paid Premium Version

As mentioned previously, due to time, money, and technical constraints, we did not focus much on in-app coaching features which were one of the users' main demands. However, PepTalkHer should definitely consider adding career coaching features to a paid premium version after their business is more established. It has a huge potential market and would be a great opportunity for PepTalkHer to maximize business benefits and to expand their user base. Based on our research, possible coaching focused ideas include:

In-app step by step Career coaching

1. Provide in-app presentation templates, scripts, and scenarios for users to prepare for negotiations.
2. Provide step-by-step instruction on how to achieve users' next career goals.
3. Provide information on what is required to achieve the next goal, such as further education, certificates, skills needed, etc.

online webinar & one-on-one coaching

1. Offer online webinars and classes to give users easy access to resources
2. Offer one-on-one coaching and mentorship to give users a more personalized experience
3. In-app live chat feature to a team of coaches/mentors where user can reach out and ask questions

What I Learned

Best Solution and Best Possible Solution

Most of the time, working with clients means working with constraints. For this project, we had to scope the project and prioritize features that would make our final product the best feasible solution.

Balance Between Business and User Needs.

To me, UX is about solving business problems through user research-based design. In this project, we successfully identified that user engagement (design and user problem) is the root cause of the app stickiness issue (business problem). The design process became smoother after we figured this out.

Deliver Good Final Handoff

The first step of a good final handoff is to know who the recipient is. As a designer, I should always communicate what level of detail is needed in annotated wireframes with the client and make sure all parties involved are included. Moreover, I should make sure all deliverables are well structured and scannable.