Gift It App

A mobile app for sending virtual gifts cards, but with a twist - play for it.

Introduction

Gift It has been looking for a way to make giving and receiving gift cards not only easier to do virtually, especially with the onset of COVID-19, but also make it a bit more of a fun experience. They decided to start by creating an app for iOS devices that would allow senders to select a type of game that the receivers then play to unlock their access to the gift card.

project Note
This project was for Designlab's UX Academy course. The company and app are not real, but the research is real and the designs are based on real user and mentor feedback.
Project Year
2021
Project Link
View all project screens in FigmaView all project screens in FigmaView all project screens in Figma

Empathize

Empathize

Empathize

Competitive Analysis & Potential Market Gaps

In researching for this project I looked at both direct and indirect competitors. For the direct competitors I focused on finding their competitive advantage, how they show they focus on users, and any downsides to their products or processes. I used this information to help determine if and where there were any gaps in the market that Kaus could fill in order to differentiate themselves from all the other options.

I supplemented this with similar research done on a couple of indirect competitors, including Gusto (which has a platform to help manage payroll, benefits, onboarding, and compliance services) and Parsley Health (which provides primary care along with nutrition and lifestyle services).

Progressive

Competitive Advantage

  • User's can pick their own price.
  • Policy is built around that price given.

User Focus

  • Provides education material.
  • Posts and content written in a relatable way.
  • Flo character is just herself (it's ok to be different).

Downsides

  • Publicly traded company.
  • Ultimately answers to the shareholders.

State Farm

Competitive Advantage

  • Mutual company owned by the policyholders.
  • Private company, doesn't have to answer to shareholders.

User Focus

  • Focus is on an empathy approach.
  • Example: connects users with local volunteer opportunities.
  • Aiming to improve the users' lives instead of just selling products.

Downsides

  • Older style model focusing on agent selling.
  • Has a difficult time connecting with younger generations.

Lemonade

Competitive Advantage

  • Remaining premium money is donated at the end of the year.
  • Customers get to pick the charity to donate to.

User Focus

  • Content and emails are written in today's speech. And emoji's are used in a smart way (to connect with younger audiences).
  • Content created to attract new users AND for value-add to existing customers.

Downsides

  • Relies heavily on AI to communicate with users.
  • Small product offering (less options for bundling and saving).
  • Susceptible to hardships if too many claims come in. They don't have a pool of funds to pull from like typical insurance companies.

Market Gaps?

Non-Profit / Break-Up Premium Money

  • A percentage could go to a pool of funds to cover claims.
  • Another percentage could go to operating costs.
  • And a final percentage could go back to customers as rebates.

Other Recommendations

  • Provide education materials.
  • Have a human voice in all content.
  • Encourage user participation.
  • Add in social justice (donating to charities, volunteering, etc).

Card Sort Studies

Product Sorting

With the goal of the project being to build out a robust search filter and creating an easy to navigate e-commerce website, I turned to card sorts to get input from real users to help me organize all the information.

The first card sort was aimed at getting a better idea from users on how they think about and categorize insurance products. To do this I created an open card sort with 30 different insurance products and asked users to group the products however it made sense to them. Below is a best merge dendrogram that shows the level of agreement between participants when it came to product groupings. From this data gathered, I was able to determine the groups that should be used and which products should live under each.
This image shows, by color, the best groupings of insurance products based on a user card sort study.

Direct Competitors

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).

Givingli

  • Very colorful and artsy, which pairs well with their primary color of dark gray.
  • Embracing their brand of "boutique-quality" designs.
  • Onboarding has 5 screens before reaching login, although the "Get Started" button allows users to skip ahead.
  • Users can navigate around the app without having an account.
  • Their main typeface continues that elegant feeling with its serifs (Gastromond), which is paired nicely with an easy to read sans-serif (Montserrat).
  • The main feed is using cards with a mixture of imagery. They've also added in animations, which makes it a little hard to read at times.

