Design process for new user flow
Walk-through of the key phases of the UX process.
Product Definition
Problem statement
Users need an easy to navigate site organization in order to find study materials.
Product requirements
Stakeholders and product team have decided to implement a new information architecture to improve the user experience
The task includes new site navigation and new templates reflecting a subject to topic to asset flow.
Product team provided a project architecture and basic organizational diagrams.
Research
User story
“As a history student, I would like to quickly look up historical events and learn about the the people involved and why the event occurred,”
Research findings and insights
User feedback in support tickets and surveys stated, “I can’t find what I was looking for,” or, “Your site doesn’t have what I need.”
Information architecture research completed by the growth and content teams.
Analysis
Competitive analysis
Our primary competitors keep most of their content behind a paywall. One secondary competitor organized their content by certification goals, and another in a general wiki-format.
User personas
Existing user personas and user stories were referenced in determining the the various content modules.
Task analysis
Two user flows were identified that would require new template designs. One for the learner story and one for the test-prep story.
Design
Wireframes
Collaboration with the product owner and other designers on the whiteboards to identify the various sections that should appear on on the new pages.
Prototypes
Interactive prototypes were created in Figma and design decisions were presented to stakeholders, highlighting what was the result of user research.
High fidelity designs
Design began, utilizing the existing design system. Several iterations were made after presenting designs to the stakeholders and design team members.
Design System update where necessary documentation and new components.
Cross-functional communication
Once the designs were approved, notations were in the Figma files for the development team calling out the source of the content, where to find existing code, and the various states of the interactions.
Validation
Usability test plan
Once the templates were completed, the pages were deployed to production in an A/B test to track engagement while the SEO team monitors the impact on keyword ranking in search engines.
Additional quantitative data was captured with click-maps and user surveys.
User feedback and observations
Internal user testing with the content and architecture teams to insure the design met the requirements and followed the prescribed navigation patterns.