Search across Web & App
OVERVIEW I Context Defining the MVP Layout Interactions Visual Design Final Screens
UI Designer - Interaction Designer, Visual Designer,
Rapid Prototyping
ROLES
TEAM
Kuchar - Creative Director; Lucy - Lead Product Designer ; Tayo - Senior Product Designer; Alex -Senior Product Designer; Ben - Project Manager
TOOLS
TIMELINE
Mar - Apr 2023
Launched P1 in March
Figma
● C O N T E X T
The Search continues..
As part of our extensive redesign in building a more visual and modern approach to the brand, one of our user’s biggest struggle points has always been our search function as it uses web search instead of searching it natively (shown in video down below).
We wanted to improve upon this and I was carried along the project as a UI Designer, working together with my seniors designers and devs to meet our P1 & P2 goals. This project has been ongoing for the last few years but it hasn’t taken off till now so we had good groundwork to built upon
Video above: Our initial search engine
● DEFINING THE MVP
🧙 Search and you shall see results
As we prepare to launch our first version, we wanted to provide an overview of our minimum viable product (MVP). The goal of the MVP is to get the core functionality in front of early customers and collect feedback to help further develop the product.
For our initial launch, the MVP will focus on the three key features that provide the most value which are:
1. Search Page 2. Results 3. Filters
Some features that will come later include more advanced customisation, filter options and enhanced analytics and reporting. For the MVP, we aim to have a polished experience for the core use case to prove out the value and gather feedback. Additional development can then focus on expanding functionality based on customer input.
SEARCH PAGE
LOAD
RESULTS PAGE
FILTER OPTION
● LAYOUT
When developing our platform, one of our key challenges was to create a design and user experience that seamlessly adapts to both 💻 web and 📱 app interfaces. These breakpoints played a crucial role in ensuring that our platform remains responsive and performs optimally across a wide range of devices. By setting clear guidelines for when the layout should adjust, we were able to strike a balance between flexibility and consistency in the user interface.
Agile Results Page
XS: 320px
┃12 COL FIXED
┃8 COL WIDTH
┃16px GUTTERS
S: 480px
┃12 COL FIXED
┃8 COL WIDTH
┃16px GUTTERS
M : 768px
┃12 COL FIXED
┃16 COL WIDTH
┃16px GUTTERS
L : 1024px
┃12 COL FIXED
┃48 COL WIDTH
┃16px GUTTERS
XL : 1536px +
┃12 COL FIXED
┃48 COL WIDTH
┃16px GUTTERS
The results page is undoubtedly the page I spent the most time on during my design process, especially for desktop. It was crucial to find a way to display the results in a manner that not only aligned with our new design approach but also offered a user-friendly experience.
To achieve this, I delved into exploring different possibilities. I experimented with various layouts and designs, striving to present the results in the most visually appealing and informative way.
⦿ LIST DOWN CARDS SYSTEM
This design approach is most favoured amongst our competitors such as New York Times, Aljazeera and Financial Times. It’s also an approach that’s used by the likeliness of Medium and Google, why? It hold good design practice as it follow our natural reading habit and allows user to scan information well as the relationship between imagery and type is up holded well.
⦿ GRIDS CARD SYSTEM
Taking inspiration from design principles used by tech industry giants like Netflix and Instagram. I have carefully crafted a visual first approach that is both aesthetically pleasing and intuitive to navigate. This card system is the one that is most in-line with our new approach as similarly we are planning to release these cards into our homepage in the future.
Ultimately, after a discussion with our editor and executive team - they all preferred the GRID system as it more in tune with what the re-brand is heading towards and from that point on, we continued our development in making them in different breakpoints.
● VISUAL DESIGN
Results will vary accordingly to the article type, for example, a culture headline will feature a star rating meanwhile if our columnist wrote the article, it will include a byline image.
In good housekeeping, I made the proactive decision to implement an auto-layout feature for our results system, which seamlessly coordinates with the remarkable variants tool offered by Figma. By leveraging these tools, we not only enhance the efficiency and effectiveness of our design process but also streamline the management of our results, ensuring a more effective workflow for our devs
Building versatile cards
XS: 320px
┃12 COL FIXED
┃8 COL WIDTH
┃16px GUTTERS
● FINAL SCREENS
● CONCLUSION
Results & Takeaways
Since the launch of the project, we’ve seen positive feedback from users and I love how we’re able to make the navigation easier for users, especially since this problem was really highlighted during my previous work in the re-design of our navigation system. This was my first real user interface design project in the industry and I truly learnt a lot, some of my main takeaways are:
The significance of continuous iteration - Don’t settle for the first design iteration, but instead iteratively improved upon it based on feedback and usability testing. I went through many many frames before finding the right one but it was by constantly refining and iterating, I was able to make a design that not only solved the initial problem but exceeded stakeholder expectations.
Small things matter. Whether it’s the loading time or the placement of buttons - small details can have a big impact on the overall user experience. Paying attention to these details and constantly refining them can make a significant difference in user satisfaction.
Overall, I am overwhelmingly proud to see this project come to life and flourish before my eyes. Witnessing the culmination of our hard work in a time crunch is truly gratifying.