Creating a proof of concept for an experimental voice user interface (VUI) to envision a solution for automotive technicians to have an assistive technology for daily tasks and inspections.

We built a concept around the process of a 40 point inspection in a typical auto-mechanic shop, then built a demo prototype showcasing how a voice user interface can streamline the inspection process.\nTo tell the story I brought the screens into Adobe After Effects to simulate movement in the voice user interface and illustrate the conversational aspect of the story.

40 Point Inspection

POC Service Experience Vision

Redesign of a real estate company listing system to make more intuitive for realtors and assist them in creating more robust listings.

The team conducted a series of virtual workshops with industry professionals. The purpose was to collect insights into the usability of the prototype through a wide range industry professionals. They were users that frequently use the original interface and volunteered to test the new design on creating a new listing.

Task Analysis

Research & Design Real Estate Co.

A comprehensive study to analyze and optimize the customer experience, from initial inquiry to post-purchase services, for enhanced satisfaction and efficiency.

We want to understand the journey when buying a car at the dealership. We had researched and discussed the process through 2 perspectives: the dealership and the customer.

User Journey

Dealership Service Map

Design of a service for instruction design and modules to make a brand agnostic customer retail demos.

The initial requirements for this project were hard to reach. The contact wanted a clickable prototype that can be shared easily with audio and video. Not every prototyping tool can support all of those requirements. I decided that the project will use Figma so I can have playable gifs with a completely interactable prototype.

Instructional Design

Final Designs

Retail Learning Demos

Create a POC prototype of an new prescription workflow for multiple roles in the pharmacy. This project required understanding of the business and the process. Additionally I had collaborated with others to create a French version as a requirement of the final deliverable.

As this POC was going to be built on the web, I suggested using Figma to build the prototype. Figma prepares some code for styling. Figma was very helpful when working collaboratively with the lead experience designer and developers.

Prototyping in Figma

Multiple Workflow Healthcare Prototype

Design the management app suite used by the brands that purchased the space to track customer traffic, their engagement, as well as stock levels. The app suite was purposefully designed to integrate with Shopify services so that brands would not need to complicate their inventory infrastructure.

Each app in the suite was given its own user persona as each app would likely be used by different individuals within any given brand. Kristen, a Director of Retail Planning, was used for the Channel Manager app; Rodrigo, an Engagement Coordinator, was used for Broadcast, and Jamie, a Fleet Operator, was used for Fleet Operations. By working with different personas for each app, we were able to analyze and work on the interface for each app through specific lenses and were able to differentiate between the distinct capabilities of each app by targeting specific needs within the job at hand.

Retail App Suite

Each persona then had their own distinct journeys that reflected how they would interact with their respective app which helped us plan and create the features for them. From the user journeys, we created prototypes to demonstrate to Jabil how users would interact with their systems, making each step intuitive to users so that their experience would be seamless and painless.

Personas

A brand-facing and internal web portal that allows a user to manage product information and planogram information and synchronize with kiosks in the field. The device will report product levels and the cloud/backend will integrate with Shopify for customers that are already managing their products.

This is a brand-facing web portal that allows a brand-marketing user to upload media (videos and images) and create a schedule to play media on the displays.

This is an internal web portal that can display IoT/Telemetry, sales transactions, and customer analytics data in various visual forms. In the future, this portal may allow a user to perform device management and integrate with a 3rd party service management/routing application.

User Flows

Final Prototype

Lastly, a final persona, Monica was created to represent a Kylie Cosmetics customer that would walk up to the Edge Retail device and purchase a product. Her user journey was representative of how any consumer would interact with a kiosk and what expectations they would have while interacting with it. This allowed us to analyze how the other three personas would reach/interact with her experience.\nThe UI represents the user interface on the client devices. The goal was to have the digital UI interact with the physical space of the kiosk.

Customer Experience

By utilizing basic CAD skills and Photoshop, I made a prototype of the physical kiosk space. The users are directly interacting with the space and also the internal resources to from Jabil keeping the operation of the kiosk running.