GiftsApp

  • Uses a mixture of real images and illustrations.
  • Their primary color, green, invokes a feeling of money.
  • Onboarding also has 5 screens but the login options are available on each of the screens if the user prefers to skip ahead.
  • Users must have an account to navigate around the app.
  • Their typeface feels a bit more friendly as a sans-serif (GT Walsheim Pro).
  • The main feed has category selections that are for both different types of celebrations and different groups of people.

Gwick

  • Uses the least amount of additional imagery, so the users' eyes are drawn directly to the available gift cards.
  • They are also using green as one of their primary colors, coupled with a deep blue, invoking a sense of money and security.
  • Onboarding happens after the user creates an account and includes 5 screens. There is a skip button for users to move ahead.
  • Users must have an account to navigate around the app.
  • The typeface is a simple, easy to read sans-serif (Roboto).
  • Main feed has categories in horizontal scroll sections, similar to layouts used with tv subscriptions, such as Netflix.

CardSnacks

  • Only imagery included are the greeting cards and gift cards.
  • Their primary color is more of a teal and is the only app who has chosen a color background, which sets them apart from others.
  • Onboarding happens when you open the app for the first time. There are 6 screens and no button to skip ahead.
  • Users can navigate around the app without having an account.
  • Their typeface is also a simple, easy to read sans-serif (Avenir).
  • Main feed has categories of greeting cards that can be paired with a gift card. Several have animation, which can make it hard to see their CTA at the bottom of the screen.

Competitive Analysis

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.
No items found.

Survey and User Interviews

Along with interviewing several people, I also sent out a quick survey to help gather more data. The goal of both the interviews and survey was to understand how users decide which job board(s) to use, understand how users think about job search filters, and learn if there are any additional services users have been looking for but haven't been receiving elsewhere.

I wasn't too surprised by what turned out to be the three main job boards people typically use, LinkedIn, Indeed, and Glassdoor. They've been in the market for a while and offer some additional services, such as professional social networking and compensation data. And through my research I discovered that Indeed partnered with Glassdoor in July 2020, so now Indeed would start including compensation data with their job posts. So I had a good understanding of the main competitors for WorkWise and a start on what features I thought might need to be included in order to compete.
This shows the survey responses from users on what methods they use to look for a new job. The main method being Job Boards.
This shows the survey responses from users on what filters they find most useful when searching for new job opportunities. The top two main filters a majority of respondents find most useful are Location and Job Type, such as full-time, part-time, internship, contractors, etc.
This shows the survey responses from users on what they use or have used when searching for new job opportunities. The top two main job boards respondents use are LinkedIn and Indeed, with Glassdoor as a close third runner up.
This shows the survey responses from users on what services they would take advantage of while looking for new job opportunities, if offered free of charge. The top two main services respondents are most interested in are Salary Information and Job Alerts.

Survey and User Interviews

Near the end of the direct and indirect competitor research, I created and sent out a survey to gather information on how, where, when, and in what form people typically purchase gift cards. I wanted to better understand user habits and preferences so I would have some guidance in my designs.

I also conducted several user interviews, as well, to dig a bit deeper into the users' habits when it came to gift cards. An interesting key finding that came out of this research was that although people have a strong preference to give physical gift cards (instead of virtual), when it came to those same people receiving gift cards, more often than not they didn't have a preference between a virtual gift card or physical gift card.

Card Sort

Knowing I wanted the search filter to be robust and most useful to users, I sent out a card sort study to get a better idea of how people think about the filters when it comes to job searching.

From the competitor research and survey responses, I was able to come up with an initial list of filter options (pictured below). I then asked users to organize these with the most important filter options being at the top and the least important at the bottom. This would help me determine which filters to have readily visible on the search page and which filters could be included in a more filters modal or pop-out screen.
This image displays the best order of job filters based on a user card sort study.

Content Sorting

The second card sort was focused on understanding how people think about navigating around insurance sites and where they would look for each service provided, not just products. I chose to do a second open card sort study, again with 30 cards. Each card was a different service or action that can be taken on the site, such as filing a claim or exploring products. I asked users to sort each item into groups that made sense to them. Below is the resulting best merge dendrogram, which shows the level of agreement between the participants when it came to sorting the site's content. This helped me to start to think and plan out the navigational structure of the site.
This image shows, by color, the best groupings of insurance categories based on a user card sort study.

