Role: UX Designer

Time frame: Winter 2019

Client: Foliotek 

Foliotek is an education technology company specializing in building web-based applications to showcase work from both students and experienced professionals.

The Challenge

Evaluate the functionality and usability of an interactive system 

The Process


Interaction Map

Competitive Analysis


Heuristic Evaluation

Usability Test

Focus Areas 

ID Creation 

Optimizing the main section for users

Project Creation 

Determining pain points for user input of projects. 

Onboarding Process 

Helping users quickly input basic information when they first encounter the system

System Mapping

Creating a flow diagram and system map to document how the system behaves currently.

Comparative Evaluation

Comparing and contrasting Foliotek to comparator systems with a usability focus



Using Nielsen’s heuristics to gain usability insights


Speaking to 5 target users of the Foliotek System to learn about their goals for showcasing themselves online

User Surveys

Creating and distributing surveys to get actionable data for recommendations about how students currently showcase themselves online

Card Sorting

Having participants in the target audience re-order the ID page navigation

Usability Test

Completing usability test of the ID page in order to make actionable recommendations about the current state of the system.

The Solution 


Users found overall navigation confusing and indicated that it needs simplification.

Methodology: Comparative Evaluation, Card Sorting, Usability Test 


Navigation categories should be condensed (e.g. Advanced Styling, Themes, & Background) and prioritized to improve interaction flow as well as match user expectations. Combining and simplifying the edit functionality will improve end-user comprehension.

Modular Content 

Users must carry out multiple interactions for editing content.

Methodology: Card Sorting, Usability Test, 


To improve user flow, focus editing within modular content blocks by displaying edit icons statically without the hover effect. Expand the width of the modular sections to bring awareness of this edit feature as well as prominence to ID page content. Remove redundancies (e.g. pencil icon) from the left rail menu.


Foliotek’s fixed design elements may frustrate users who want a higher degree of customization, especially in higher levels of education

Methodology: Interviews & Comparative Evaluation


Within the space of the ID page, allow users to add, remove, and label blocks to give them greater control. This also reduces the visibility of unused sections when editing.

Icon Handling 

User found some icons hard to decipher and not all icons are backed up with text.

Methodology: Comparative Evaluation, Heuristic Evaluation, Card Sorting,  Usability test


Test icons with users and modify with results to ensure feature recognition. Provide icon labels so that users are able to gain information through use of imagery and text. Research and use icons that will be commonly understood.