Web product development

Client: Ruptly | Industry: Media | Location: Berlin | Role: UIUX designer & Graphic Designer

The Know Your Source case study demonstrated my design process for building an interactive website for educational, marketing and sales purposes. I have adopted UX research methods to establish an intuitive content structure and led design workshops to craft the UIUX design of the website.

As digital technologies develop, it is getting more difficult to distinguish what’s real or fake in the news. In many cases, social media functions as a vehicle to spread rumour, propaganda and inaccurate reporting. Ruptly’s creative team and I created an engaging, interactive website as part of the Know Your Source project to emphasise once again on sourcing as the foundation of reliable journalism.

📌 Define User & Business Goals

Before diving into UXUI design, it's essential to consider both the goals of the website visitors and the business objectives, as they are the driving force behind the creation of the website. This process helps to ensure that the website brings a positive experience for all stakeholders. In the strategic meeting, the creative team and I adopted the 5 Ws framework to define user and business goals, then we used card sorting research method to design the information structure.

Business Goals

  • Stress the importance of fact-checking and digital media literacy

  • Demonstrate the work of the Verification Unit (VU) and showcase Ruptly’s international network

  • Facilitate corporate reputation and maintain strong relationships of trust with the sources and, in turn, our clients and audience

User Goals

  • Get informed about verification processes in news publishing

  • Spend less time to understand VU and its impact in news reporting

  • Learn in a fun and interactive way, and share the knowledge with others

"Strategic meetings anchor web design to reality, aligning user needs and business goals for smooth sailing."

🗂️ Card sorting research method

It is crucial to have clear categorisation of the content when designing a content-heavy website. Therefore, we used open card sorting specifically to help categorise the resources provided by the news team to build a better information structure. Card sorting research method provides insight into users’ psyche when designing intuitive content structure. The result can provide us with a foundation for the information structure when exploring and assessing different approaches.

Testing Session and Standardise Categories

The creative team and I wrote down the title of the materials we collected from the news team on each card and brought some blank cards along to the testing session. Then, we invited some clients to group the cards together, before naming the groups. After the testing sessions, we reviewed the results and identified common patterns in how the cards had been grouped and the group names given by testers. This method helped us assess and iterate potential website structure before moving forward in the design process.

💭 Turn an Idea into a Product

After conducting UX research to find out an intuitive website structure for this content-heavy project, we then moved on to the creative design part.

Brainstorm & Pitching Ideas

I collected references online to brainstorm an interactive game to demonstrate the verification process and lay down potential styles of the website.

Create User Journey Map

Utilising the insights we have drawn from the UX research, I created the user journey map to show how the user will navigate the website. I aim to optimise the user experience while presenting our case study accurately and chronologically.

UIUX Design

I created UI elements and defined colour palette for the website to ensure the style consistency. On the other hand, I created Lo-fi to Hi-fi UX design, collected feedback from stakeholders, iterated it and made the final prototype.

💯 Results

The Ruptly’s creative team and I have rolled out an engaging, interactive website to emphasise on sourcing as the foundation of reliable journalism. The Know Your Source project helps to build greater digital media literacy and gives a voice to the stringers out in the field across the globe who film raw footage. In this web design project, I have..

  • Delivered the importance of verification process in journalism as the core message

  • Informed visitors the expertise of Ruptly’s Verification Unit

  • Attracted more users to sign up for Ruptly’s Fact-checking Excellence Webinar and build connection with potential clients