Organise Network App

Revitalizing the feed experience.
Year
2022
Project Type
App-Redesign
Client
Organise
Role
Product Designer
Timeline
3 weeks
Organise network is a mobile-first web app that aims to give everyone the tools, network and confidence to improve their lives at work. I was given a brief with a task to improve the current feed, specifically issues with the information hierarchy, visual design, and usability of their "action" cards.

I evaluated success by measuring for an increase in petition signings, which grew by 12% since the design was implemented. The new action card designs were also the first step in establishing a more coherent visual look and feel for the product.
Open Letters
Petitions
Snap Polls
Questions

Overview

Action cards are components in the Organise design system used to display user activity taken on the app. On this project I worked as the sole designer running through various design iterations, gathered feedback from key stakeholders, finalized my designs and then worked on project handoff with the developer.
Previous Action Card Design
The given brief outlined these main problems to solve for:
The working assumption is that improvement of hierarchy, visual design and scroll experience will lead to an increase in user engagement with action cards, specifically the petition action card.
While there was no time to run initial user research I spent a few hours sourcing secondary research through a heuristic evaluation of products with similar offerings. I also looked at general best in class patterns for mobile card designs to better understand how to solve the problem of the action cards.

Initial Sketches

Through my sketches I was able to explore rough layout ideas of how to balance the text, image and the primary CTA. The goal was to lead the user's understanding from the title of the card, supporting image if present, the description/question and then finally the prompt to take action or access any of the secondary actions on the card.

Past explorations

Past explorations

Past explorations

Explorations were mainly focused on the "Petitions" action since it was the most information dense. While images are not required to be uploaded with a petition, past research showed that petitions with images were more likely to be engaged with by users. Images however, tend to increase the vertical height of a card which was a constraint in the brief.

It was a stipulated assumption that longer card heights tend to negatively impact the scroll experience and led to less users supporting petitions. An additional constraint is that action cards are also appended with a partially expanded comment and input field section. Making this section fully collapsible or exploring alternative solutions was not in scope during the sprint.

I also considered how to improve visibility of the main CTA, how to communicate distinction between various types action cards during scroll, how to reduce visual prominence of tags without losing their interaction affordance and how to inject existing brand colors into the new design.

After a couple rounds of iteration and feedback sessions, I settled on a design that I believed would meet the outlined user and business goals and could be built quickly during the upcoming development sprint.

Final design

Having received alignment from all stakeholders on the team on this direction, I proceed to move into handoff with the lead developer. My role here was to spec & document the existing design for build. While the need for user test and validation was advocated for it was unfortunately not feasible under the tight constraints typical with early-stage startups.

In my process, is used Figma mirror as a way to help "self-test" my prototypes and understand how it performs on an actual mobile device.

For handoff I rebuilt the design following the atomic design framework. Creating & spec-ing out components for header panels, user avatars, icons, tags, image panel, etc. I also used this process to address further details and edge-cases like text truncation limits, overflow behavior, comment section expansion and the desktop behavior for these components.

Handoff FIGma Doc