Gift It App

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.