Web Application Redesign

 

 
 
Fokcus_progressbar-01.jpg
 
 

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

IMG_0865.JPG
 

Problem

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

Solution

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. 

Role

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.

Goals

  • Redesign Information Architecture
  • Redesign Primary Navigation
  • Understand the way that Mentors & Mentees would use a complimentary product to the in-person experience
 
 
Fokcus_progressbar-02.jpg
 
 
 
fullsizeoutput_1601.jpeg

Research

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

Trends:
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

Persona

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?

 

 
 
 
Fokcus_progressbar-03.jpg
 
 

Build

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.

 
 
 
Fokcus_progressbar-04.jpg
 
 
Dashboard (High-Fid) – Dropdown.png

Refine

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
 

Prototype