• Home
  • Customer Reviews 🎉
  • Work
  • Resources
    • 📗 Blogs
    • 💻 Tutorials
    • 🎥 Youtube Videos
    • 🧰 Recommended Tools and Apps
Let's Talk
  • Home
  • Customer Reviews 🎉
  • Work
  • Resources
    • 📗 Blogs
    • 💻 Tutorials
    • 🎥 Youtube Videos
    • 🧰 Recommended Tools and Apps
  • Home
  • Customer Reviews 🎉
  • Work
  • Resources
    • 📗 Blogs
    • 💻 Tutorials
    • 🎥 Youtube Videos
    • 🧰 Recommended Tools and Apps

studio.leopoldopirela@gmail.com

Contact information

Founders feed UI design & Development -

Excerpts are optional hand-crafted summaries of your content that can be used in your theme.

What was needed

Project brief

I was hired to help the Acceleprise Team to enhance the user experience of the Founder Feed product, as well as, to create a directory for founders to find mentors, companies, potential customers and interact with the Acceleprise team.

Prior to the new design, founders who used this digital product, did not seem to be able to interact with it and its functionality.

So my goal was to enhance its functionality, remove unnecessary elements that would make the experience simpler, and give the platform a better UI.

What it is

The Founder Feed

The Founder Feed is a digital product created by Acceleprise. In simple words, Acceleprise backs founders redesigning the future of work. The company has been created by entrepreneurs for entrepreneurs.

They use the Founder Feed to bring together all the founders they are working with into a private network, where they share information and courses that allow these founders to scale their early-stage startups.

Prior to working with me, they had hired a developer who helped them put together a famous social network theme called Buddyboss. But as they were getting ready to re-launch their program and welcome back members, they were in need of an UI enhancements and easy ways to share their resources with the founders.

Drive in Action

The Process for this project

Here is a brief description of the steps I took to complete this project. Keep in mind a lot of the discussions and some steps may be confidential to the client, so I am not able to share all of the details.

process-02
1 Structure

Designing Wireframes

Part of this project was creating a new directory within the feed. It needed to be simple, modern, and also searchable by tags or categories. I created the wireframes for these directories, so that we could further understand how these pages content will be structured.

process-03
3 The Design

Designing Mockups

As the wireframes were completed, I moved on to designing the experience of the new pages. One challenge here were the primary brand colors used on the previous version. They were all too similar, and didn't create proper contrast of elements. In their main logo, they are 3 strong, but different colors that can be used to increase contrast and make everything most usable. So I moved forward to implement my designs with the use of these colors. Using Adobe XD, I was able to bring the wireframes to life, and create live mockups that allowed the Acceleprise team to interact with the directories before I fully developed them.

Drive in Action

The Process for this project

Here is a brief description of the steps I took to complete this project. Keep in mind a lot of the discussions and some steps may be confidential to the client, so I am not able to share all of the details.

process-02
2 Structure

Designing Wireframes

Part of this project was creating a new directory within the feed. It needed to be simple, modern, and also searchable by tags or categories. I created the wireframes for these directories, so that we could further understand how these pages content will be structured.

3 The Design

Designing Mockups

As the wireframes were completed, I moved on to designing the experience of the new pages. One challenge here were the primary brand colors used on the previous version. They were all too similar, and didn't create proper contrast of elements. In their main logo, they are 3 strong, but different colors that can be used to increase contrast and make everything most usable. So I moved forward to implement my designs with the use of these colors. Using Adobe XD, I was able to bring the wireframes to life, and create live mockups that allowed the Acceleprise team to interact with the directories before I fully developed them.

process-03
process-04
4 WordPress Development

Developing the Directory

The main Founder Feed was developed using WordPress and the Buddyboss framework for the networking side of it. In order to develop my own design, I used Elementor which allowed me not only to create my designs, but also use Advance Custom Fields to create the CMS entries for the directories. The whole idea is for the team to be able to seamlessly edit, delete or add new entries whenever it is needed.

5 The User Interface

Enhancing the UI

Once the development of the directories and features such as search options were completed, I moved on to enhance the rest of the User Interface. I started by working with the colors that I used on the directories, they were solid, and created a good contrasts for buttons, links, icons, etc. From here, I moved on to clear everything that was repeated or not necessary. My goal was to bring the users attention to a few specific goals, one of them being clicking on the information shared by the team. On the prior design, there was no hierarchy of the elements, so everything looked the same. I created a hierarchy in the way the content is display, as well as on different elements and sections.

process-04
process-04
6 Data & Content

Bringing in the content

The different lists for directories entries were up to 100+ single entries. And with the goals of growing their lists to about 100+ new companies per year, this process needed to be seamless. Being able to used Advanced Custom Fields to create the different CMS entries, also allowed me to bring another tool that would make this process quick and seamless. I was able to connect the custom fields I created with the .CSV files of where they kept all their data. This way, the team can bulk add entries with ease.

7 Final Touches

Setting up other features

There were other features I helped them create like survey with conditional logic and Slack integrations to keep the founders and team up-to-date with anything that takes place in Founder Feed. Below you will see mockups of the final deliverables.

keystoke-image-1
Lets work together

Need to start a design project?

Schedule a 30-mins Call
Or email me studio.leopoldopirela@gmail.com

Copyright © 2021 L & S Company Group Inc. - 💪 Built and Designed by Leopoldo Pirela

  • Terms of Use
  • Privacy Policy

Want more content like this in your inbox? 🖖

Every week, I am sharing the latest tools I am using, deals I have found online, tutorials, and tips to help you improve the look and feel of websites and brands. 👇

I hate spam probably more than most people, so I promise to not send you an insane amount of emails. Only where there is something important to share. Remember, you can also opt-out at any time!