Me@Campus Home Page
Redesign of the mobile and web homepage for Me@Campus
Project Type
UI, UX
Tools
Figma
Client
Walmart
Year
2024
Problem
The homepage presents challenges in user comprehension and navigation, coupled with the current algorithms lacking precision, which impacts the user experience negatively. Additionally, the business faces constraints in integrating new entry points seamlessly
Role
As a key member of a two-person core feature design team, I often collaborated with my design partner on solutions. While my designs are showcased below, it's important to note that the conceptual foundation, including algorithmic and strategic approaches to user- and data-driven functionalities, was a collaborative effort with my design partner. Our teamwork ensured that the designs were not only aesthetically pleasing but also grounded in a solid understanding of user needs and system capabilities.
Solution
In the redesign process, we focused on enhancing user interaction, accessibility, and sensible algorithms guided by comprehensive user research and best practices in UX design as well as returning to adherance to our main design system.
Kickoff
Held a design thinking session with key stakeholders which included the director of Engineer, product, and a few designers.
We collected technical constraints as well as bandwidth for implementation. We nailed down what were our our goals and biggest priorities in the redesign.
We also collected a list of necessary ADA improvements and other issues that were not consistent with best practices.
We had to take into consideration future entry points for additional domains as well as all other improvements that were going to have an effect on the homepage.
Research
Tree testing
Incorporating previous research about our content cards, touch targets, etc.
Design
Myself and other other core lead designer, worked collaboratively to outline constraints. We each proposed a set of redesigns.
We worked back with our 4-in-the-box to present each design concept, and my concept was chosen to move forward. It also performed the best in testing.
Key improvements
Touch Targets: We increased the size of touch targets within the greetings section to accommodate mobile users, addressing previous issues of small, cluttered touchpoints laden with unnecessary information.
Section Clarity: We refined sections based on user and data activity metrics, such as user flow, click frequency, and engagement, ensuring a more intuitive navigation experience.
Call-to-Action (CTA): Empowered by user research insights, we streamlined the design to feature a single, prominent CTA, enabling us to make entire components clickable and significantly enhance user interaction.
Scrolling Experience: In response to user statistics indicating a preference for vertical scrolling, we minimized carousel elements in favor of a more straightforward, scroll-based navigation, aligning with users' natural browsing habits.
Typography and Hierarchy: We revised the typography to improve readability and establish a clearer visual hierarchy, making content more accessible and engaging.
Component Optimization: By selecting components with a 1:1 code base that had undergone rigorous accessibility testing, we not only enhanced the user experience but also streamlined the development process.
