ALISIA CHEUK
Wireframe Assignment
Thank you for the opportunity to share my redesign approach for the Stanford Graduate Business School Programs page. I approached this exercise with a focus on improving usability, clarity and engagement. These are key factors in supporting prospective students as they explore Stanford’s academic offerings.
After auditing the current page, I identified a few consistent challenges: the layout feels dense and difficult to scan, navigation lacks clear pathways to specific programs, and calls-to-actions are easy to overlook. In response, I created a redesigned wireframe that reorganizes content for better flow, clearer sectioning and labeling, and prioritizes visual hierarchy to help users find key information quickly.
What follows is an overview of the issues I identified, a walkthrough of my wireframe and and explanation of the design decisions I made to create a more intuitive, goal-oriented experience. One that better reflects the caliber and clarity of the GSB brand.
Usability Summary & Opportunity for Improvement: Stanford GSB Programs Page
1. Complex Navigation and Unclear Pathways
The current structure—combining a top navigation bar, mega menu, internal links, and a pull-filter tool—creates a fragmented experience. Navigating between category-level program pages, individual program detail pages, and returning to the main Programs page isn’t intuitive, and can easily disorient users.
2. Overwhelming Amount Content
There’s a high volume of content presented without clear visual or contextual grouping. The lack of hierarchy makes it harder for users to quickly scan or compare options, leading to potentially being overwhelmed.
3. Limited Mobile Optimization and Clarity
On mobile, while the layout is technically functional, it’s not fully optimized. The dense text, buried calls-to-action, and excessive scrolling diminish usability and make it harder for users to take action.
Stanford Graduate School of Business: Program Page Redesign Wirefame
Usability Redesign Walkthrough Recommendations: Stanford GSB Programs Page
1. Simplify and Clarify the Navigation Structure
Right now, the navigation feels fragmented—there are multiple menus and menu styles competing for attention, which makes the user experience feel unintuitive.
Recommendation:
-
Streamline the site hierarchy so that each program clearly lives within a parent category.
-
Introduce breadcrumbs to help orient users and allow for easy backtracking.
-
Keep the sub-navigation for Programs persistent using sticky nav—this keeps users grounded as they explore deeper content.
-
Apply consistent naming conventions across all menu items to make things easier to follow and help users get familiar with the site structure.
2. Improve Content Organization
The current page feels content-heavy and hard to scan. There’s a lot being presented without a clear visual hierarchy.
Recommendation:
-
Move from a pull-down menu to a fixed left-hand filter tool with checkboxes. This makes filtering options more visible and easier to interact with.
-
Group programs into logical sub-categories and use collapsible content to reduce visual noise and page length.
-
Swap out text links for clearly styled CTA buttons to guide users more effectively through the experience.
3. Optimize for Mobile Use
On smaller screens, the current program list becomes overwhelming, and CTAs are hard to spot. The layout doesn’t adapt well and requires a lot of vertical scrolling, which impacts engagement.
Recommendation:
-
Break up the long list by using collapsible sections or swipeable cards for easier browsing.
-
Use sticky or persistent navigation on mobile so users don’t lose context as they scroll. Pagination is another option if content needs to be chunked.
Implementation Considerations
​The steps I would take to move from wireframe to a working prototype would be:
Step 1: Strategic Planning
Meet with content strategists, editorial leads and program marketing team to review the wireframe to confirm that the proposed wireframe structure aligns with the goals and messaging priorities. Gather feedback on content needs and identify any issues or content gaps.
Step 2: Project Planning
Work with creative and UX designers to translate the wireframe into an interactive design prototype making sure to apply Stanford GSB’s brand/style guide (colors palette, fonts, icons, etc.) Gather and manage all creative assets.
Step 3: Production & Testing
Work with front-end developers to identify the scope and technical feasibility of interactive elements such as the collapsible content, breadcrumb navigation and the compare tool. Implement the CMS for the content blocks and set milestones for production, mobile response and QA testing cross-browsers.