top of page
Artboard 7 copy.png

Overview

Sagan: A single 3D space for users to customize, populate with their content, and share.

Last summer, I had the opportunity to work on a very unique and revolutionary web tool while interning at Saganworks. I got the chance to work alongside and learn from a very diligent and determined team of innovators in areas of spatial recognition, VR/AR, and knowledge management.

* I have only provided a selection of my work at Saganworks on this page. Please contact me if you'd like to see more work, process, and rationale!

Artboard 3.png

Key Contributions

UI Design
Style Guide Building
Usability Testing

Tools

Adobe XD
Illustrator
Invision
Mural
Jira

Time

June 2019 -Jan 2020
7 Months

Responsibilities  

Wearing multiple hats within the design and product departments.

  • Created an extensive UI Style Guide to streamline further prototyping and development. Designed icons, button states, logo guidelines, and more to allow developers to stay organized, updated, and aware of UI and brand assets.

  • Met weekly with project managers, developers, 3D artists, and writers to present designs and receive feedback for further iteration.

  • Created high-fidelity clickable prototypes of new in-app functionalities to pass off to developers.

  • Conducted usability tests using UserTesting.com and monitored in-person controlled observation tests to gather qualitative and quantitative data.

Style Guide - Iconography

Establishing a design system and designing iconography.

Within the Saganworks Application, Icons were used heavily across the interface to allow users to quickly recognize information and functions. I designed icons for various sectors of the product but have highlighted the File Type Icons below. Using Adobe XD, I was able to really establish detailed guidelines on the spacing and placement of the icons

Saganworks Design Style Guide (5)_Part13-1.jpg
Saganworks Design Style Guide (5)_Part20-1_edited.jpg
Saganworks Design Style Guide (5)_Part20-1_edited.jpg

Detailed measurements helped maintain consistency between designers and UI developers when integrating icons + creating new icons.

Style Guide - Buttons

Thinking about various button states to control hierarchy and guide user.

Buttons are a vital element in the user experience, especially in a new and complex product such as Saganworks. Below, I've specifically focused on shape-filled action buttons and their various states.

  • Adding shadow to raise the button gives more prominence to actions in layouts where there was a lot of varying content.

  • When creating a secondary button option, I chose to use a Ghost button, This decision was made to push the user to focus on the primary CTA. This way the user sees a more clear action since positive action has higher contrast.

Saganworks Design Style Guide (5)_Part14-1.jpg
Saganworks Design Style Guide (5)_Part15-1.jpg

Prototypes

Knowledge Inventory (KI) Pallette

One of the first projects I worked on was the KI Pallette. This is a side menu that holds all the users information or files that they've imported into the application. These files can then be dragged into the Sagan Space to be placed and arranged. My job was to revamp the interface and experience of this process. 

  • I redesigned the file thumbnails and the file expanded view by designing a central icon theme to allow file types to be more recognizable and adding softer elements to provide a cleaner UI.

  • I redesigned the search function by adding additional filtering options to personalize searches and make for a more transparent interface. 

Task: Expand an Image KI

Task: Search for "food" KI's

Prototypes

Paint Panel

A new feature that I got the opportunity to work on was the Paint Panel. This allows the user to customize their virtual space and furniture through colors and textures. This project was a fun challenge through figuring out what specific capabilities the user would have with this feature and how to seamlessly design it.

Screen Shot 2021-07-19 at 11.59.03 PM.png
Screen Shot 2021-07-20 at 12.01.04 AM.png
Screen Shot 2021-07-20 at 12.00.02 AM.png
Screen Shot 2021-07-20 at 12.08.13 AM.png

Task: Paint the floor Turquoise then paint the floor Turquoise-Granite

Usability Testing

Observational interviews to gather qualitative and quantitative data.

Finally being able to test and gauge a user's response to your designs is one of the most interesting parts of the UX process. I assisted in setting up participants with a task list that asked them to log in, create a new sagan, import files, place a bookshelf and then finally add files to their bookshelf. ​

  • Listened to their thought process and took quotes and notes on significant comments​

  • Keenly observed the participant's mannerisms and body language as they navigated through the app.

  • Gathered quantitative data on task completion times and number of clicks per task 

  • Organized notes based on type and category using MURAL for team review 

usability-lab.jpeg

Listen & Observe

bottom of page