Introduction
AppleTrack.com, a prominent website dedicated to tracking leaks related to Apple products, was in need of a transformative redesign. The website compiled the latest leaks from various sources, rating each one's accuracy, which ultimately served as an informative hub for Apple enthusiasts. To revamp the website's UX, we embarked on an elaborate journey, encompassing user research, wireframing, mock-ups, prototyping, and user testing.
Finding the Solution
User Research
The project kicked off with user research. We surveyed a small pool of current users to gauge their likes and dislikes about the existing website. Users expressed an appreciation for the website's unique content but voiced concerns about the user interface, finding it less intuitive and outdated.
Subsequently, we engaged a group of individuals who were not aware of the website but were avid Apple fans. The objective was to understand their expectations and potential pain points when interacting with such a platform. A common theme emerged – they desired a sleek design that mirrored Apple's aesthetics while ensuring an easy-to-understand interface.
Wireframes
Armed with valuable insights from our user research, we developed a low-fidelity wireframe that reflected users' needs and expectations. The wireframe focused on improving the site's information architecture and enhancing the user flow to make navigation more intuitive.
Once the low-fidelity wireframe was complete, we transitioned to creating a high-fidelity wireframe. The final design was influenced heavily by Apple's own website design. The goal was to build a sense of familiarity for Apple's enthusiasts, reducing cognitive load and increasing user satisfaction.
Figma components for different sized articlesMock-ups
The transition from wireframes to mock-ups was a crucial stage. I leveraged Spline to design a 3D mock-up of the website as seen on a MacBook Pro. This realistic portrayal allowed us to envision the user interaction and identify potential design improvements.
Prototypes
Subsequently, I used Figma to build a clickable prototype, simulating the real website's functionality. It enabled us to experience first-hand the user journey that we designed, allowing us to identify possible enhancements and shortcomings in the early stages.
Finalizing the Work
User Testing
Our prototype was publicized on Twitter, tagging Sam Kohl, the owner of AppleTrack. Although the post didn't gather substantial traction, Kohl acknowledged the effort, describing it as an "awesome concept". However, a few months later, due to lack of traffic and revenue, Sam decided to discontinue AppleTrack, expressing doubts that the redesign could solve the problem.
Key Design Aspects
The redesigned website reflected the look and feel of Apple's own website, boosting familiarity and reducing user confusion. I had prioritized accessibility, ensuring compliance with WCAG guidelines. The design emphasized simple yet effective onboarding to aid new users in their navigation journey.
Example article in both light and dark modeUX Writing
The writing was integral to the overall user experience. I used a simple, concise, and clear language in line with Apple's brand voice. I ensured that the information provided was easy to understand, contributing to the website's overall ease of use.
Conclusion
Despite AppleTrack's unfortunate closure, this project provided significant learnings. From understanding users' needs to creating wireframes, mock-ups, and prototypes, each step was crucial in building an engaging user experience. Although the design never went live, it stands as a testament to the importance of user-centered design and how it can transform the way users interact with digital platforms.