Define

Define

Define

Insights and How Might We Statements

Another part of the research I completed was interviewing several people to understand their current thoughts and habits with insurance policies and companies. I wanted to understand how they typically purchase insurance, what, if anything, would stop them from completing a purchase, and what triggers cause users to review and/or change their current insurance policies or company. From those interviews I was then able to draw out several key insights. Then using all the research I had, I began thinking through how we might address each one. Together these insights and how might we statements was the start of defining the direction of this project.

Insights and How Might We Statements

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.

Insight

One of the main services that interviewees found most useful in the job boards they currently use is a quick-apply function (one-click to apply to a job).

Insight

One of the other main services that interviewees found most is tailored searches (being able to search by more than just a job title).

Insight

Almost all interviewees wished more job boards provided compensation data, even if it's just a range, as it can be a key factor in deciding whether to apply.

How might we...

...make it easier for users to apply to multiple jobs in a short amount of time, such as a single sitting?

How might we...

...build out the search filters to provide enough options to narrow down searches but not be overwhelming or cluttered?

How might we...

...add in compensation data for job listings when other job boards haven't really been able to?

Insight

Interviewees wished it was easier to know if they have the right coverage. Some may research independently, but most preferred product offerings to be displayed more clearly.

Insight

Interviewees disliked how difficult it is to know exactly how much you’ll be paying. Quotes often leave out taxes and additional fees, which can make it tough to budget.

Insight

Poor customer service was another big reason for interviewees to change and/or leave their insurance company, as well as, bad press about the company.

How might we...

...help people make sure they’re getting the right coverage for what they have and feel confident about it?

How might we...

...clearly display all prices and help users understand exactly how much their policy or policies will cost them?

How might we...

...convey the quality of service that makes users feel comfortable, especially when dealing with claims?

Insights and How Might We Statements

From the research I gathered I started my synthesis and analysis by drawing out key insights. As mentioned above, the most interesting insight was that people had a strong preference to give physical gift cards, but those same people don't really have a preference on the type of gift card (physical card vs a virtual card) they receive. This got me to start thinking of how we could get users to be more comfortable in giving virtual gift cards and what could increase their use of virtual gift cards over physical gift cards.

Insight

Interviewees have a strong preference to give physical gift cards, but those same interviewees don't have a strong preference on whether they receive a physical or virtual gift card.

Insight

Interviewees are most often purchasing gift cards for those they already have contact information for, including friends, family, and co-workers.

Insight

Most interviewees have at least at one point in time altered the packaging when they were gifting a gift card. They did this to help spruce up the presentation of their present.

How might we...

...increase the preference to send virtual gift cards?

How might we...

...be inclusive to help everyone feel invited to use the app?

How might we...

...make sending virtual gift cards a more engaging experience?

User Persona

From my user interviews I began working on creating a user persona to help guide the rest of the project, ensuring design decisions were made for the user. Federico Lugasta is a younger aged person, working a full time job as a teacher and is cost conscientious. He tries to do at least some research before making any purchases, but doesn't always have the time so will occasionally turn to friends and family for advice.
This is a user persona that conveys the feelings, thoughts, goals, personality, etc. of a typical user of insurance products.

Sitemap

Through my research and card sort studies I now had a better idea of what users are looking for and how they expect it to be organized. Using this information, I started the sitemap by creating the main navigation options based off the content card sort, as well as, what looked to be industry standard. I used the same research to then add in the different pages under each navigational option. Once all the content was laid out, I began to think about how each page tied to each navigational item and how those pages could relate to each other. One of the goals of the project was to create an easy to navigate e-commerce website, so the sitemap was pivotal to guiding the organization of all the content and pages. The black lines and arrows is the straightforward route a user could take. The gray lines and arrows show how different pages connect to each other and how a user would be able to navigate around without superfluous clicks.

Sitemap and Product Requirements

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.

Sitemap

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.

Design Principles

