Genemod
UX Design Intern | Fall 2022
Worked on redesigning the platform with accessibility as a focal point for our users.
Impact
01
Redesigned 3 different workflows and functions on the platform to increase usability and accessibility
02
Increased user engagement and directly identified user pain points through conducting user research mixed methods
03
Increased collaboration between Engineering and Design teams by conducting company-wide user research methods such as card sorting and priority mapping
Project Overview
Redesigning Genemod
01
Redesign the rack and box creation workflows to improve efficiency and usability by tackling user engagement
02
Improved the usability of the stock tracker page by adding an informative and efficient modal
03
Design intuitive contextual menus for consistency throughout the platform
Project 01
Rack vs. Box Creation Workflow
Users find that the creation of racks, boxes, and categories lacks usability and engagement. As a result, this causes user engagement to drop off in this workflow. How can we optimize this workflow to increase usability and engagement?
Background
Findings from User Walkthroughs
Users engagement drops off after creating racks
Users often wonder off to another page instead of going through the full workflow
Users go to delete the rack/box to recreate and make changes instead of editing them
Research
Brainstorming
Findings
-
Providing users with more information and things to go off of to improve understanding and usability
-
i.e. templates, guides, onboarding process
-
-
Previews
-
Giving users a visual of racks and boxes already created and their contents
-
-
Icons and visuals
-
Giving the users clear images and descriptions to aide them in the workflow process
-
Research
Priority Mapping
Findings
-
High priority: Combining workflow steps
-
i.e. allowing users to create boxes in rack creation & items in box creation
-
-
Automatically giving users shelves and racks so that users can go straight to box creation
-
High feasibility: Visuals
-
i.e. previews of boxes and racks
-
Design
Current Design
Design
Final Design
01
Selection Modal
-
Descriptive text to support new users understanding of shelf item
-
Icons and cards to enhance weight of selection process
02
Creation Modals
-
Redesigned rack and category modals
-
Offers more visual aspects to enhance usability and adds visual representation for users
03
Next Step Modals
-
Added new modals for action items after creating a rack or category
-
Encourages users to complete workflow while giving them the option to exit workflow at any step
Project 02
Stock Tracker Improvements
Users of Genemod found that the current way of adding a new item to the stock tracker is confusing. Due to this complex workflow, users take a long time to add a new item to the stock tracker and are deterred from using the function overall.
How can we design a more intuitive way for users to add a new item to the stock tracker?
Design
Final Design
01
Landing Page
-
Updated primary button to "Track new item"
-
More descriptive text to enhance usability for new users
02
Stock Tracker Form
-
Redesigned modal to full-page layout
-
Added in table layout for the "Tracking level" field
03
Box Previews
-
NEW: Box preview for the tracking level
04
Completed Stock Tracker
-
NEW: Snack bar to notify users when stock tracker is successfully added
Project 03
Contextual Menus
User Pain Points
-
The amount of options makes it difficult to quickly scan and identify the action.
-
In places where a number of options are manageable, options are not listed in a consistent order. Users do not get the opportunity to “learn” the position of an option.
Strategy
-
Establish a sense of hierarchy and relevancy in menu options, to make the actions more intuitive.
-
Research menu design best practices; identify applicable design principles.
-
Research menu types; identify applicable design patterns.
-
Conduct competitor analysis; summarize what works well and what doesn’t work based on best practices and your UX knowledge.
-
Conduct user testing (card sorting, etc.) to understand how options should be listed.
Research
Card Sorting with Engineering Team
Design
Previous Menus
Design
Final Design
01
Box Menu
-
Grouped actions into 3 main subgroups based on research
-
"Delete" action remains in its own subgroup
-
Added weight to the action
02
Creation Modals
-
Grouped actions into 3 main subgroups based on user research
-
"Delete" is in its own subgroup
-
To accommodate for "archive" feature
03
Creation Modals
-
NEW: Submenu levels within "Settings"
-
Gives users direct access to settings pages through the contextual menu
Check out my other work!
Cisco Meraki
Visio
