VIA - Voting App Research and Prototype
As part of the final project for my Interaction Design course, my team and I pursued the research and design behind a technological solution to voting - a challenge that has yet to be met with a successful and secure solution on a widespread scale.
We began with research. We looked into current voting technology as it pertained to mobile applications and discovered a lack of sufficient cyber-security measures made app-based voting a non-reality. Our professor encouraged us to continue with the thought experiment, so we ended up looking into voting apps for reality television and online competitions, as they had implementations that were applicable to our goals.
We decided to develop a 2 x 2 matrix to develop a greater understanding of our goals and challenges. Developing the spectra of operation for the matrix took some debate, but we settled on Security v. Accessibility, our research having indicated that these two aspects of our design were paramount.
Using the insights gleaned from our market research and our spectra case study, we narrowed in on a paired set of applications, one for mobile, and the other for a tablet or kiosk with accompanying scanning software. Secure registration and account verification were prioritized as part of the sign-up/log-in process. We set the default screen to use location data to access and display current and upcoming locally registered elections and ballots.
The maps page pins nearby polling locations, with different colors indicating the wait times at each. If the user is logged in on the device, a secure session is established, indicated by the lock icon in the upper right of the fixed header. If the user isn't logged in, they are prompted to do so, and cannot access ballots unless logged in. They can still access the map page, and navigate to local polling stations.
The kiosk offers much the same functionality as the mobile app, but has a larger focus on documentation for verification purposes.
Islamic Association of Collin County - Community App
This is an application I chose to make for a quick-edit in a class of mine. I chose to remake a poorly-implemented app published by my mosque. The app appears to basically reflect data pulled directly off the mosque's website. There's no reason not to populate that data in that way, but there's a better way to present it for sure. I sent out a survey to a number of congregants, asking a number of questions. Based on the answers I got, I was able to put together a list of features to prioritize, and a means of developing the information hierarchy the app previously lacked.
My survey revealed a lot about the users. I learned that the primary motivation behind using the app was a desire to know what time to pray. The secondary motivation I discovered was a desire to know about upcoming events in the community. The tertiary motivation tended to reflect a desire to know more about or take advantage of the services offered by the mosque. Finally, the mosque itself is a non-profit and needs donations in order to pay its staff and keep the lights on.
Taking this information, the first thing I did was completely redesign the home-page. I went for a traditional setup: a masthead along the top containing the logo and access to a fold-out menu; the upper-body containing the prayer information, giving it the primary viewing position, while also allowing for it to fold in for perusal of the rest of the homepage; the weekly newsletter at the bottom-half of the body, allowing users to scroll through the goings-on of the community; finally the navigation-menu at the bottom, allowing users to switch between major screens.
These are the first of the edits I am planning to make in this design process. I need to pursue further ethnographic research and ensure that any decisions I make are informed by the insights I obtain therein. Below is a screenshot of the original app's homepage.
Brio Band - Health Monitoring App (Paired with a Physical Device)
These are two stills from an app layout I created for a class project. The brief required the development of a concept of an IoT Technology that filled a service gap in an industry of choice. My team chose to focus on medical-care, specifically health-monitoring.
The physical concept product we developed was a health monitoring band that paired with smartphones and other devices to report on an individual's vitals and alert users and their medical practitioners at the onset of any issues.
The software concept would act as an interface within which users could access and share data, and provide privileges to select account holders to allow family and close friends to monitor and be alerted of significant changes in the vitals of loved ones.
In our research we came across a number of trends that informed our target audience.
The first was the elderly, often living alone, sometimes unable to travel independently for medical appointments. The monitor and app combined would be an easy way for them to communicate with medical professionals, and for privileged access to data from concerned family or friends.
We also found an audience in truck drivers, whose long hours on difficult routes make it difficult to track vitals, especially for those prone to hypoglycemia, or the diabetic.
Our third audience lay in the chronically ill, those who require preventative care based on changing conditions. Our product could provide them with a means of conglomerating and sharing data as needed.
Finally, we found an audience with people who are just plain busy. For the high-powered executive on-the-go, if there isn't time for a check-up, no problem. The health monitoring device can record its information to the app on the phone, and that data can be shared with the primary-care physician of choice.
The final mock-up we created was a simple display of user vitals. The brief did not require more advanced wireframing or prototyping, so we kept it simple and easy-to-understand, with the hope of communicating intent over any real image of a final product.
Port of Peri Peri - Restaurant Application
This is a high-fidelity wire-frame I completed for a restaurant I worked at for 5 months. I used Adobe XD to create this prototype. The app aimed to serve as a customer portal, allowing for rewards account management, online ordering, payment management using the internal Apple Pay or Google Wallet API, gift card management, and more. I started off by studying some similar apps. I browsed through DoorDash, Grubhub, UberEats, even the Starbucks app. They all shared certain similarities.
The first commonality I noticed was a masthead along the top, within which branding, primary account access, and settings access all remained consistently available. I noted that this same masthead could be used to contain internal navigation elements, separate from the main navigation used between primary screens. This is visible on the "Order" screen, in which the masthead contains the secondary navigation of the screen for the menu.
The fixed menu along the bottom was another commonality I observed, a design choice pushed primarily by iOS influence. This was the primary navigation between screens. The icons I chose were mostly placeholders, and I wasn't a huge fan of the client request to use the logo as the home icon.
The "front page" of the app follows similar principles to a number of restaurant apps. As the Port of Peri Peri was deploying their gift card system alongside the app, the service was given top billing in the information hierarchy. Later in the development cycle, after my involvement came to an end, the "Featured Menu Items" were cycled to a horizontally scrolling block on the front page.
Even further on in the development cycle, long after my involvement came to an end, delivery ordering was completely removed from the app. Instead DoorDash came to an agreement to allow users to make their selections in the Port of Peri Peri app, but complete delivery orders within their own payment portal. Before that, however, we were still advertising for users to download and install the DoorDash app as a companion to our own.
The "Order Again" selection has very obvious functionality, as the restaurant has a number of regular customers who rarely deviate from ordering the same thing. I wasn't a huge fan of the "New Order" button being typed out, I had intended for it to be smaller and compact, a simple plus icon with the same functionality of opening the checkout cart and pulling up the menu to make selections from.
Insofar as aesthetic, I followed the internal style guide provided by the company, and maintained clean lines and white spaces to create a bright, cheerful look when paired with the signature Port of Peri Peri Red.
Ultimately, this project was one of my first real attempts to research an existing market, develop insights based on that research, and implement that research into an information hierarchy containing key features, as required by the client.
TAQWA Seminary Website Redesign
This project completed without me. I was asked to submit a mock-up for a redesign of a website for a religious educational institution. The existing website was sorely lacking in terms of form and function. It was my first attempt at developing a user-experience. This was also my first time using Adobe XD as a prototyping tool.
I was asked to create a mock-up of a more modern version of the website pictured. So I identified core components that needed to be addressed. The first was the logo. The entire top-left corner was the old logo, so I noted that as the first of many things to change.
I also wasn't a fan of the cold-open on the website. When I designed this, I was still infatuated with the landing page. I no longer feel the same, but I included it as a core component when I was identifying what to change.
I had plans to completely redo the navigation, but couldn't decide between a top-level navigation (fixed or otherwise), and played with the option of collapsing the navigation. I also reorganized the information hierarchy into a more effective sitemap.
I liked the "Hero Image" banner, as it was an informative tool for ongoing/upcoming programs for the institution. I was not fanatic about having two sidebars, choosing to find some other implementation for them.
Version 1 has a standard navigation menu, Version 2 uses the mobile-inspired "hamburger menu" made popular by Google in their native Android Apps.
I provided the same basic layout otherwise: a banner with upcoming event flyers and links to registration; the four recurring programs in button-form; links to course registration, listings, etc; a calendar; an upcoming courses menu. All of these elements were on the requirements list of the client, and were summarily delivered.
At the time, Adobe XD did not have some of the stellar functionality that it has now as a prototyping tool, so I can't help but look back on these prototypes as rougher examples of my work. Nevertheless, it was my first time trying to use UX principles as a part of my design process; I could feel the difference it made in my approach. For that reason, I am fond of this project.