As I chose to skip creating a user persona for this project, I instead decided to come up with four design principles to help guide my designs for the users. I referenced back to my research and also looked at a couple of modern site's design principles, such as AirBnB, Venmo, and eBay, as references. Keeping in mind that the goal of the project is to create a sense of fun while being usable by almost all ages, I came up with the below four design principles for the Gift It project.

Ideate

Ideate

Ideate

Sketches

Before jumping into the wireframes I did some more inspiration searching and generated a couple of sketches for possible design ideas. Below are just a few of the sketches for a couple of the pages that were designed.

The first is a sketch of the homepage, where I wanted to make sure to include a section that talks about compensation data since that was a key item to come out of my research. I thought it would make the most sense to have WorkWise partner with a compensation data company as this would allow WorkWise to have more reliable compensation estimates based on job type, location, company size, etc. Often times this type of data is not publicly available, so that's why I decided to go with a partnership, to give users more confidence in the compensation data provided.

The second is of the user account page, where I initially had tabs set up to be the navigation around your account options. For the tab selected, My Account, it would include cards of all the jobs the user applied to, as a record and a way to track progress.

The third is the job browsing page with examples of interactions on the left side of the image. In these, I had the additional filter options as a drop-down, but in doing more research and speaking with my mentor, we changed this to being a modal instead when it came time for the wireframes.

Sketches

Looking back through my research and referencing the sitemap for navigation, I began sketching out some design ideas. Below are just three of the sketches I made, all for the homepage.

One of the items I knew I wanted to be included was a section that talked about why Kaus is unique or what they offer that is different from the competitors. Since there are already several insurance companies out there, I felt it was important to showcase to users what else Kaus has to offer that they might not have seen before. For example, one of the findings from my user research was that people wished there was a way to know that they have sufficient or the right insurance coverage. So I thought one of the differentiators that Kaus could take advantage of is providing policy recommendations and providing assistance with transferring policies, to help users feel more confident in the coverage they have.

Another item I wanted to make sure was included on the homepage was customer stories. This is because of the other key finding from my user interviews in that people will often leave insurance companies due to bad customer service. So I wanted a section to help convey the quality of customer service at Kaus to help create confidence in users that visit the site.
No items found.
No items found.

Task Flow

After the sitemap I began working on the task flow, which focuses on how a user would go about looking for and applying to a job. From the homepage, the user could browse the available jobs, using filters to narrow down their selections. Once they find a job and select it, they'll be able to read the job description, requirements, qualifications, etc. And to help streamline the process and cut down the time it takes to apply, users can use the quick apply button that will give them the ability to select and add documents already saved to their account.

The task flow below is assuming the user has not signed in prior to searching for jobs, so when they go to quick apply, they'll be prompted to sign in, or if they don't have an account, to create one. If this is the users first time on the site, they'll still be able to use the quick apply option as any document they upload through this process will also get saved to their account to be able to use it again later for other job applications, if they chose.

The task flow was useful for me to help make sure the pages and options flow smoothly and I don't have any gaps anywhere. It also helped me visually see which pages would need to be defined in order to have a full flow to do usability testing on.

Task Flow

After the sitemap I began working on the task flow to show how a user would go about browsing and purchasing a gift card to send to another person. The user would navigate to the browse page where they can search and filter to find the merchant for which they want to send a gift card of, then move on to entering the recipients information. Following that, the user is able to add a type of game along with the number of levels the recipient must complete in order to unlock the access to their gift card. The user can then verify their selections on the checkout page before confirming the order. This task flow helped me to visually see the full process to ensure it was streamlined and didn't leave any gaps in the process for the user to stumble upon.

Task Flow

Now with the navigation and pages defined in the sitemap, I compiled a task flow to show how a user would go about the task of purchasing an insurance policy. From the homepage the user can select a product and then following a wizard can answer some questions to help determine the best selections for their situation. This helped me determine which key pages would need to be created for the project to ensure I could test a full flow, as well as, made sure there were no page or connection gaps.

User Flow