3 Dimensional Experience

Multiple Workflow Retail POC

Trigger solution for security assessment team is to focus on the riskiest project in an organization where number of projects are growing leaps and bounds.

Assessment UI Design

Security Assessment Tool

To design and create a component library for a Virtual Try On experience across multiple brands of a cosmetic company. The designs were created to fit across different platforms, multiple device widths for android and iOS.

The project tasks were to build out designs for each of the features of a Virtual Try On application and to standardize designed components to be used across all brands. The brands of our main client all have their own unique identity in terms of brand and style, therefore the components needed to be simple and versatile while fulfilling the complexity of the features of the VTO app.

Virtual Try On Designs

Component Library

My Work

Delivery Design for Asset Movement

The client seeks to create a modernized, human-centered branch communication strategy to improve end user service using modern capabilities. We designed scenarios which highlighted key channels of the ideal state of branch communication.

Envisioning The Ideal

Communication Vision

Create an internal hub to house and share research across independent research teams. Connect and communicate research and research initiatives.

The journey started by adapting the clients proto personas and create a flow of the Innovation Hub. The purpose of the journeys is to show how the Innovation Hub provides a solution for 2 roles within the internal research themes.

Persona 1 is Leo, a content consumer using Innovation Hub to explore their interests and projects. He wants an easy and intelligent search tool that houses every document, video, or other media.

Persona 2 is Sam, an executive looking for a broader look at the initiatives within the teams. In order to be perceived as a leader in the market, they need to easily understand how they are progressing towards our strategic goals for innovation and what value the company is getting from them at a high level.

Proto Personas

The team worked with stakeholders to find the right solution for a content hub. The content will be pulled from different sources, instead of migrating to a new place. The content hub will be able to search and locate the specific data and intelligently. The content is organized and categorized for high level viewing as well as the ability to deep dive into projects and their documentation.

Solutioning a Content Ecosystem

Internal Content Hub

An initiative in effort to learn about existing opportunities for user experience improvement for a data company. This interview will help us better understand the challenges and limitations of the client and better understand what our partners are saying about the data cloud services.

We started with a heuristic evaluation using Jakob Nielsen's 10 general principles for interaction design.  We evaluated the current state of the cloud service platform to highlight the technical and usability issues. We focused on the landing page and the sign up experience because it is the front door of the entire platform experience.

We talked to professionals of varying titles and backgrounds that would interact with the cloud service platform. We validated our personas with their insights. These personas were then used to model the customer journeys.

In addition to the heuristic evaluation and person a validation workshops, we also conducted usability testing. Our subjects were small business owners that are giving feedback on the current state of the cloud service platform. They gave us valuable insights on how people approach the cloud service platform with or without a technical background.

Assessing the Current State

After all the research is conducted, the team synthesized the data and insights to create new customer experience flow.\nThrough the research we concluded:\nFeedback indicated that the landing page seemed geared towards developers and lacked relevant information for a wider audience.\nWe observed mixed emotions regarding the language used in the "Credits" and "For Free" sections of the landing page.\nUsers are unclear about the purpose of the "Verification" section and would benefit from more explanation to help them understand why this step is necessary.\nThe current taxonomy of the dropdowns are not helpful for users. With this feedback we adopted changes that would alleviate these critical pain points.

Customer Journeys

The team created 2 prototypes reflecting the journeys of a small business owner and a large company signing up for the cloud service. The new experience enhances:\nEnhance promotional content and value-add of other GCP products on the landing page\nCustomize the content based on data input throughout within sign-up pages\nProvide transparency throughout the sign-up page process, including adding clarity in the identification verification\nImprove visual and content hierarchical throughout the entire journey\nWith another round of moderated usability tests with the same group of people, we validated our prototypes. We gathered positive feedback with potential opportunities.

Final Experience

UX Showcase

Work

afiye is an experimental social media application and digital home for families to stay connected by sharing media of cherished events

