Kaus Insurance

I began my research by downloading several gift card apps available on the iOS app store. As I went through each, I took several screenshots of the designs, compiled them into a Figma file, and began notating the different colors, treatments, types, layouts, etc. of each. Below are samples of some of the competitor's screens, including the onboarding screens (when a user first downloads the app and is opening it for the very first time), home screens (which are the main screens a user would be on once they've started using the app), and browsing screens (where a majority of the content lives).

In starting the research I created a chart in excel of several direct and indirect competitors. I reviewed each of their sites, a couple of external articles, and researched each of their estimated market shares while taking notes. I used this research to understand where each company would fit on a chart based on how much market share they have and how niche of a product they offer. This visual would help me see if and where there might be market gaps that WorkWise can use to their advantage.

The more niche focused companies mostly just had a job board, some helpful articles and maybe a couple of side services, such as job alerts. The more broadly focused companies had all the same things as the niche focused companies, but also dedicated a decent amount of their site to other features such as social networking, company ratings, compensation data, etc.

As there are a ton of different sites people can use to look for jobs I wanted to created this chart to help myself visually see if and where there might be any gaps that could potentially be filled by WorkWise. I decided that including additional features would be important to help WorkWise land in the more broadly focused area, with a goal of gaining more market share as the company grows in order to compete with some of the current heavily used sites such as Glassdoor and LinkedIn.

I used the research gathered, along with the user interviews and survey data, to start synthesizing and analyzing. I drew out some key insights, such as how almost all users are wanting to see more compensation data, to help me focus in on and address the main items users are looking for in a job board. This helped me to visually see what is most important to the users and, in referencing back to the competitive matrix, how I could use the market gaps to WorkWise's advantage. This would also help guide the direction of the project to make sure I was continuing to design for the users.

From the user interviews, survey data gathered, and research on other job board sites, I was able to come up with the main navigation for WorkWise. I referenced other job boards for ideas on how to sort all the content and I utilized user interviews for ideas on what additional content should be included and where. I had found that a lot of sites actually lack in additional services and information that can be key for finding and landing the right job, such as interview prep and compensation data. Interviewees and survey data indicated that additional services were important to, so the sitemap helped me visually see what and where these services would make the most sense.

As similar to previous projects, I not only thought through the straight forward path for the navigation (indicated with the black lines and arrows), but I also considered how the different individual pages can relate to each other (indicated with the gray lines and arrows).

The sitemap also helped define which pages to design for this project, as well as, what their product requirements would be. The product requirements are listed in the white square boxes connected with red arrows below.

In reviewing the various gift card apps, along with money sending apps, such as Venmo and PayPal, I came up with the initial bottom navigation options. I knew I wanted to keep these simple and easy to get around for anyone, as the target audience for this product is pretty large. The idea was to make the app user friendly enough that anyone from young adult to elderly could use it without issue.

Once I had the bottom navigation set, I then thought through what the goal of the app was (to make it fun and easy to send and receive virtual gift cards) and how to simplify the pages to accomplish that. This also helped me to define the screens that I would need to create for the app to have a fully functioning prototype.

Below are the mobile wireframes for the same desktop screens pictured above. One of the goals of the project was to create a responsive website, so it was important that searching and applying for jobs is just as easy on mobile as it is on the desktop.

For browsing, due to the smaller size of mobile screens, the list of job posts is a separate page from the job descriptions. This appeared to be industry standard for the other job boards that use a similar layout on desktop, that when it gets down to mobile, they end up splitting the pages.

And again, due to the smaller size of mobile screens, all the available filters on the browsing page are included in a modal. The filters are still in the same order, though, so as to keep consistency between desktop and mobile.

The quick apply screen sized down really well for mobile and was able to keep the elements on the same page and in the same view as desktop.

And finally the job application tracking page that is part of the users account has sized down cards for all the jobs they've applied to. There are still filter and sort options, but as similarly to the filters on the browse page, all filters moved into the modal. I also ended up including an area of the company's logo in the top right corner of each card to allow for an easy visual cue for users as they scroll through their list.