Once I had the task flow I then worked on branching out to understand how a specific user could navigate through the task of purchasing insurance. I referenced my user persona to help guide the flow and began thinking through the different actions the user may take while navigating to purchase an insurance policy. The user would most likely still start on the homepage, but depending on what they searched, they could land directly on the explore products page. From there, regardless if the user is just looking for a quote or is looking to purchase a policy, they'll be taken through the wizard to fill in their information. The user is then able to either save their progress and come back at a later time, or continue through to payment. I felt it was important to include the save progress option, not only because it appeared to be industry standard, but also to give users the flexibility to come back to their quote if for whatever reason they're unable or don't want to finish the wizard in one sitting.

By compiling the user flow, I was able to make sure that the process was as streamlined as possible and didn't leave any dead ends or connection gaps for the users.

Wireframes

Home Screens

Now that I had the navigation and pages defined, along with principles and inspiration to guide my designs, I created a set of wireframes for each page. Below are just a couple of the wireframes that would be found throughout the Home navigation.

Going left to right and top to bottom:
The main home screen includes links for all the various actions a user can take. If they've received gift card points, which can be exchanged for any gift card available on the app, the user can click to apply those points for gift cards they want (which is seen in screen two and three). The user is also able to view their available gift cards and access the information to be able to use them both online and in-person.

The gifts received section of the home page includes cards for the user to view what they have in each bucket. Screens four and five show what it looks like if a user were to view their new gift cards available that they have to still play for to unlock access. I made sure to include an option for the receiving party to be able to change up the game they have to play. The whole idea of the app was to create fun, so I wanted to make sure people get bogged down having to play a game they don't enjoy.

The gifts sent section of the home page includes the same cards as the gifts received. This allows users to have a quick view on the progress of their recipients. The user is able to click into these cards to view more information, as seen in screens six and seven.

And the final wireframe screen below is a sample of what it would look like to the user who received a gift card through the app. There are options to quickly copy the gift card number for easy pasting on the merchant's website. There is also a barcode included if the user decides the use the gift card in person at the brick-and-mortar store. I also made sure to include instructions at the bottom to tell users of the options in how they can use their gift card so that it's clear, as it might not be something that's obvious to everyone.

Wireframes

Homepage in Desktop and Mobile

Below are the wireframes created for the homepage in desktop and mobile. Based off some feedback received from my mentor on my sketches, I mostly followed the first sketch with a couple of tweaks. I felt that the Why We're Unique section should be close to the top so new users to the site can quickly see why Kaus is different from all the other insurance companies out there.

And based on what appeared to be industry standard at the time, I included a section that has each of the insurance categories, as well as, a quick links section. I had found that several major insurance companies include quick links on their homepage, specifically for filing a claim. So I felt it made sense to include something similar on Kaus' site, as users may be expecting to see these options provided.

Wireframes

Desktop Wireframes

Now that I had a couple of different ideas for the designs, I jumped into creating several wireframes for each page. Below are just a sampling of the wireframes.

Going left to right and top to bottom:
The main browse page, which mostly followed industry standard, includes the list of jobs on the left and then the job information for the current selected item can be viewed on the right. I chose to keep with industry standard for this design as it can make job searching a bit faster for users. They don't have to leave the page in order to view the job description to decide if they want to apply or not.

The next screen is the modal pop-out for the additional filters users can use to narrow down their searches. I used my card sort study to help me determine which filters would be readily visible on the main page, and which filters would be included in this modal.

The third screen is a sample of what the quick apply process would look like. It would also be a modal, similar to the more filters, and would give the users the option to either attach a document already saved to their account, or upload a new document to use.

And the final screen is the account area of WorkWise where users can track the jobs they've applied to. This shows the status for each job that was applied to and includes filter and sort options to make it quick and easy for the user to find what they're looking for.
No items found.
No items found.

Insurance Quote Wizard

Another set of the wireframes I created were for the Get a Quote process. Below are just a few of the screens. I initially started by having the process be as short as possible and grouping similar questions under the same category on a single page. For example, asking for the users name and date of birth was all grouped under the category "Personal Information". My thinking was that this would streamline the quote process and have it so users aren't having to spend too much time filling out all the information. In speaking with my mentor and doing some more research on how more modern sites are handling questionnaires, I ultimately decided to breakout the questions out into a wizard when it came time for high fidelity screens.

Mobile Wireframes

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.

Browse Screens

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.

