Fokcus Redesign
Fokcus is a startup that matches mentors to entrepreneurs using machine learning. I began working at Fokcus in July 2017, after meeting Kurling Robinson my freshman year at USC. Kurling was the co-founder of NetZero, which IPOed in 2000, and was looking to start a team for his new project, Fokcus.
How it began:
When I first met the Fokcus team, Kurling, the co-founder, was giving a presentation at USC’s launchpad incubator about the importance of mentorship for startups, inspiring him to create Fokcus. While they weren’t actively recruiting designers, when Kurling showcased Fokcus’s website, I decided it would be a good opportunity to whip up a mockup and send it over to Kurling. Soon after, I joined the team as the youngest member — among engineers whose backgrounds ranged from holding masters in computer science to Ph.D.s in physics. I was still an incoming freshman.
Step 1: Feature Prioritization
The scope of the redesign for Fokcus was for its webapp, a platform that originally had a wide set of features they wanted to implement. From checking in users at their live events, to uploading assignments from mentors to mentees, to having a Khan Academy style curriculum for the users. In short, there was a lot to cut back on.
I decided to employ Eric Reis’s lean methodology, proposing to create a minimum viable product first, working out what features were a priority in order to deliver the design as soon as possible.
I decided that the most important feature for this sort of social platform was showcasing the entrepreneurs and mentors and to create a method for the two demographics to communicate smoothly.
The next most important feature would be to create a curriculum, but cutting back on features such as uploading assignments and other personalized content. Instead, it would just be a platform with modules that entrepreneurs can explore. We implemented this with Stanford’s How to Start a Startup series instead of making our own in house content which would have been time-consuming and of lesser quality.
However, all of this came before I saw the home page.
Step 1.5: Quickly Redesign a Home Page
To my horror, when I opened the home page what I saw was a templated website with almost no branding or design. You can check out the full website on the wayback machine here. However, you can also not do that and instead check out the redesign the graphics team and I at Fokcus decided to create to replace the home page below.
Step 2: Back to Research
Upon finishing up the home page redesign, I went back to the UI/UX research, conducting several interviews with the users of the Fokcus platform to verify my initial intuition of what features should be prioritized was correct.
They were not.
Turns out people don’t actually want a curriculum, instead, they’d rather learn it directly face-to-face with their mentors. Who’da thunk?
At this point, I wanted to start putting pen to paper and wrap up the research. But instead of rushing the research phase, I decided it would be a good time to talk to Kurling about expanding the design team. I had recently heard about a mentorship program hosted by General Assembly, a school of design, where they have startups mentor students with real-world practice. In exchange, the startups receive help from design students with the guidance of their in house designer. We applied for the program and soon expanded our design team to 4 members — and I was in charge.
Step 3: Finalizing Interviews and Features
Soon after the General Assembly program began, the team and I quickly wrapped up user interviews. It turned out while a curriculum wasn’t needed, people wanted resources to access. They also wanted a page dedicated to events so they can always stay updated on where the Fokcus team will be mentoring startups next.
These interviews made us realize that the way we were designing the web app felt as though it was a stand-alone platform that didn’t really complement the live events Fokcus hosted the best that it could. So we decided we needed to figure out the entire user experience of someone going through the Fokcus ecosystem, rather than how to just onboard users to the app.
After this realization, we finalized the prioritizing features and created a user flow for the app.
Step 4: Low-Fi Wireframes
Once we finalized the user flow and feature priorities we finally began to design the visual side of the web app.
Some key design decisions that we made:
- Communication was key. We decided to have a dedicated messaging page as well as a universal chat pop-up throughout the website. This allowed users to be able to access any portion of the website without needing to go back and forth between tabs just to message their mentors or other entrepreneurs they were connecting with.
- People wanted to see what events were coming up. Having a dedicated events page with calendars and the feature to sign up for events streamlined our onboarding process for physical events, as well as kept Fokcus alum in the loop on what’s next for Fokcus.
- The profile page was a place for humble-bragging. People wanted to use the Fokcus platform similarly to Linkedin, making connections and impressing mentors and entrepreneurs alike. Due to this we scrapped our first design of a profile page that was similar to Facebook, to one closer to Linkedin with designated areas to show off their skills, interests, and experience.
Here are the low fidelity wireframes we created in order to test out the UI we designed before focusing on finalizing the visuals and graphics.
Step 5: Outcomes
Once we finished up the low fidelity wireframes and verified that this was the user flow that was best optimized for Fokcus’s needs, we moved on to the high fidelity mockups.
You can see the finalized designs below.
After wrapping up the web app development process, we quickly launched many of our live events, such as city highlights where we meet up with startups at an Apple Store and matched them with mentors. We also created the Fokcus Founders Group where we formed cohorts of startups to meet up and make connections with other entrepreneurs.
In fact since the website redesign that was finalized in March 2018 to the time this article was written, January 2019, Fokcus has grown rapidly. From only around 250 entrepreneurs and mentors in 2018 to an ecosystem of over 2,000 entrepreneurs and mentors in 2019. We have also increased mentor-mentee matches from less than 1,000 matches to over 18,000 matches between all the members within our ecosystem. The web app redesign without a doubt helped, allowing users to meet online and find out more about our events.
With Fokcus quickly evolving beyond the original scope of the redesign we have recently taken the webapp down and begun a new redesign cycle to better fit our current needs. If you would like to learn more about Fokcus check out the website here.