Another set of the wireframes I created were for the browsing screens on the app. It shows a sampling of the screens a user would see as they go through the purchase process.

The first screen allows the user to enter the recipient's information, including selecting how they want to notify the user. In my research later on, I found that people were wanting some social media aspect to the app that would allow them to search usernames to send notifications through the app. Although I wasn't able to incorporate this feature now, it was something I planned to add to the future state of this app.

The second screen shows what options users have if they chose to add a challenge with their gift card. I made just to include an option to skip directly to checkout on the prior page, though, so users weren't forced to include the game as I felt this would turn some people away. I also decided to have the number of levels for a game be based on the amount of the gift card. As I was creating this, I was concerned people may select five levels for a small amount gift card, which could make for a bad user experience on the recipient side. Again, the goal is fun and inviting so I didn't want recipients to feel like it was a chore to unlock their gift card.

And finally, the last two screens are the payment and confirmation page. I received really good feedback from my mentor that on the payment page, the new payment method should instead be a link to a separate page, to help cut down on the scroll for the payment page. I made sure to incorporate this in my next iteration. And for the confirmation page, as standard to any payment confirmation page, I made sure to include a link to view the receipt of what was just purchased.

After receiving feedback from both my mentor and from fellow Designlab students, I began working through the first couple high fidelity iterations.

I chose to use a very, very light yellow for the background to help soften it to the users eye. I also felt that this helped the green stand out nicely for users to easily see call-to-actions.

On the gift card received page (the second screen), I chose to add in a "mark as inactive" button at the bottom. I realized that as users used up their gift cards balances, they would probably want a quick visual to know if there is still money on a gift card or not, especially if they're in a hurry. So I decided to add in the button to give the users that option.

I also added in a new screen to come up when the user selects to view more on their gift card points that includes a history of their received and applied points (the third screen below). My mentor gave the really good feedback that this is a view users would need so they would have a record and would be able to look back and track their gift card points. From there the user can then move on to apply the points (the fifth and sixth screens).

For the gifts received page, I changed up the layout treatment so it was more obvious to the user that they're on a different page from browsing and/or applying gift card points. And since the gifts received will only be in one bucket at a time, I thought it made sense to provide those buckets at the top for easy and quick filtering, as opposed to having a modal come up, like on the browse page.

The gifts sent pages (the last two screens below) didn't have much feedback on changes needing to be made, so they pretty closely follow the original wireframes. I had referenced Square receipts for the layout of the receipt, which I believe is relatively close to a standard layout for receipts in general, making it easier for user to follow.

These are some of the first high fidelity screens of the desktop wireframes pictured in a couple sections above. I used feedback from my mentor on the wireframes to adjust some of the elements on these first few high fidelity iterations.

Going left to right and top to bottom:
For the main browse page I mostly kept the same layout based on the minimal feedback prior to usability testing. I increased some of the padding to help the page not feel as cramped. And I played around with the search bar and removed the "search" word and replaced it with an icon. I ultimately changed this back to the words in the final iteration as I felt it was more consistent with what the user would have seen from the homepage. I also toned down some of the colors and strokes from this iteration to the final iteration to create a softer look.

The more filters modal also didn't have too much feedback yet on changes needing to be made, so this first iteration mostly followed the wireframe. I would learn some useful information later, though, in my usability testing that would greatly help the skills filter on this page. In this first iteration the skills are added as checkboxes, with just the first few being visible. When the user clicks on show all skills, it was pointed out to me that, depending on the number of skills included (which should be robust to meet the goal of better filters) this could make the modal excessively large and difficult to be able to scroll and see all skill options. I would began to think through this feedback and how to address it in the next iteration.

The third screen is, again, a sample of what the quick apply process would look like. I adjusted some of the padding to give just a little more breathing room around elements. I also decided to nix the option to save and close as the whole idea of the quick apply is to be able to apply in just a couple of minutes. So the process is supposed to be fast enough that the user shouldn't need to have to come back and finish.