Search Screens

For the search screens, I ended up referencing the Good Rx app. I had previously seen their search screen and how it included an option to remove prior searches and I thought that was a really useful feature that I hadn't seen much before. I thought this would useful to include for the Gift It app in case the user prefers to reset their searches at any point.

I also chose to include a popular searches list as I was seeing that included on several other apps search pages. It came out in my usability testing, though, that limiting the popular searches list to only a handful is much more useful than including all popular items. It makes it less overwhelming for the user.

Settings Screens

I created all the screens for each of the settings page, and included a sampling of them below.

The first screen is the main settings screen that has all the different setting options available for users to click into and update or get more information.

The second screen is a sample of what the user would see when they click on Payment Methods from the settings screen. I wanted to make sure it was clear to users what card was set as their default among all the cards they have connected to the app, so I opted to put the default card in its own section. I also chose to include the icons of the credit cards that Gift It will accept to give users a quick visual cue as to what they can add for payment methods.

The third screen is a sample of what the user would see when they click on Change Password from the settings screen. I included the eye icon to allow for users to chose for themselves if they want the password they're typing in to be visible or not, in case they want to check if they mistyped anything. I also didn't want users to have to guess if they met all the password requirements, so I included a list of these and as the password meets each requirement the X turns into a checkmark as a visual cue to the user. Along with this, the save changes button is inactive upon the user first coming to the screen. Once all the boxes are filled out and the requirements are met, the button would change to be active. My thought was on this was to try to prevent user error and only letting the button be clickable at the time that the action can actually take place.

And finally, the fourth screen, is what the user would see if they were to click on Contact Us from the settings screen. This allows users to not only ask a question, but also give feedback and send in feature requests. Similarly to the change password page, the send message button is inactive as the user first gets to the screen. Once all the required information is filled in, though, the button would become active for the user.

Mood Boards

When it came time to start gathering inspiration I came up with two main mood boards, Soft and Muted, and Fun and Lively. I wanted the app to be created for a wide target audience so anyone from a grandparent to a young adult could use it to send virtual gift cards. I decided to go with a more soft and muted approach as I thought it would appeal to the larger audience I was trying to reach. And I thought this would allow for the activities (from playing a game to unlock a gift card, to sending others gift card challenges to play for) would bring out that fun in gifting.

Soft and muted mood board

Fun and lively mood board

No items found.

Mood Boards

‍Referencing back to my research and remembering that the target audience is young to middle generations, I began gathering different types of inspiration that would help guide my designs. The two mood boards I came up with were Light and More Subtle, and Bright and Loud. I decided to go with the Bright and Loud mood board as I knew I would need to stand out against the myriad of other job board options users can go to.

Light and more subtle mood board

Bright and loud mood board

No items found.

High Fidelity Screens

Homepage in Desktop

With one of the main goals of the site aiming to make it easier for users to find more jobs elsewhere, I decided to include a map of the U.S. with pinlets marking all the major cities, such as Seattle, WA and Boston, MA. My thought was that the pinlets would give the users a visual idea of location when zoomed out. When the user zoomed in, since there would be more real estate on the map, users would then be able to see available jobs in that area.

In choosing color for this project, I decided to have a pretty robust group of colors to be able to visually convey a bit more of a fun experience, especially when it comes to applying for jobs. In speaking with my mentor after this first iteration, I worked to calm the colors down a bit in the next iterations and use them a little more sparingly so as to not overwhelm users.

Mood Boards

With the research down and my findings analyzed, I began to gather inspiration to help guide my designs. I came up with two main mood boards, Modern and Fresh, and Bold and Energetic. When it came to it, I decided on Bold and Energetic since the target audience for the revamped site is younger generations, although I made sure not to go too loud since Kaus also didn't want to alienate other generations. I felt that the Bold and Energetic mood board was a good mix of eye-catching and fun, yet also still has a professional feeling to it.

Modern and fresh mood board

Bold and energetic mood board

No items found.

High Fidelity Screens

Homepage in Desktop and Mobile

