Web Application Redesign



Fokcus is a startup that professionally matches mentors to entrepreneurs. They had an existing in person product and were looking to build and launch a complimentary web app.

Time 3 weeks
Tools Used  Adobe XD | Sketch | Adobe Illustrator | Paper | Pencil | White Board & Dry Erase Marker
Team Pauline Siu McNaughton, Abraham Abbas & Myself



The Fokcus Web App needed a redesign to be a functional product that compliments their in-person user experience. 


Our team used the pre-existing wireframes and enhanced their functionality. An MVP was established for features. We refined and defined their service design process to create a more streamlined service across the board. 


I was a part of a 3 person team. My primary roles were as  Project Manager, Head of User Research and Head of Data Analysis.


  • Redesign Information Architecture
  • Redesign Primary Navigation
  • Understand the way that Mentors & Mentees would use a complimentary product to the in-person experience


We were able to use existing Fokcus user data to measure quantitative data. Once it was synthesized we were able to see the demographic of who our mentees and mentors are.

Qualitative data came by conducting contextual inquiries for 2 different parts of the Fokcus process as well as interviewing users who have experienced various levels of the same process.

When all of our qualitative data was gathered, we synthesized this information into an affinity map. Here, we were able to see clearly the pain points of users and common trends that they shared. 

It was at this point when we combined all of our key findings into an Empathy Map and created a Persona, whom represented the current Fokcus user.

Screen Shot 2018-02-22 at 5.13.31 PM.png

User Interviews & Contextual Inquiries

It was clear why users were coming to Fokcus.

We needed to now uncover their pain points. Once we synthesized all of our User Interview data, we uncovered common trends in their experience with the product.

Fokcus Persona for Portfolio-01.png


Niha is the combination of user qualitative and quantitative data. She was key to all design decisions.

Key Insight of User Research

Entrepreneurs want to produce successful start-ups with a well-rounded network and resources.

Problem Statement

Niha is confused with all the things she needs to do for her startup. How might we help Niha get connected with someone she can trust to help grow her company?




The first matter of business was to get a service design blueprint of the product. At first it was challenging to sort through each step since there wasn't a clear user flow but it ended up being an opportunity to support the Fokcus stakeholders in defining their process. Our user & stakeholder interviews were detailed enough to successfully get the thoroughness of the process mapped out entirely.

We sorted through all of Niha's possible entrepreneurial needs in the form of features. We prioritized these features and created our MVP of pages needed & features within the pages based on user research.

From there, we were able to design an intuitive navigation schema & site map which integrated the in person experience seamlessly. In addition wireframes were then built and ready for Usability Testing.


Initial Wireframe Sketches

Initial Wireframe Sketches

Fokcus Site Map - Page 1.png

Site Map

Fokcus Service Design Blueprint-01.jpg

Service Design Blueprint

Fokcus WIreframes with background-01.jpg

Low Fi Wireframes

We kept much of the original wireframe content and added or enhanced most features.

Dashboard (High-Fid) – Dropdown.png


During a series of Usability Tests, we were able to iterate on our wireframes from the first set of Low Fidelity all the way to a refined High Fidelity Prototype.

Iterations based on Usability Tests

Wireframe Iteration-01.png

Messaging Pop Up Module

Viewable on every page as a way to quickly access the messaging feature without switching entirely to the message page. Hides when it is not needed.

Streamlined Sign Up Process

Screen Shot 2018-02-23 at 1.30.10 AM.png
Screen Shot 2018-02-23 at 1.29.41 AM.png