And, finally, the job tracking area of the user's account is pictured last. It also mostly followed the initial wireframe with one main change in that the list of jobs applied to were converted into cards. This was to help create a more visual separation between each card.

For the high fidelity browse screens of the Gift It app, I chose to use two colors for selections. The buttons that change the view of the screen are using the main green color, whereas selections on a page (such as how to notify the recipient of their gift) was put in a light denim blue.

I also created the screen of the interaction the user would get if they were to click the X in the top right corner at any point during the selection and checkout process. Based on my mentor feedback, I chose to use iOS controls for those messages, as that's often standard with mobile apps and easier for the user to recognize.

On the payment screens, I referenced Instacart and how they handle users changing quantities. I thought it was a really clear visual for the user, as well as, allows for the increase and decrease selections to be far enough apart to be easily clickable.

And in incorporating the feedback from my mentor, I collapsed the new payment method option into a clickable link that will take the user to a separate screen to enter their new payment information. This greatly helped cut down on the size of this screen which will create a much better user experience so they're not having scroll a bunch to finalize their purchase.

Below is the affinity map diagram I created on Miro based on the usability testing I conducted. A few of the major things to come out of testing was that the map on the homepage was very confusing, the skills section in the more filters modal was not going to be very helpful in its current form, and the company logos should be included anywhere a job is referenced (browse jobs page, quick apply process, job tracking in the users account, etc.).

I had a really good idea of what needed to be adjusted, so after connecting with my mentor, we came up with a plan of how best to address these items and I moved on to working on the next couple of iterations of the screens.

Below are the final iterations I made for the WorkWise homepage in both desktop and mobile views. Since there was a lot of feedback that the map was confusing, I swapped it out for a horizontal scroll of featured jobs. The featured jobs would be a variety of types of jobs and different locations.

I kept in the 1-on-1 coaching (additional services) that WorkWise provides, but adjusted some of the color to make it so they're not so heavy. I also added in a quick sentence to explain what each service does/provides.

For the LadderPay Partnership section, the layout mostly stayed the same but I updated the compensation report image to look more like a report, as opposed to just a paper with writing.

I also updated the treatment of the reading resources as I learned that the skeuomorphism designs from the first iterations really aren't used anymore; that the more flat designs are the preferred treatment in this time. And just like with the coaching section, I added in a quick sentence for reach reading resource to give the user a quick understanding of what type of articles would be included.

Below are the final iterations for the other desktop screens pictured above in both the wireframes and high fidelity sections.

Going left to right and top to bottom:
For the main browse page, this is where I switched back to using the word "search" in place of the icon. As I mentioned before, I felt this was more consistent to what the user would have seen coming from the homepage, if that's the route they took. I also used a super light blue-ish gray for the background to help the cards and other elements stand out from the page a bit more. The stroke around the selected card was lightened, while the opacity for the unselected cards was dropped a bit, to help with the visual affordance on the page.

For the more filters modal I changed the skills section from being a list of the skills with checkmark boxes to being a drop-down that can also act as a search bar. As the user starts to type a skill, as long as that skill is included, it will show up for the user to click on. If the skill is not included, my idea was to have an option to send that skill to WorkWise so they can vet it and decide if it should be added to the overall skills list.

In the sample quick apply screen I added in the company logo next to the main job information. It had come out in my usability testing that users preferred to have this included as it's a quick visual cue for users.

And, lastly, the job tracking area of the user's account was updated to follow the same color scheme on the main browsing page. So the background was changed to a super light blue-ish gray. And I adjusted the navigation on the left side to be a little more subtle. It has the selected page in a dark color with the other pages in a lower opacity to visually show the user which page they're currently on. I also added in the company logos to each card, based on the usability testing feedback. And my mentor had some great feedback to add in a color dot to indicate what step the application is in. For example, a blue circle is used to indicate that the application has been submitted. Then once the user is into the interview process, such as a phone call or in person interview, the circle changes to green. And if the application is ultimately rejected, the circle changes to red.