After receiving feedback from both my mentor and from fellow Designlab students, I began compiling the first couple sets of high fidelity screens. Below are some of those first screens I made for Kaus' homepage in both desktop and mobile views. The main colors I was working with was a nice bright blue and a softer orange. I thought these colors were vibrant enough to catch a users eye (especially with having the call-to-actions in the bright blue) while also still being a bit on the softer side (with the rest of the colors used being on the lighter side and contrasting well with blue).

For the imagery, I originally had used mostly illustrations. I thought they helped the page feel a little more fun for a topic that can be a bit dry. In speaking with my mentor, we decided to add in more images of real people for the following iterations, as that was helping the page to feel more personable.

High Fidelity Screens

Home Screens

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.
No items found.

Insurance Quote Wizard

These are some of the first high fidelity screens I made for the Get a Quote wizard. This is where I broke out my original wireframes and instead of doing a questionnaire, I changed it to being a full wizard. This allowed for the process to be a bit more personable to the user, allowing for different questions to come up based on what the user is selecting and entering.

And while at first I thought the questionnaire would be faster for users, after doing more research on wizards (such as on the wizard used on the Care/Of site) I found that wizards can actually cut down the time. By being able to adjust the questions asked based on what the user enters can allow Kaus to avoid having users answer superfluous questions that may only apply to some people.

Since the wizard can adjust based on how the user is answering, I made sure to include a tracker at the top so users have visibility into how much more of the wizard they have left to get through. I also made sure to include a save progress option so users are able to come back to where they left off, which appeared to mostly be industry standard.

Other Desktop Screens

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.

Browse Screens

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.
No items found.

Search Screens

One piece of feedback I received in general was to size down the titles on all the screens, so I did do that here to stay consistent with the other screens. I also adjusted some of the padding to accommodate this, as well. Otherwise I received really positive feedback on the initial search screens, so when it came time to creating the high fidelity versions, there wasn't much else that needed updating.

Settings Screens

Below is a sampling of the settings screens for the high fidelity versions of the Gift It app. All the headings were sized down and thus, padding was adjusted to accommodate.

For the payment methods (screens two through four) the user is able to view their default payment method, although for security reasons, when they click to view the information entered, some of the information is hidden. If they're just entering the payment information for the first time, such as in the fourth screen below, then the information will be fully visible until saved or navigating out of the screen. I felt this was important as it allows the user to review what they entered for accuracy before saving and using the new payment method.

For the change password screens (the fifth and six screens below), they follow the same layout as the wireframes but now have better visual hierarchy with adding in the color, especially for the password requirements. I wanted to make sure that both color and imagery was used to show the user what password requirements have been met and what still need to be met to ensure accessibility.

And for the last two screens, this shows what a user would see if they were to go to the contact us page. When they click on the topic drop-down, the iOS controls menu will pop-up and allow for easy scrolling to make a selection. And this stays consistent with the iOS controls used on other pages, such as Xing out of the order process in the browse screens (pictured in the browse screens section above).
No items found.

Prototype and Test

Prototype and Test

Prototype and Test

Usability Testing

Using the high fidelity screens I created I began conducting usability testing. I had three objectives:

  • To see and understand how users respond to the overall layout and flow of the homepage.
  • To understand any pain points in the Get a Quote wizard.
  • To understand if there is enough information provided and enough levers to adjust for users to understand and get the coverage that would best fit their needs.

Usability Testing

Using the high fidelity screens I created I began conducting usability testing with three main objectives in mind:

  • To see and understand how users respond to the overall layout and flow of the homepage and the browse jobs page.
  • To understand if the process to apply to a job is quick and easy (time-saving for the users).
  • To understand if the tracking of submitted applications is in a useful format that will assist users in their job search.

Usability Testing

Using the high fidelity screens I created I began conducting usability testing with three objectives in mind:

  • To see and understand how users respond to the overall layout of the app and how everything flows together.
  • To understand if the navigation is making sense to users and is enough for them to easily get around the app.
  • To see if the process to purchase a virtual gift card for someone is quick and easy. Would users actually use this app?

Affinity Map

