Jennifer Reif Creative

Responsive website and brand design for Jennifer Reif's, creative and joyful professional development and mentorship for theater educators.

#Responsive Web

#Content Design

#Small Business

Introduction

Jennifer Reif is Curriculum Designer, Playwright, and Professional Development Coach for youth theater educator. Her workshops are currently promoted through a partner however registration and payment are handled by her independently. I worked with Jennifer to establish her first ever personal website for her service offerings.

My Role

UX Research and Design including: Interviews, Branding, Content Design, Wire framing, Prototyping, Usability Testing, and Web Development.

Scope

4 Weeks. Spring 2023.

Tools

Figma, Miro, Sqaurespace

Problem

While Jennifer intends to maintain her marketing relationship with Drama Notebook, the site that previously listed her courses, her goal is to create a personal brand identity, modernize and streamline the booking process for her customers, and offer more in-person workshops in the future.

Solution

I worked with Jennifer to design and build a responsive website that enables her to showcase her professional expertise, advertise her services, and engage with potential clients.

My solution was focused on making sure Jennifer’s core pedagogical values of creativity, positivity, and play, shone through the finished design.

"Play is often talked about as if it were a relief from serious learning. But for children play is serious learning. Play is really the work of childhood."
— Fred Rogers

Introduction

Focusing our research on user needs

My goal for research on this project was to understand what users look for when seeking out professional development as well as any struggles they have experienced in the past so that I could design an approachable and easy-to-use experience for my client.

How to achieve this?

Make comparisons

Get inspired by other development and coaching sites. What is working? What could be improved.

Discover motivations

Understand what inspires users to sign up for or reach out about professional development courses.

Unlock expectations

Learn what information users expect to find about workshops and mentorship offerings.

Competitive ANalysis

Transparency and personality stand out among competitors

At the outset of research I conducted a competitive analysis of websites from others offering workshops, coaching, and mentorship, making sure to incorporate websites focused on the creative arts as well as more general coaching websites.

🤔 Key Observations:

Sites with transparency in pricing and service offerings stand out.
There was a wide variety of potential solutions for registration amongst the workshops, development, and mentorship competitors we considered — these ranged from contact first, email-only, scheduling service, to Paypal — clearly this is a shared point of struggle for similar providers.
Supporting text, quotes, and imagery help define the personality and display the philosophy of the service provider.

Interviews

Taking our questions to the users

I sat down (virtually) with 5 users: all educators, and 2 who had previously attended one or more of our client's workshops.

Validated assumptions:

Users are looking for workshops aligned with their specialization or to help them fill gaps in their knowledge.

Interviewees noted that email-only or contact-first registration is awkward and needs fine-tuning.

💡 "Aha" an actionable insight!

Multiple interview subjects stressed the importance a finding a value-match in a potential professional development instructor.

Presenting a clear personal brand that is values-forward, conveys personality, and indicates expertise will be key to making our solution most effective for users.

"For me it comes down to affordability, accessibility, and resonance.
Value resonance is key"
— Hazel, User Interview

Persona

The primary user: individual teachers

With research complete (for now) and with newfound insights propelling my work, I was able to to develop user personas to guide the design process.

While Jennifer ultimately hopes to increase her outreach to administrators her core audience at the moment and the user whose experience we hope to impact the most is the individual teacher.

Product Needs

Visualizing overlapping goals

The end product needs to be easy for my client to maintain while still driving her business goals. At the same time it needs to offer a pleasant and seamless experience for her customers. Luckily some simple diagramming revealed ample overlap & complementary needs!

arrival at the problem

How can we most effectively help?

My research highlighted that it can be difficult for educators to wade through course and mentorship opportunities to find those that will best address their particular classroom struggles and goals. With that in mind I developed the following guiding questions:

➡️ How might we convey service offerings in a way that is transparent and enticing?

➡️ How might we direct users to the service most correct for them?

➡️ How might we streamline the registration process for users?

"It is the supreme art of the teacher to awaken joy in creative expression and knowledge."
— Albert Einstein

Sitemap

Prioritizing ease in navigation

One of these main design questions centers around how best to direct users to the service right for them and therefore a good sitemap is instrumental. As a result, this sitemap went through a robust series of iterations and review both in client and small focus group conversations.

