Embedded Files
While working on my Ph.D., I decided to add a concentration in UX Design to my degree. To do this, we are required to take UX Design Studio classes.
Below are my selected UX Design projects, which I have split into two sections: group projects and individual projects, to partially fulfill a portfolio requirement for the Studio classes.
Group Projects
Group Projects
Project 2: Project Starship
Project 2: Project Starship
The project explored the current use of Starship robots on Purdue’s campus and gathered insights from Boilermakers regarding their experiences and opinions of the robots. While the robots are currently used primarily for food delivery, this project aimed to expand their functionality beyond delivering meals.
Collaboration Figma Board
Affinity Mapping
Project Scope
Our design aimed to transform the Starship robots into interactive campus street vendors, capable of providing convenience items (snacks, study materials, event merchandise) and sharing real-time campus information such as news, events, and location-based updates. The redesigned Starship robots would support more diverse and engaging interactions across campus by integrating friendly, personified interactions and enhancing app-based features (such as item tracking, purchasing, and promotional advertising).
Observations & App. Design
Final Outputs & Contributions
For my contribution, I conducted secondary research, drafted and implemented surveys, and performed observations. I also helped develop an interview protocol and conducted three interviews. I crafted video content, including storyboarding, recording, and editing. I created a presentation format and assisted in inputting presentation content. Finally, I designed, inputted, and edited the final documentation and presentation content.
For my contribution, I conducted secondary research, drafted and implemented surveys, and performed observations. I also helped develop an interview protocol and conducted three interviews. I crafted video content, including storyboarding, recording, and editing. I created a presentation format and assisted in inputting presentation content. Finally, I designed, inputted, and edited the final documentation and presentation content.
Project 3: Boba Tea
Project 3: Boba Tea
The project's goal was to understand the needs of either the boba tea shop employee or the customer, channeling this knowledge to inform the design of a refined experience for boba tea shop patrons that maximized positive and empowering interaction.
Collaboration Figma Board
Contextual Inquiry
Project Scope
For this project, we explored the boba tea customer experience, focusing on interactions with in-store kiosks. By gathering customer insights, the project aimed to enhance the ease of ordering on the kiosk. The design centered on creating a user-centered ordering experience that focused on redesigning the kiosk's navigation bar. Our target audience for this project was regular customers of boba tea shops.
Observations & App Design
Final Outputs & Contributions
For my contribution, I conducted secondary research and performed observations. I helped develop an interview protocol, conducted five interviews and recorded multiple contextual inquiries. I created two of the nine navbar iterations and contributed to determining the final factors of the design. I designed a presentation format and assisted in inputting presentation content. Finally, I created, inputted, and edited the final documentation and presentation content.
Individual Projects
Project 1: Constrained Redesign
This project's goal was to refine the visual layout of an existing product website by adjusting (CSS and HTML) margins, size, and color to enhance the user experience. Working within the constraints of locked programming and semantic markup, the focus was on reimagining the design while maintaining existing elements. We were encouraged to select tools and processes that effectively supported the visualization and implementation of these changes.
Website Redesign
I chose the Indiana State School Music Association website (issma.net) for this project. I visited this website frequently when I taught band, orchestra, and general music. The original layout of the page felt like something out of the late 90s. Even the new page feels a little dated compared to some of the cleaner web pages the organization could have the web developers emulate.
Constrained Redesign 1: Navbar
One of the items I see as a problem with the navbar is that when the user hovers over the text, it only slightly changes, as seen in Figure 1, but the text isn’t altered much from the other items in the navbar. The user can see the link they are currently at, but the link they plan on going to does not change much. In CSS, these items can be altered so that when you hover over the page link text, the color changes or becomes bolder. For this alteration, it would benefit the user to have the page link text bolder when their cursor is over the page link they want to utilize, similar to the current page link. This will make the users feel more in control of their navigation experience.
The previous page is not marked as having been visited; instead, it matches the colors of the rest of the navbar links, as seen in Figure 2. Sometimes, when users look for something on a webpage and visit link pages, they need help remembering which pages they went to and could be going back to pages they had previously visited, causing them to feel like they are wasting time searching for something. If the previously visited pages were highlighted differently, users would know which ones they visited in the navbar. In CSS, this can be altered each time the users click, and the highlight would happen to the different links. The links would show a different color in the navbar to indicate which links the users had previously visited.
Constrained Redesign 2: Flexbox
In the CSS sheet for the page, the web designers chose to use flex options but only sparingly. They also decided to separate the different screen sizes suitable for accessibility purposes. Still, they should have returned and ensured that flex was incorporated throughout the complete CSS. What I mean by this is that when users go from a larger screen to a smaller screen on one device, things do not flex and wrap throughout all the different screen dimensions. This is very prominent in the homepage's ISSMA Gold Associate Members section, as seen in Figure 4. It is a justified left row set up in CSS with 25 links to the different websites.
This could be a 5x5 configuration in CSS using Flexbox, and each member could have more prominent images in this section on the computer page. When users move to a smaller screen, this configuration jumps from the configuration seen in Figure 4 to Figure 5 with no flex wrapping to gradually shrink from screen to screen or allow the images to shrink with the screen in the container they are configured in. This is also justified-left instead of justified-center, making for an unbalanced layout on the screen for the mobile version.
Constrained Redesign 3: Differing Style Components
In Figure 6, the pictures in this container are different sizes and have rounded corners, which are a more modern update to the traditional squared corners. This is a nice Apple-esque update that should be applied throughout the page. In Figure 4, the ISSMA Gold Associate Members section has page links that need to be updated to match this modern look of rounded corners instead of square ones. As seen in Figure 7, they also need to update the link image for the Performing Arts Photography to match this modern look. This alteration is because as users scroll through the page, seeing these different images and how they look on screen can be jarring.
Corners can be rounded in CSS by going into the .image in the container of those sections and altering the pixels for the corners of those images under the .image item. This would give the page a cleaner look as users scrolled through the different sections of the home page. It would also allow users a less jarring visual experience as they scroll through the page on both the computer and mobile screens.
Page updated
Google Sites
Report abuse