Mucktracker
The Challenge
Clarify their Mucktracker’s audience for their core business, market efficiently the website to users, and educate effectively their customers on their product and features.
The Process
Product Research
Affinity Mapping:
They key insights that stood out to us the most were:
It is integral for educational software to be affordable and applicable to our curriculum.
Users expressed there is a need for students and educators to be able to differentiate between fact and opinion from news sources.
It’s important to source information/news that includes diversity and a variety of representation for my students so that they feel like they can relate
Educational resources need to be able to reach all students in different levels of learning.
Personas
Persona: Rachel
Usability test 1
Before redesigning Mucktracker's website, it was important to understand how users interact with it today. We conducted usability tests to uncover areas of opportunity and any pain points that may occur while navigating the website.
We provided users with four separate pages within the website to perform tasks: a home page, an about page, a sign-up page, and a curriculum connections page.
Mucktracker’s education/understanding was our main goal and it was measured, along with the searchability of the website.
Identifying
Usability Issues
home page: All users said there was not enough information on the page to gain an understanding of what the platform is. Most users struggled with the navigation
sign up page: 2 users wanted to find information on the exact curriculum provided in Mucktracker.
about page: 50% of users still didn’t understand what the platform had to offer after reading the about page and felt the website was underdeveloped to gain an understanding of the platform.
curriculum connections page: 50% of users had difficulty finding the page and would’ve liked to see the tab in a different spot on the top nav bar
Heuristic Analysis:
To further identify usability issues with Mucktracker’s website, we conducted a heuristic analysis.
We considered the 3 major principles that are most important to our user, and prioritized those areas of opportunity:
Help and documentation-major
No search bar and no FAQ or Help Page minimizes the user’s ability to seek help when needed. Users need a way to easily find contact information should they run into further issues.
Consistency and standards-poor
Confusion over curriculum connections meaning and specifics behind “media literacy”
There was a general confusion over the term “curriculum connections” and specifics behind what “media literacy” meant.
They found themselves questioning whether certain terms meant the same thing, thus bringing them to a different area of the site than where they wanted to be.)
Recognition rather than recall-poor
users are having to dig for information that should be available on the first page they encounter (the home page)
Flexibility and efficiency of use-poor
only one way to access sign up page, nav bar “more” tab adds an extra step
Ideation
With the insights from our research in mind, we prepared for a design Studio to ideate changes to be made to the website.
Process:
We focused on the Home Page, About Page, Curriculum Connections Page, Sign Up Page and prioritized the following user’s needs:
Education around what Mucktracker offers, and what it is.
Clear navigation and hierarchy of information
The Solution
With the time constraints at hand, we went from low fidelity sketches to high fidelity sketches knowing
we would continue to ideate and conduct further usability tests.
We discovered insights by testing our prototype which provided helpful recommendations for the client.
Home Page
Insights:
Usability testing proved that 0 users were able to explain what the platform offered from the home page alone.
50% of users said they wanted info from the About page or the Curriculum Connections page to be on the Home Page
Solution:
Added a page description as the sub-header, moved the “Three Pillars” and “Online Tools” section from the About Page to the Home Page
Better educate the user on what Mucktracker has to offer (or what to expect from Mucktracker?)
Added a section for potential Mucktracker image
Captivate the user and provide an aesthetic that attracts users.
Give users an example of Mucktracker’s offerings
About Page
Insight:
Users felt the page was too underdeveloped to gain an understanding of who Mucktracker was
Solution:
Moved the text describing Mucktracker from the home page to the about page.
Moved “Rethinking Media Literacy” towards the top of the page and added icons to text.
Provide an easy to scan and engaging infographic on what media literacy means.
Inserted the Muckracker page on to the About page with name cards for each Muckracker.
Provide a sleek, interactive way for users to learn about famous Muckrackers through history.
Curriculum Connections page
Sign Up Page
Insights:
50% of users felt the description of the lessons were too vague. They were not confident that the lessons would fit into their curriculum.
The users expressed importance in having lessons that were on the students level and in usability testing they cared about the subject pertaining to the subject that they teach.
Solution
Added context to elaborate on the purpose of the page and what content can be found within it: providing clarity on page’s purpose and promoting consistency
Created a horizontal scrolling carousel to house featured lesson plans and organize them by subject and grade level (This condensed the content into one familiar area and allowed users to easily find the lesson plan associated with their curriculum with an easy to use feature.)
Added an icon signaling to users that the carousel offered a side scroll feature to view more. (Provided users with visibility of system status and error prevention.)
Links to activities individual pages within the carousel (gave activities their own section in order to not overwhelm the users)
Insight:
50% of users were unsure what they were signing up for and felt the format of the form did not provide a sense of credibility.
Solution:
Moved the sign up button to the top navigation bar. this provided consistency and allowed the user access regardless of what page they landed on.
Changed the term “Sign Up” to “Join Our Waitlist”. this provided clarity to the user and an attempt to convey that the product isn’t live yet, but is a work-in-progress
Developed a sign-up form within the website and removing the external form within Google Forms-Having the form within the website instead of through a third party website provided a sense of credibility from the user and increased trust
More context explaining the product: Providing the user with a detailed description of what specifically they are signing up for.
Adding a “Success!” pop up once the form has been submitted. Allows the user to know their form has successfully been submitted and promote visibility of system status.
Takeaways and next steps
If given more time, our next steps would include:
USABILITY/FUNCTIONALITY
Conduct more user testing with our hi-fidelity wireframes.
Test sign up flow.
Check for understanding.
Check for desirability of content.
INFORMATION ARCHITECTURE
Conduct a card sorting exercise to determine the taxonomy for primary navigation.
Test revised navigation, and build in alternate ways to navigate to same content.