Refresh
An internal website created in SharePoint using built-in features + custom HTML, CSS, and JavaScript to provide a distinct and personalized user interface and experience.
Overview
Refresh is a website that allowed users to conveniently access non-required soft skills training content recommended by representatives from their respective working groups.
Tools
Adobe Creative Cloud, Webflow, Visual Studio Code, Microsoft SharePoint
Project Duration
6 months
My Roles + Responsibilities
Product Designer responsible for the overall visual design (including UI/UX) and the full development of the site.
Responsibilities
Make it pretty.
UX/UI design
Content design
Microcopy + UX writing
Branding/presentation design
Internal communications + marketing
High-fidelity rapid prototyping
Web design and development
User research and testing
Stakeholder/SME management
OTHER DUTIES AS ASSIGNED :-)
Goals ✅
Offers Pfizer employees access to useful training materials on various soft skills. These materials are carefully selected from popular sources like LinkedIn Learning, Harvard ManageMentor, and Skillsoft.
The project leaders wanted to make a catalog that would help users easily find courses on specific topics and areas of interest. They organized the catalog like music playlists, with content chosen by department heads and grouped into learning paths. This made it more appealing and easier for users to explore the relevant courses.
Users can freely browse the entire Refresh catalog at their own pace, without being restricted to their department's specific courses. They have the option to consume as much or as little of the optional training material as they want.
Problem + Opportunity 🤓
Users have a hard time finding elective training materials that they find valuable. It takes a lot of time and effort. To make the site more personal and appealing, we can have a diverse group of champions choose and organize learning paths with content that colleagues will find interesting.
Solution 🤩
Create a website that gathers and provides carefully selected educational content that matches the company's values and objectives. This website should also offer immediate learning solutions, increase colleague participation, and boost their enthusiasm for growth and development.
Early design concepts
Prototype
I used Webflow to create the first version of Refresh. The purpose was to make a working model of the idea and get approval from the people inside the company before we started developing the full website.
The initial idea was to organize the training content based on people's roles and then by topic. There was also a drop-down menu where users could find Learning Paths, which are groups of courses related to a specific topic, like Time Management or Learning Microsoft 365. On the homepage, we had a section dedicated to a webinar that changed every month. It could either be a video that we had recorded before or a link to content from another website. The site also had a smart form that allowed users to create a personalized Training Development Plan. They could include this plan in their goals and go over it with their managers.
Making it scalable.
Utilizing an agile approach allowed for rapid development and release cycles. Teams were equipped with medium-fidelity prototype templates, which enabled them to collaborate and curate content offline while development was ongoing. This approach led to faster onboarding of new user groups.
A BIG PROJECT WIN
WHAT USERS LIKED MOST
Fun, vibrant visuals.
Ease of navigation.
Organized by department.
Quick access to soft skills training.
WHAT USERS WANTED MORE OF
Ability to share content easier.
Access to more content.
What I’m most proud of.
The Refresh site was a homegrown solution to feed a growing appetite for curated soft skills training for Pfizer employees. It was the first of its kind internally. Despite its technical and organizational hurdles, it was actively supported for 5+ years, which allowed me to iterate on the design and development over time.
The project was retired in 2022 and served as a great model and precursor to the more robust third-party solution by Degreed that built upon the founding goals and objectives of Refresh. I am extremely proud of the unique platform I created with a very limited set of tools and resources.
