top of page
Rethink Yearbooks needed to reduce the bounce rate on their website.
Figma
3 week sprint
Project Manager
March 2023
Group Project for GA
- UXDI Certification
Personalized Yearbooks
made by AI facial recognition software and machine learning
School administrators, Parent - Teacher Association members, and students
on yearbook committees at several different California elementary schools, middle schools and high schools are interested in using the unique technology
that Rethink Yearbooks has to offer;
but the users are having a hard time understanding the value of
the Rethink Yearbook’s technology and how to approach other school-board members to recommend the yearbook vendor.
My team and I redesigned the desktop version to have a new Information Architecture and Content Structure that organizes and clarifies the information on each page to help users understand the value of the product.
Original Desktop Website of Rethinkyearbooks.com - Feb 2023
UX Design made in Figma - March 2023
Rethink Yearbooks Implementations to the Original - April 2023
Research
Client Goals and User Research
What information do we already know from the stakeholder and what is their desired direction and vision for the company?
- Customers were finding the site but not staying.
- The messaging on the website was unclear to customers.
- The layout of the site and some of the UI needed to be re - visited.
Why are users leaving the site?
44% of users bounce before they fill out a form or schedule a meeting, which are the two main CTAs on the landing page.
Strengths, Weaknesses, Opportunities, and Threats
A SWOT Analysis of the "potential customer to customer" emails that may reveal some answers...
Strengths
Weaknesses
Rethink Yearbook's owner showed some great strengths in her emails to customers;
Very Knowledgable and shares lots of facts about services and how they compare with competitors.
Opportunities
There are opportunities here to put the information in the emails onto the website in an
easy-to-understand way to attract potential customers.
There is a lot of great information in the emails but all of this information needs to be communicated on the website.
Users tend to want enough information on the website to make a decision quickly, without taking the extra time to contact a person.
Threats
We think customers felt threatened by the risk of change. Changing yearbook providers takes a lot of time and energy communicating between school faculty members, students, clubs, and parents who may or may not be on the PTA of their child's school.
Competitive and Comparative Analysis
These are the other companies offering yearbooks to schools.
We looked at their features to see if there was anything Rethink Yearbooks
could be missing on their website to help them keep their visitors.
We found a lot of great things that Rethink yearbooks website had and a couple things it was missing compared to the other yearbook vendors.
Rethink Yearbooks was missing a clear mission statement to help visitors understand how the company is bringing value to consumers.
We also found a couple of great opportunities for Rethink Yearbooks to add extra features that their competitors did not have, up-front pricing and
a brochure or sample book.
C + C Analysis Conclusions
From the analysis we knew we had to create more content for the website so that the users knew exactly what they were getting; which promotes trust to new users.
Content Needed
- Mission Statement
- Up - Front Pricing
- Clear Product Description
- A View of the Product
Current User Flows
These buttons had incorrect lables and led users to parts of the website they didn't know they were entering.
"bring to your school" CTA opened a calendar to schedule a meeting and the pricing page had no information about pricing, only a form to get an estimation based on your school requirements and parameters.
Based on our previous research, we know users were frustrated by these buttons so we included this to help define our problem.
Current Site Map
After the C+C Analysis, we identified the site map to see where we could
re-structure the site and add content so that the site's information is clear and understandable in order to be user friendly.
A lot of the Call to Action buttons were incorrectly labeled.
For example, the "how does it work" button scrolled down the page to the
"how does it work' section, which was confusing to the users we interviewed.
The "bring to your school" button led users to a calendar to immediately schedule a conferencing video call which was off-putting to some users.
The "pricing" page did not show any pricing and had the users fill out a form and register their email just to receive basic information about the product.
All of these navigation issues were negatively mentioned by users so we aimed to create buttons and pages that were labeled correctly and informed users about the company and product.
Usability Tests
My Team and I decided to conduct usability tests to help understand and prove why users were leaving the website.
Do the users understand the product from the current website?
We gave users two tasks to complete:
1. Can you find information about pricing?
2. How would you get information about how to bring the yearbooks to your school?
Test Takeaways:
User 1
1. Feels like too much work to get more information about pricing or how to bring the yearbooks to your school.
2. The mission statement / explanation of the product feels weak and doesn't make you want to learn more or purchase.
3. It feels unclear as to what Rethink Yearbooks is actually doing with their services or products.
4. The buttons felt misleading (bring to your school / pricing).
5. The "Why Rethink Yearbooks" doesn't really tell you why. It's a great opportunity to tell their story but they don't do that.
6. The order of things on the homepage doesn't feel right. I feel like the "how does it work" and the "why rethink yearbooks" should be before the "features" and "testimonials" should be last.
User 2
1. The landing page doesn't clearly show the content in a way that is understandable.
2. The concept is cool but the website doesn't convey it in a way that makes the user interested.
3. The technology sounds beneficial but doesn't understand why personalized yearbooks are valuable.
4. Liked that the social media posts were imbedded into the page.
5. Liked that the service to make the personalized yearbooks by the company was no extra cost to the customer.
6. The graphic on the home page was confusing, thinks it should be above the CTA's so the user knows what the CTA's do.
7. The hero image is brutally cut off when user scrolls down.
8. Liked the notion page but knew that people who were not familiar with notion might find it confusing that a website button takes you to another page.
User 3
1. Doesn't want to fill out the form under "Pricing".
2. Thought it was weird that when they clicked "Bring to your School" it goes to making an appointment.
3. The "Pricing" link appears to be a broken dropdown menu.
4. Found all relevant links but is still confused about what they are looking at.
5. Understands that the company was trying to go above and beyond traditional yearbooks and customize pages for each student.
6. Confused by the flickering of the photos on the customized student pages graphic.
7. Thinks the different type faces and information looked cluttered on the landing page.
Conclusions for the Usability Tests
Task Analysis
100% of usability testers did not complete the tasks and concluded that they didn't really understand exactly what the product provided from the website they looked at.
How easy was the initial site's navigation?
100% of usability testers thought that the navigation was pretty confusing
and "weird"; they mentioned the labeling on the CTA's was misleading because the buttons didn't do what they said they were going to do.
Were users frustrated by the experience in anyway?
100% of users were pretty frustrated by the calendar link and the pricing form. They thought it was too soon to schedule a personal meeting with someone and just wanted to find the general information they were looking for.
What did users like most about the site?
100% of users liked the idea of the product and the technology behind it, they thought it was beneficial to be able to purchase a personalized yearbook.
User Interviews
Who are the users of RethinkYearbooks.com and what is on their mind?
Affinity Map
Parents, Teachers, and Students who are involved with the Yearbook Committee or have interests in school yearbooks.
Research Synthesis
Critical Analysis of Research
What information did we find ?
- Analyze Affinity Map of User Interviews.
- Discovering a story behind user journeys.
- Defining user needs and frustrations.
Affinity Map Analysis
Since the client's goal was to understand why users were leaving the site, we decided to focus on the problems with the website and the content structure that was contributing to some of the user's frustrations, as we saw above.
Users favor simple and easy to use products.
Most users had suggestions that might improve the technicality of the website. While these were helpful, we ended up focusing on the content and the user flows related to the users first discovering the website and staying interested enough to schedule a consultation with Rethink Yearbooks.
We needed the users to understand the value of Rethink Yearbooks as quickly as possible when visiting the website.
We found almost every user was interested in RethinkYearbooks product because it is unique and serves a valuable purpose. This made us look at the mission statement of the company and indicated we needed to incorporate an "About" section that easily showed users how valuable the company's product is.
We also realized that time was a huge factor in our user journey. Students, teachers, and principles on the yearbook committees seemed to have lots of time limitations and scheduling a consultation with RethinkYearbooks seemed to be too time - consuming. This coincided with the information we received in the usability tests and directed us to put as much information as possible on the website so that users did not have to take time out of their busy schedule to book an appointment that might waste their time.
One of the main areas of information that was missing from the website was the pricing information.
Users that are worried about the cost and don't have a lot of time to find a yearbook vendor may not see the value of personalized yearbooks on a website that doesn't have digestible price information. This may be a cause of a high bounce rate.
We gathered lots of other valuable information that we could use for future designs, but wanted to focus on the client's goals and were contracted to only 3 weeks to work on the website pro - bono.
We used this valuable information to create personas that represented which actions each person would take on the website.
Personas
These are the people that use the website the most. Each of them visit the website for a slightly different reason.
A "Decision Maker" is likely to skim the information on the website to see if it's easily understandable and if the products fits their school's needs, and then willing to schedule a consultation if they're interested enough.
A "Parent" is likely to find the website to see if the product fits their student/school's needs, and then refers the website to a "Decision Maker."
A "Student" is likely to find the website interesting and then refers the website to a "Parent" or "Decision Maker."
Writing these personas allowed my team and I to be able to assess the frustrations and needs of the users in order to define a problem statement to then find solutions for those problems.
Define Problems & Solutions
Which problems are we solving for?
How can we use the information we found to our advantage?
- Problems and Solutions.
- Defining new Information Architecture and User Flows.
- Content Inventory and Strategy.
Problem Statement
Users want to find an easy - to - use yearbook vendor because their school does not have a lot of time or money to spend on personalizing or making their own yearbooks, however finding a cost - effective yearbook vendor that is easy to order from is rare."
So,
How Might We. . .
- Redesign the website so that people can view cost and all available options?
- Make the website more intuitive to use and navigate?
- Explain the technology using clear visual examples?
New Site Map
We added an "About Us" section to dedicate a place to understand the company and what its mission is, and re - labeled sections for understandability.
We placed the FAQs in the footer so users still had the option to look at in - depth information that the client took so long to write.
New User Flows
These flows determine the functionality of the prototype and the user journeys that the personas might flow through.
These flows may also function as a foundation to build wireframes from.
Content Inventory
We edited most of the copywriting on each page and added a biography of the owners of the company and a dedicated mission statement.
Mission Statement
Landing Page Copy
Edited the original F.A.Q.s and translated into a "How it Works" Page
We also added a pricing table to help users get a feel for the complete story.
These are just some of the wireframes we designed, let's back up to look at our sketches that show how we arrived at these wireframes...
Design
Brainstorming Design Patterns & Conventions
Creating solutions for users
- Sketching Content Placement in Design Studio
- Designing Wireframes
- Prototyping and Testing Ideas
Design Studio Sketches (Content Placement)
Each Team Member sketches out design ideas for specific wireframes, these were some examples of our landing page and the confusing graphic that we were trying to clarify.
Other Team Member Sketches
My Sketches
I thought a comparison chart that shows a sample of the actual yearbook helped elucidate the differences between the traditional yearbooks and the non-traditional (personalized) yearbooks. Everyone liked my idea so we designed it into the hi - fidelity prototype to see what the client thought about it.
Mid-fidelity Wireframing
We used our sketched out ideas to design wireframes in a lower fidelity so we could quickly prototype the functionality and test that before we added colors or hi - resolution images.
We even added a marketing tip for the company, giving them the idea to add a discount for customers that successfully refer them to a business!
Prototyping
We added functionality to the wireframes in Figma, which allowed us to create a Mid - Fidelity prototype we then used to test our solutions with real users in our Usability Tests.
Here's a video of the mid-fi prototype:
Usability Testing the Mid - Fi Prototype
My team and I gave users three different scenarios in order to test the functionality of our mid-fi prototype.
Depending on the user's age and profession, we either gave them the "Decision Maker" user flow, the "Parent" user flow, or the "student" user flow.
100% of users completed their task and gave us lots of content suggestions to think about iterating on.
User Praise
User Praise
"The text on the landing page was easily scannable."
"I thought the form was straight forward and easy to fill out."
"I hate the fact that I have to give my information away to a stranger just to get a price quote, so this pricing table makes it easier for me to know what I might be getting into."
"Really loved how everything I needed to find was on the top in the navigation bar."
"I'm excited about the 'how it works' steps on the landing page."
User Criticism
"I expected the 'refer us' section to be in the 'about us' section."
"I would rather copy a link to send in an email, rather than reading through a letter and editing an entire block of text."
"As a school parent, I would want to know the general fundraising margin the school actually puts there so I know how much each book is going to cost."
"I am wondering if I have to buy a yearbook through the school only, or can I just pop in and order a yearbook for my child only?"
"As someone who understands personalized yearbooks, I'd like to see more features about the personalized yearbook on the landing page, and mentioning the traditional yearbook as a less expensive option."
"It would be awesome to see an option to get a discount if the school signs up for a multi-year contract."
"Having an understandable visual example on the pricing page will help this table."
"The copy on the landing page could be more direct."
"I prefer more a more sophisticated design for the pricing table."
"I don't like the fact that I have to give away my information to a stranger just to get pricing information."
"I would have liked a better description of the personalized options on the pricing table to get a clearer picture."
"A link to a sample of the yearbooks on the pricing page might help people who didn't read the content on the landing page or 'how it works' section.
"It might be helpful to add the standards of other school's decisions."
"It's hard to tell if you do both traditional and personalized yearbooks by just scanning the landing page, or if you're just showing the traditional yearbook to help people understand the personalized yearbooks."
"When I see 'get a quote' it makes me think I have to give out my information to get the quote."
This usability test was very successful, the users identified lots of areas for improvements which is exactly what we were searching for."
For the Hi-Fidelity Prototype we changed a lot of the copy and specific content on the pages to address some of the users suggestions.
Hi - Fidelity Prototype
For this prototype we also added our colors, typography, images, and included missing elements like content we were waiting for the client to provide.
As you can see, we added a "Refer Us" button at the bottom of the "About Us' page to encourage easier navigation and to keep interest flowing in the user journey.
We also added an orange asterisk to indicate the popular choice for fundraising margins and number of pages so the user feels more educated on the choices they're making.
Usability Testing the Hi - Fi Prototype
After adding visuals, we tested the prototype for usability, asking the users to complete the same three task scenarios as before. This is what they said.
User Praise
"I think this website looks way better than the original website!"
"The table is enough information to know what math to use to multiply to get a price for multiple kids."
"It's nice to see the about us section, it makes it easier to refer the company to people."
"The home page is really easy to read."
User Criticism
"I wonder if the 'How it Works' section should be a little more above?"
"I think personalized should be the focal point over traditional."
"I was confused at what type of kids I should count for the total number of kids, should I use every student in the school, or only the students who wanted to buy the yearbooks?"
"I think the 'as easy as 1, 2, 3' in the information section was contradicting the fact that there is a lot of text on the page."
"I was confused at where to select the calendar in order to schedule my appointment."
"I always want the option to put a meeting on my apple calendar."
"The 'how it works' page is really wordy, a video might help."
"Seeing more successes on the homepage would be empowering."
"I would love the prices to identify an addition or subtraction to clarify how to do the math on the pricing table."
"I would love to see a digital yearbook."
"I think the asterisk could be on the top table so you can see it before you need to scroll."
"A description for the Fund Raising Margin might be helpful, maybe a parenthesis on the table is more scannable?"
"I think subscription packages might simplify the price calculation problem."
"Putting prices next to the yearbook descriptions on the landing page might make is easier to tell the difference."
"The bullet points in the yellow card comparison are confusing because they're not really talking about the same thing."
"It's a huge reach to have people find time to make a call, having a video would simplify the communication process."
This round of usability tests were extremely insightful and helped us learn a lot about UX and the processes behind it.
Deliver
Delivering solutions to the client.
Presenting our ideas to the client and receiving feedback.
- SlideShow Presentations
- Conclusions
- UX/UI Project Management Takeaways
Slideshow presentation theme & outline
Conclusions
Changes from the Original Website to our Redesign
We added an active, hi - definition photo of children making memories to the landing page, an industry standard.
We changed the Information Architecture and relabeled the main content sections of the website with a handy new dropdown menu.
We tried to clearly show the comparison between products, the 'traditional' and 'personalized' yearbooks so that users may understand what 'personalized' yearbooks meant.
We added a price table to add to the value of the website.
We edited the copy to clarify any misconceptions in the messaging for Rethink yearbooks.
We added a breakdown of what the company offers for all yearbooks.
Overall, we redesigned the website for easy understandability in order to keep the users on the website long enough to schedule a consultation with the owner of the product. We are only able to see the improved analytics after the school year has passed because that is when all of the company's customers have used the site to its full potential.
Next Steps
After our hi - fi usability testing, our next steps in iterating on our prototype would have been...
...adding an instructional video, either of the sample yearbooks or about the process behind figuring out pricing and ordering the yearbooks.
...creating a price calculator or pricing packages that made the ordering process for schools quick and easy.
...adding a user flow for parents ordering yearbooks and yearbook committees that want to be able to update their yearbook designs and status throughout the school year / manufacturing process.
...Focus on targeting wider audiences, like preschools and membership / athletic clubs that students participate in.
User Takeaways
People suggested that the personalized yearbooks were really unique and wanted to see more samples of the yearbooks.
People were also wondering if they could just design their own yearbooks with Rethink Yearbooks instead of buying the yearbook by signing up with their student's school.
100% of users recognized the difference between the original website and our redesign and thought the colors were nice and that they made the website feel more clean - cut, and soothing. They also thought that the content of the redesign was overall more understandable than the original website's content.
What I learned as a UX Designer and Project Manager
The UX process is extremely valuable especially when encountering industry areas that may not be as familiar as others.
Project Managing UX takes trust in UI designers and developers in order to let go of control of the smaller details of the interface aspect of the project to successfully and consistently schedule interviews to learn about the developing product.
bottom of page