june - october 2021
future resources
conducting a UX/UI redesign for the world’s first open information platform for womxn and non-binary folks in future, strategy and innovation
innovation & foresight
content
intro
the backstory.
In May 2021, I stumbled across an instagram account called “Future Resources”, which posted about events in future, strategy and innovation. It led out to a bright green website, on which you could find an embedded excel sheet with several tabs. It looked complicated and didn’t feel very inviting - but in there were tons of super valuable and up-to-date resources: events, companies, podcasts, youtube channels, books, communities, experts - all posted and curated by only womxn and non-binary folks. This platform worked as a way to provide a space and information to those who are more likely to be shut down.
I reached out to the founder of Future Resources, Lydia Caldana, a brazil-born future strategist, letting her know I appreciate her work and that she should reach out if she ever needed a UX mind to support.
She got back to me and a week after we were on a Zoom Call. “So, I definitely need a UX Designer to help… I mean, you saw my website.” She laughed. “Obviously, I need a redesign.”
the goal.
The goal was to redesign the branding, including Logo, brand icon, colors and fonts; and the website, including information architecture, copy, layout, imagery and functionality of the databases.
How can we improve the UI of an open resource platform in a way that speaks to female and non-binary futurologists, while increasing the platform’s usability, so that we increase traction and engagement?
my role.
I conducted this as a volunteer project for Future Resources. I was initially meant to do a pure UI redesign. As a UX Designer, it was inevitable that I would also make some UX changes, and with the new information architecture, new user flows and new tools being used, it ended up being a good mix.
the scale.
5-month project, also developed as part of the UI Specialization at CareerFoundry
primary audience.
Womxn and non-binary folks in foresight, strategy and innovation from anywhere around the globe, but especially 3rd world countries on the southern hemisphere.
tools.
Sketch, Invision, Excel, Notion, Figma, Tallyforms
before.
The desktop version of the resources page before redesign.
after.
The desktop version of the resources page after redesign.
UX
The open resource database on mobile device before redesign. If it irritated you here - I understand. (Wait for after redesign!)
auditing the existing site.
The first step to making something better is understanding what’s not going super well (duh). So I began by auditing the Future Resources site, following questions like:
Which pages exist?
Which pages do we need?
How is the Information Architecture set up?
At which points in the flow is usability especially low?
In what way does the UI design play out negatively to the user?
So I tested the site from different angles, took screenshots, noted the Information Architecture and wrote out my thoughts in a document. My main findings:
The web app is not at all optimized for mobile, in fact, it’s hardly functional on mobile devices.
The neon green color can seem obtrusive or shrill, especially as a background color. In other pages, there is no color applied, with large amounts of which leads to a dry, low-excitement experience.
The layout and fonts are inconsistent, which affects readability and creates unclear visual hierarchy.
There is too much copy.
Compelling CTAs are missing - the users know a lot about Lydia, but less about what to do, what steps to take themselves.
The platform’s branding isn’t consistent and could be be stronger in character.
The tone and voice is very informational and technical, Lydias experience is described in third person with no story-telling framework. Addressing the user on a more human-to-humans level would increase how users connect to the platform.
Capturing existing pages in Figma.
information architecture.
The current solution left users confused about what this page was and how they could obtain the promised information. I sketched out a few ideas for an alternative sitemap and went on building user flows.
first paper sketches.
Next, I sketched out roughly what the individual screens might look like, in order to create such a flow. (Beautiful, I know.)
migrating data to notion.
The open resource database in Excel, before relocation.
So I spent “some time” (I don’t wanna talk about it) on the databases, figuring out how to better structure them, how to fix them up as best as possible, taking notes on what information to obtain in the future and grouping similar entries for better overview and less clutter.
Just as reference: at this point, there were about 450 entries into the database.
The open resource database in Notion, after relocation.
As I saw the interaction with the database as one of the major usability issues, and Lydia was also not happy with Excel, we moved all captured data into Notion. This database isn’t just the main place where users will want to find information - it also allows them to contribute easily right there and then. Both the information accessing and the contribution user flow were less than optimal, which was why I made this step a priority.
The Problem:
Users had previously contributed by simply typing into the excel sheet. The columns, however, were labeled in a somewhat generic, vague way.
This small unclarity had lead to hundreds of incomplete, inaccurate or falsely filled contributions.
When I first opened the databases imported into Notion, I realized there was a lot of work hidden in here. As a designer, I’m love consistency. If a column “Additional Information” contains in some cases an Instagram link, in some cases a long written description, in some cases a self-marketing call, in some cases nothing and once just the word DUMPLING… It makes my eyes itch and my hairs fall out.
UI
low-fidelity wireframes.
To guarantee a top class mobile experience and focus on most important features, I designed mobile-first.
As my frames matured iteration by iteration, I needed a concept for the overall branding.
Mapping out layout concepts for mobile screens in Sketch.
creating a mood board.
I knew I wanted to get rid of the neon green for several reasons, and felt inspired by MING Labs’ editorial style. But of course I needed more of a full-fledged branding strategy!
So I started by collecting key words associated with what Future Resources provides, such as:
inclusive
change-making
future-oriented
rational
female
LGBTQ+
and so on.
Based on that, I created two mood boards. I chose the one you can see here, as it had more emphasis on technology and future alongside a cheerful, but objective-informative feel.
Note: The bright pink ended up being the only color to survive the brand refinement process. You might wonder, if it’s about female and non-binary empowerment, why pink?
To me, pure neon pink is the antidote to stereotype Barbie-pink, to light and dreamy babypink, to rose-y lipgloss-pink, or conservative dusky pink. Any of these colors as main hue on the website might say: “We are women, we are pretty and useless.” Neon pink, to me, blows all of this up, beaming across continents and crowding out dusty narratives like that. To me, it says: “We are womxn, let’s raise our voices, let’s show ourselves, let’s build a future and let’s make technology a womxn thing, too.”
mid-fidelity wireframes
With the Moodboard as reference, I could capture branding decisions and implement them into mobile screens. I searched for appropriate imagery and found an artist who made beautiful illustrations featuring womxn and non-binary people.
creating a brand logo.
I also designed a logo as well as two brand icons, one for the screens and one that was meant to function as a Notion page icon.
Comment: “fu.re.” has negative connotation in Portuguese, which is why we changed the logo later to “f.r.”. I don’t know what exactly the connotation is, but I think something dirty, because “fure” translates to “to pierce”.
Note to myself: Always check any new words or abbreviations for unwanted connotation in different cultural context!
creating a prototype in invision.
For a quick way to test the user flow and identify problems early on, as well as demonstrate how all those screens work as a whole, I created a clickable prototype in Invision.
responsive design.
Once I was clear on the structure of the website, it was time to adapt my designs for different breakpoints. Following the principle of progressive enhancement, I designed in a way that more information becomes available, the larger the breakpoint - while the most important information is always given.
Also, imagery plays a bigger role, the larger the breakpoint. In mobile, the imagery is reduced a bit to avoid excessive scrolling and waste of valuable vertical space.
The resources page for mobile
The resources page for tablet
The resources page for desktop
The events page for mobile
The events page for tablet
The events page for desktop
creating a visual style guide.
What, when, how, why, and for which pixel density?
I created I guide for future designers, which included all branding decisions I had made as well as my thoughts and concepts behind them.
This step is always somewhat relieving: all the accumulated design details and their underlying ideas which were previously scattered, with some of them only stored in my brain, now come together in one place (allowing me to die in peace).
results
final touches to the UI.
Even though there might be a few steps between now and App Store - the redesign was a benefit to the Future Resources platform and the actual measurable value will surely show as soon as the redesign is in use - as a responsive web-app; and probably at first hosted in Potion, a Notion-website-creator. (But soon after that, App Store!)
Phew.
conclusion.
For myself, I conclude:
One awesome colour can be better than two awesome colours.
When collecting large amounts of information from many different people, use precise prompts and the right kind of answer options.
Double-check that the branding is culture-proof.
I like redesigns.
Why? I don’t know… There’s a Youtube channel of a lady who cleans up the homes of her messy followers for free, giving them a fresh start. She loves the feeling of removing clutter, revealing a nice place to live at. In a similar way, I like to bring out the essence and the real value of a passion-based incentive like Future Resources.