Promo Video

The purpose of this project was to research, design, and develop an app by integrating multiple technologies using the experience and skills our team have gained during our time at Drexel University into a coherent product which effectively communicates a message or to solve a need. That need was to address family communication during the pandemic and our mission was to improve it with our app.

Overview

afiye comes from the twi word “efie”. Efie means home in twi, one of the popular dialects in Ghana, where family is paramount and so households are much larger in order to have the whole extended family in one place. This mirrors what we set out to do with our project, creating a centralized place for an entire family to share.

Why ‘afiye’

We wanted to quantify the makeup of families and how they interacted with one another. Leveraging our network of peers and our own families we distributed a general survey and encouraged them to share them with their own friends and families. We were pleased that only 36.6% of our respondents were in the 18-22 age bracket as the results were able to give us a better picture of how a wider range of demographics interacted with their families.\nReviewing our results, the most frequently used social networking platforms used in family communications were Facebook and WhatsApp. Additional data gathered led us to the conclusion that both of these were utilized due to their accessibility and methods of connection.

User Research

We started our research with initial user interviews and asked our users questions based on a creative exercise that would help us better develop the idea behind afiye. With remote interviews over Zoom, all involved people could remain safe during our interview sessions. Our initial questions allowed us to gain a better understanding of our target audience and ask them exactly what they wanted out of afiye.\nFrom those findings, we found a problem that needed solving and that was the overwhelming nature of social media. Many interviewees said that social media can sometimes be troublesome to search and navigate through, especially in terms of past events. One of the major negatives to social media was the amount of noise and unimportant posts that were not important to users.

User Interviews

Our users wanted a simple digital space to share memories, and stay connected with ​their loved ones. Our challenge was to design a digital experience with features that supported our users in reaching their goals. The web app afiye addresses family communication during the pandemic and how it was once difficult or cluttered which makes the message behind afiye that much more impactful.\nWe knew it was extremely important to make users not only confident in afiye’s security, but also in navigating through it. 

Setting afiye’s Identity

Given that we had a very broad user age for our target audience, we wanted to aim for a minimalist and simple design so users of all ages could easily interact with our platform, especially the older generation who aren’t traditionally used to new technology.\nWe had to ensure our platform aimed to not replicate existing family platforms and rather just focus on cherishing the important memories as that is what our users want.

User Personas

Our onboarding should be simple yet interactive enough to explain our platform and how to use it well. It should also aim to highlight how we prioritize privacy to ensure new users feel safe using our platform right off the bat.\nWe had to ensure our platform aimed to not replicate existing family platforms and rather just focus on cherishing the important memories as that is what our users want.

Journey Maps

We tested our build through multiple iterations from the initial UI prototype to our final developed build. Getting feedback from primarily through out peers in the department with the Digital Media senior cohort was insightful as well as they gave out great styling critiques. We also got a lot of critical feedback from the UI to minor bugs from our other testers which helped our app become what it is today.

Usability Testing

Wireframes

While everyone on the team has had ample experience with development, for many of the members, this was the first time working on a project of this scale with multiple developers active at once. This created many new challenges stemming from ensuring that everyone was always up to date on their code base and clearly delegating tasks to ensure that multiple developers were not working on the same assignment at once. To best prevent accidental overwrites of each other’s work, the team opted to employ a forking model for our repository management and changes would be submitted to the primary repository via pull requests. This allowed for proper reviews to be conducted to ensure that bad code did not make it into the main repository while also allowing each team member to work freely on their changes.\nSwitching the team from collaborating on design to collaborating on development was a longer process than expected, but the lessons learned from working as a team while designing proved crucial to optimizing our development workflow. Clear delineation of tasks and assignments made it easy to pinpoint when any individual was having difficulties with an aspect of the project and allow the rest of the team to assist as necessary. Maintaining forked repositories proved to be the correct decision as it allowed for front end and back end technologies to be experimented and iterated on independently so as not to override the work of the other. And our review process made it easy to bring the two together if one end of development made more progress than the other at any point in the project.