Click for a closer look

Ultimately it features multiple paths to service offerings, has a flat structure so users don't have to dig for content, and provides ample opportunities to reach out an contact the service provider directly.

Task Flows

Groundwork for testing the design

With the sitemap complete, I outlined two flows for testing the user's experience. Ideally I wanted to validate that users are able to register for workshops and connect with the service provider directly for questions and more detailed offerings.

Click for a closer look

Wireframes

Picturing the solution

Next, using the user flows as a guide, I began to sketch out some low and mid fidelity designs for desktop and mobile screens.
‍
After two rounds of creative review with the client, these screens were in a good place and I was ready to move towards branding and prototyping.

Click for a closer look

"I want to know that a potential teacher and I speak the same language of education."
— Nate, User Interview

branding

Childlike but not childish

My client's services are for childhood educators but not necessarily for children themselves. This was the biggest struggle shet had experienced with defining her personal branding: How to capture the childlike energy of her work while still marketing to adults.

‍Ultimately I crafted a brand kit that balances youthful creative energy with touches of simple, elegant design. Values forward! Just like research indicated that the users are seeking.

Jennifer takes inspiration from her own acting career, her students, and creative storytelling like picture books. We used some of those same things for a mood board.

An elegant display serif balances and tempers the energetic logo mark.

Oranges and yellows are the colors that help the client feel most like herself so it was important to include them as part of the design.

Jennifer sparks creativity and imagination in others. That passion was the inspiration for this logo!

branding

Finishing the Hat

With a clear brand image defined I crafted high fidelity, testable prototypes. I developed these screens concurrently for desktop and mobile to ensure a seamless and responsive experience with the product.

About

Get to know Jennifer and learn about her background as an educator. While these screen aren't part of the testing flow they are important for our users to are hoping to find a professional development teacher with relevant experience who is a good value match!

Workshop Offerings

Browse Jennifer's regular reoccurring workshops at a glance to find the one thats right for you.

Variable Contact

Interested in offerings outside of Jennifer's regularly scheduled virtual workshops? Ample "contact me" CTAs throughout the site give potential clients the opportunity to learn more.

Key Screen

Anatomy of a homepage

We lead in with an SEO friendly H1 and a quote that speaks to her values as a teacher.

We kept the service offerings front and center on home rather than buried on a subpage.

It was important to the client that people have clear and repeated opportunities to reach out to her for more information.

We included a contact form in the footer of most pages.

"I have a dream too...it’s about singing and dancing and making people happy. It’s the kind of dream that gets better the more people you share it with."
— Kermit the Frog

Usability testing

Returning to the users

To test the viability of our design I ran moderated, virtual usability tests with 4 users.

Testing Goals:

Evaluate the overall impact and impression of our solution.
Identify and address user pain points.
Ensure that the look and feel of the site convey Jennifer's values to her potential clients.

While all participants were ultimately able to navigate the site, their feedback helped us identify key pain points that we could address in iterations.

Priority Revisions

Colors that stand out

During testing, users were asked to contact the service provider for more information about custom workshops.

However, testing showed 80% of users were quick to pass over the contact field when it's color matched the footer.

In iterations, I updated the colors to a primary variant to make this element stand out.

Pointing the way

Users were happy to find Regular Workshops and Custom Workshops on the same page...

However, the length of the page meant 75% of testers struggled to find the custom options.

In iterations, I added anchor links to help users visualize all page content without having to scroll.

Final Prototype:

next steps

Where do we go from here?

Return to the users for further testing of iterated flows.
Build and launch finished design in Squarespace.
Develop post-MVP pages: resources and mentorship.

Reflection

Personal takeaways

I came out of this project with a couple important learnings

Compromise and advise. Working closely 1-1 with a single client for 4 weeks led to many important conversations about personal taste vs. good user experience. I learned a lot about articulating accessibility and design needs while also looking for ways to accommodate client wishes. I am very satisfied with the final product as synthesis of both.
Design for longevity. A key aspect of this design was that the end product needs to be easy for the client to maintain and update without advanced help. This occasionally meant sacrificing "fancy" design elements in favor of ease.