Below are the final iterations in mobile view for the same screens pictured above in the wireframes and high fidelity sections.

Now being in mobile size, the search bar on the browse jobs page swaps out the word for the search icon. The same is done on the mobile homepage, so it remains consistent to what the user would be seeing. I also added in the company logo to the job description page, as I had on desktop. Along with this I increased the padding, as well, to help the readability on the smaller screen size.

The filters screen on the browsing page was adjusted to be full bleed to the bottom of the screen. Also, based on feedback received, I moved the clear all option to the bottom of the modal.

For the quick apply screen, just as I had done on desktop, I added in the company logo to the job information at the top. I also received really good feedback from my usability testing that users would like to be able to review their application before submitting it to ensure they made all the correct selections and entries. So I updated the button to take them to review their application before submitting.

And the last screen, which is the job application tracking page in the users account adds in those additional elements from the final desktop iteration, such as company logo and a color circle to indicate the status of the application. I also changed the filter from being just an icon to being an actual button. This is consistent with how the filter is presented on the browse jobs pages.

Referencing back to my mood board for bright and loud designs, I decided to select a robust group of vibrant colors for this project. In order to make it not too overwhelming, I created shade counterparts that I could fit into more places.

And in continuing with the vibrant fun theme, I selected GT Walsheim Pro as the typeface. It has a nice rounded sans-serif that lends to a feeling of playfulness, while still being professional and easy to read at the smaller pixel sizes in both desktop and mobile screens.

With the goal of having the app appeal to a broad audience, I wanted to find some fun, yet slightly softer colors to use. I decided to go with a lighter green and blue as the primary and secondary, respectively. As confirmed in my usability testing, the green makes users think of money, which makes sense for a gift card giving app.

And for the typeface, I wanted it to be something that is easier to read, especially at smaller pixel sizes since I was designing for a mobile app. I felt that GTF Riposte satisfied this requirement, while also still being a bit fun with its very rounded shapes and super minor serifs.

There isn't much imagery needed on the app, so I chose to stick with illustrations to help lend to that more playful feel. Other than these few illustrations, mostly just seen on the onboarding screens, the rest of the images are of the merchants' logos for the available gift cards. I wanted to give users both the visual cue and the words for easy browsing through the merchants.

This was my first capstone project in which I got to create the timeline and deliverables. Coming off of the Kaus Insurance project, which was the first full UX/UI project that I completed start to finish, I had a good reference point as to what deliverables would make the most sense for this project. I also received really good assistance from my mentor in coming up with ideas on how to expand the competitive landscape analysis deliverable. This competitive matrix really helped me to visually see gaps, especially when the marketplace is a bit overcrowded with options.

Again, I still found the user interviews and usability testing to be the most difficult to complete in this project. Going through this design program while still working my full time job was proving to be a challenge with scheduling these meetings. Because of this I wasn't able to meet with as many people as I was hoping to in order to gather more data and get more feedback. So I would like to set up a couple more usability tests to get additional feedback on the designs, as well as, build out more of the interactions for elements. This project was really helpful to me, though, in better understanding how to create a timeline for a project. Where Kaus Insurance helped me to understand the different design stages and deliverables for a project, WorkWise helped me to better understand how to create an actual timeline for those deliverables.

Part of the project requirements was to create all the screens for a mobile app, which although was very difficult and time consuming, it was also incredibly rewarding at the end. I was able to take a step back and look at all the progress I had made. It also made the usability testing a bit more fun for the testers as they were able to navigate around much more than in my previous projects.

In my usability testing I received really great feedback on some additional changes that should be made. Due to limited time available for the project, I wasn't able to get to another iteration on the screens. Now with a bit more time on my plate, I plan to add in the updates that came out of my testing and then do another round of testing with more users to gather additional feedback. Through this additional testing, I also want to gauge how truly likely people are to use this app because if it's a decent amount, then I think it would be a great project to work to productionalize the app.