Version Control & Collaborative Development

With the team using GitHub for version control and submitting changes to the primary branch, the development pipeline was ready and allowed the team to get comfortable working on a large-scale project alongside multiple developers coding at once. For anything that needed to be added, changed, or fixed, the team used Discord and a GitHub Scrum Board to document and communicate what needed to be done and when. Using what we have created in Figma and our high-fidelity wireframes, we converted all of the elements into code. The blessing of the wireframes is that the sizings and positions of elements were already prepared so coding them into afiye and pushing them on the live site was a successful process.

Front End Development

This was the team’s first foray into such a complex backend system. Many mistakes and challenges happened along the way to our final product. First and foremost we learned the lesson of completely and properly laying out our data models and how they will be utilized in the application as not properly doing so leads to numerous headaches over the course of development. Additionally, we felt the pains of working remotely when it came to troubleshooting our local development environments, especially since we had to maintain consistent version and environment controls in both Windows and MacOS.\nOver the course of this project, our greatest success is that we demonstrated our adaptability. Prior to this project, no one on the team had substantial direct experience with any of our core backend technologies, NodeJS, MongoDB, and Neo4j, but our previous experiences with other web development technologies allowed us to successfully implement all three in our final application.

Back End Development

afiye itself will not live on after this project to become a company or an official platform. However, the lessons each of us learned will be taken into our careers to create exciting experiences for our future users.\nThe hardships faced in our capstone project have aptly prepared us for our careers in the creative and technology industries. We have learned vital lessons in teamwork and communication that will allow us to be successful in any workplace. Especially the need and benefits of having an established and agreed upon pipeline from ideation to execution that allows the entirety of a project to move smoothly from one phase to the next and accommodates any setbacks or resets along the way. Collaborating in user interface design and development are fundamental in succeeding in these industries, and while it took us a moment to find our footing completely under us, the flow of passing tasks off to one another became yet another vital lesson to each of us as succeeding or faltering at this step we found to be the biggest bottleneck in our project.\nTogether we grew as a team, and through our collective work we were able to succeed in this project. The final product may not have been everything that each of us envisioned it would be, but collectively we are proud of our accomplishments and the challenges we put ourselves through. We never thought of this to be an easy project, and it certainly proved not to be, but the final form of afiye is a testament to our skills and our ability to grow as designers, developers, and researchers.

Next Steps

afiye

Thunk is a party game centered around creativity through divergent thinking.

Thunk is a game. Our team initially started with the idea of building a creativity enhancing game. In the beginning of the project the team decided that we did not want to set ourselves on a name just yet. It was our belief that choosing a name before even starting to develop the idea of the project would greatly hamper our direction. For the first few weeks we ran with the temporary name Project Dali, named after famed artist Salvadore Dali given this Dali was selected to embody the ideals of bizarre dreams and surrealism, though the latter idea was later dropped. We anticipated the final game would be focused on creative thought and pushing the party of users outside the box. As the project developed, we outgrew the temporary name Project Dali. After long internal discussions and narrowing down a pool of names Thunk was finally settled on to embody the mood of the game, creative and thought provoking yet still maintaining a fun attitude.

What is thunk

We started our research process by running Interest Interviews to ensure we were talking to users from day one of the project. We took part in a creative exercise conducted at the Rhode Island School of Design created by Industrial Design professor Cas Holman. Additionally, we gathered data as to what other party games like this people played regularly/with their friends and peers. While there was a decent spread of games that our interviewees played, there was a general interest in our project as it targeted creativity through divergent thinking.\n From that information we made user personas to associate who the ideal player is. Each user persona we developed was created with our 18-25 year old college demographic in mind. Our three user personas wanted to not only flex their creative muscles. Some personas did not want an overly competitive game nor a game that is too complex or strenuous to setup. They also were looking for a game with a focus on social interaction and not just for points and winning. Our user personas echo our users and how they interact with Thunk as a whole.

