Annotated Wireframe
Prototype
PepTalkHer
Figma
Invision
4 Weeks
4 Designers
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.
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.
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.
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.
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.
To find the answer, we interviewed:
We discovered that:
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.
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.
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.
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.
✔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
✔ 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
✔ 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
✘ 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
✔ 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
✔ Flexibility to view and export wins based on different preferences and needs
✔ Ability to easily sort relevant entries by time, topics, tags, projects, etc.
✘ 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
✔ 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
Our final design implemented a streamlined structure to help professional women acknowledge and negotiate their value in a guided and personalized way.
View prototypeTo 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:
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.
As a product designer, I decided to add a UI to create final wireframes after the project was finished.
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.
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.
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:
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.
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
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.
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.
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.