Below is the affinity map diagram I created on Miro based on the usability testing I conducted. A majority of the feedback was related to the Get a Quote wizard, so I knew I'd have the most to update there. After speaking with my mentor, we made a plan of what would need to be addressed and I began working on the next couple iterations of the screens.

Affinity Map

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.

Affinity Map

Below is the affinity map diagram I created on Diagrams.net based on the usability testing I conducted.

A major finding that came out of testing was that the explanation of gift card points to gift card ratio was very confusing and needed to be explained or showcased better. This was really helpful for me to understand because it forced me to think of the process from a different perspective to ensure it would make sense to the users I was designing for.

Another major finding was that the quantity selections for gift cards was also really confusing to users. They pointed out that it's really unlikely they'll purchase multiple quantities of the same gift card in the same amount for the same person. So I realized that the quantity selection would only make sense if there was a way to send multiple gift cards to multiple different people in one transaction. If that's not possible, then it would make more sense to nix the quantity option and just let the user select the dollar amount for the gift card.

Priority Revisions

Homepage in Desktop and Mobile

Below are the final iterations I made for Kaus' homepage in both desktop and mobile views. In speaking with my mentor, we decided to swap out several of the illustrations for images of actual people to help the page feel a bit more personable for users.

I also changed the background color from white to a very soft yellow to help soften the view. And I lightened the orange used and added in a very dark blue to help the page feel a little more professional. In looking back at my previous iterations, and referencing the feedback I received, the initial colors I had felt a bit too playful to be used for insurance. I also tried to add more depth to the page with these new colors by adding a dark blue background for the Meet the Team section and including very light illustrations of shields in the background. I chose shields for the background illustration as it appeared, based on my research, that shields are often used to represent security, especially in insurance.

Also, after doing some more research, I decided to turn the customer stories from simple written quotes to making them real videos of real customers. I referenced this on Ritual's site, which I thought was a great idea! I felt it gave the customer stories that little bit extra that makes them that much more real and believable as you can see and hear a real person's experience and thoughts on the product and service.

Priority Revisions

Homepage in Desktop and Mobile

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.
No items found.

Insurance Quote Wizard

These are a few of the final iteration screens of the Get a Quote wizard. I broke up some of the questions even more, such as the type of insurance question. This allowed for better spacing on the page and an easier way for users to narrow down what type of insurance they're looking for. I also decided to add a tooltip for the GAP insurance option, as I had found through my usability testing that several people were unsure of what this actually covered. A tooltip would also be included on other lesser known insurance options for the other categories.

I also mirrored the same soft yellow background color that I used on the homepage, as well as, brought in the illustrations of category options. I felt that this helped to connect the wizard back to the homepage for Kaus, keeping consistency in the designs.

Other Desktop Screens

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.
No items found.
No items found.

Mobile Revisions

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.

UI Kit

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.

UI Kit

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.

UI Kit

One of the goals of the revamped Kaus site was to reach the younger generations, so when it came to selecting color and type I went for something a little more playful, yet still professional. I thought the lighter secondary colors would make the screens softer on the eyes, while the primary blue color would help call-to-actions stand out clearly for all users.

For the typefaces I decided to pair ITC Souvenir Std, a serif, with GT Walsheim Pro, a sans-serif. The ITC Souvenir Std allows for a little more play in the headings since it include more dramatic serifs, while the GT Walsheim Pro allows for easier readability for body copies and labels.

Conclusion

Conclusion

Conclusion

Reflection

This was my first true UX/UI project that I worked start to finish. It was a really great experience to be able to see all the different design stages and the various deliverables you could produce for each, depending on the project you're working on. I also learned how fast projects can move and how quickly you might have to turn out those deliverables, so planning ahead is extremely important.

I think the most difficult part of the project was scheduling and completing interviews and/or testing with users due to differing schedules of work, chores, events, etc. This sometimes made it difficult to stay on track in the work, but the interviews were definitely imperative because I ended up learning a ton from the users. It was extremely helpful having those additional eyes and thoughts on the designs to help make sure I was designing for all users together. Overall, I think the project went really well and was a good start heading into the next few projects that were coming down the line.

Reflection

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.

Reflection

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.

Other projects

Up arrow (takes you to the top of the webpage).