Taking these personas we designed user journey maps to better emphasize their high points and fix their low points. Each journey map was given a similar scenario where groups of college students wanted a game that requires little to no setup. Also, a game with gameplay based around creativity was something each persona felt most comfortable with, due to the lack of an overly competitive nature associated with the game. Thunk being a game that is playable on a phone from a host device streamlines the joining and playing process which makes our personas more than happy to join in and play Thunk. Our focus was on making each user’s journey similar to these journey maps, simplified and yet extremely fun to play, at a moment’s notice.

We interviewed two of our Game Design teaching faculty at Drexel University: Tony Rowe and Robert Lloyd. Tony gave us valuable feedback about our UXR methods involving playtesting and surveying. He suggested for us to use Likert Scales which give both easily digestible information about our game and make it so that the team can quantify change over time easily. By asking about how long players feel they were playing, we can better understand if the game felt fast or slow. We should be shooting for a time that is relatively faster than the actual game time, but not too fast. Too slow, and we can ascertain that players find the game boring. Too fast, and our game becomes unmemorable. Rob Lloyd pointed out that our game was “too normal”. This created a new challenge for us. We didn’t have any mechanics that really facilitated creativity, and Rob helped us brainstorm ways to showcase creativity while keeping our base mechanics in mind. In this meeting, we created the idea of “Switch-Ups”. This breathed new life into the game and gave us an edge over our competition. Switching out game mechanics between rounds is what we chose to keep the game fresh. Simply, we change the rules to keep people interested in the game. Though extremely random, Switch-Ups can alter game play in such a way where each time you play, something new is bound to happen. The idea behind Thunk is that the prompts and Switch-Ups will be dynamic and be a part of an ever-growing list so that a near endless amount of possibilities of rounds are available to players.

Expert Input

After our development team developed a working prototype of the think twice game mechanic, UXR went on to test this in order to gain insights on the functionality of the game.\n Users enjoyed anonymity: reviewing some of the answers and realizing who said what at the end of a round was one of the most exciting parts of the game. Users enjoyed playing with friends as they felt comfortable interacting with each other and sharing inside jokes. We realized no more than 8 players would be too much for people to enjoy the game.\n Designing with multiple people is very different from working alone. As a team we strived to ensure that each member was part of the team by developing ideas individually, sharing them with each member as a team and then discussing which ideas would allow users to achieve their goals in an efficient manner.

Playtesting the POC

We set out to project a unique visual identity that reflected our user research by focusing on color, typography, shape, and microinteractions. Our initial idea was to establish a cooler mood with our user interface whilst keeping a playful energy. We considered the game designer’s workflow in creating concept art for the project while executing UX practices. The addition of funky personalized avatars, music and an extroverted narrator are elements which helped the game have a lighter tone whilst also keeping it fresh. We wanted to be inclusive of most devices which is why we followed responsive design for mobile, tablet and desktop screens.

Design

Development

Thunk

A real estate application targeted towards college students looking for safe and affordable housing during their academic year.

Many real estate web applications develop for a user base consisting of adults looking for a home for themselves or their family. Many of these apps assume the user has a full-time job and thus highlight certain requirements for buying houses such as credit score, tax statements, etc.\nThere is a wide population of people age 18 to 22 that are full- or part-time students looking for safe and temporary homes, especially within university settings such as Drexel. Most users in this demographic are living alone for the first time and they have little to no experience going through the process of agreeing to a lease or contract, and budgeting money accordingly.

The Case at Hand

There is a lack of real estate and budgeting resources catered to young adults or first-time renters. The goal of our app, ApartMentor, is to ease the process of finding homes for first-time renters whilst also ensuring that the user maintains financial safety and stability.

An Analysis of the Situation

The Problems & The Solutions

These issues that we’ve seen resolved in other apps and websites include teaching accommodations for new renters and budgeting tools. In our similar app comparison, we mostly observed accommodations for new renters. We looked to these tutorials as potential models for our app’s Mentorship feature.

Research Into Existing Systems

Methodology for Design

The application begins with a series of 4 questions. Our app is heavily focused on the educational aspect of renting an apartment for the first time. Because of this, instead of introducing the user to a tutorial of the user interface on initially opening the app, we give them approachable questions that ask about the user themself. We felt that this would give our app a small bit of personality and connection with the user, while still allowing us to gather information to cater the ApartMentor experience to what each user needs.\nWe felt these four questions would get us the critical information we need to make the application useful to the user without overbearing them with too much on startup.

App Interface

From the map, the user can search for listings that fit within their criteria. Under the “Filters” tab, the user can adjust their budget, change their central location, and add or remove filters to search for. We included adjusting the budget on the top of the filters section for the cases where the user did not enter a budget on the app yet, and for when the user wants to search for apartments that are outside of their current budget. Next is central location. This is one of the most important filters because if people are searching for apartments near different colleges or job opportunities, they need this information to be easily findable and changeable. From here, the number of bedrooms, bathrooms, and features are available.\nFeatures may not always be complete necessities for the user, but they’re aspects the user wants prioritized when the application organizes listings. This can include things such as if an apartment is pet-friendly or if it has nearby public parks. Through the features, apartments won’t be added or removed from the Listings tab, but the order in which they’re displayed is changed to reflect the user’s preferences. The features are typically things we thought of as luxuries for the user, and while these do hold importance to the user, the most important thing for the user is to find an affordable apartment, so we don’t want to limit their results.

Filtering

By tapping on a single listing, the user can view all the details about the apartment. This includes the available features, a description, a map with nearby public transition options and amenities, a budget pie chart, apartment requirements, and a form to contact the realtor. The pie chart displays how well the apartment fits in with the user’s predefined budget, and can be used as a visual aide to determine if any given apartment is a viable option. Considering factors that change per apartment, such as utility costs, can affect this pie chart, and thus an apartment’s viability. Because signing a lease is very important, but also very stressful, we included all necessary documents for signing any given apartment at the bottom of the page. Having this information easily accessible will allow the user to understand the leasing process and the terms they’re agreeing to when signing an apartment. The user can contact the realtor from this page, which can be used to question about the apartment or schedule a showing. Finally, the user can report a listing, which helps deter against fake and suspicious listings.

Listings

From the main navigation button, which is the ApartMentor logo on the top of the app, the user can view the Lessons page. Our lessons are separated into 4 Stages: the app introduction, Looking, Renting, and Maintaining an Apartment. We chronologically organized the lessons so people won’t have to jump back and forth between them throughout the apartment finding process. Users can track their progress in each Stage from the Lessons screen, as the next lesson in each stage they must complete is the initial card facing them.

Lessons

The final task flow the user can access on our app is Budgeting. By tapping on the Budgeting section from the navigation, the user is brought to the Budgeting page. Their monthly budget is displayed, and can be manually edited. There is a pie chart displaying all spending done by the user, color coded and separated by category. Available budgeting categories include: Rent, Utilities (separated individually), and Secondary Expenses (such as groceries and school fees). This information is useful for initially finding an apartment, but also keeps the user in the app because it becomes a lightweight money management application for handling their spending habits. Users can choose to connect it to a bank account in the Edit page, at which point it will gather information about personal spending and use that to understand what the user is overspending on and where they could afford to spend more. This is shown as a notification at the top of the page, stating “You need to cut down on _!”. The user can then use this information to change personal spending habits.

Budgeting

Through our Apartment Maintenance lessons and Budgeting section, we increase our app’s longevity by increasing recurring users. It no longer is just an app for finding an apartment, but it becomes an app for maintaining an apartment and ensuring one’s financial security for living on their own for the first time. In this way, we aren’t just a simple application for finding apartments, we are an ApartMentor.

Brianna Buissereth

Projects

Work Projects

School Projects

Get in touch if I seem like a good fit for your project or team.