Menu
Menu
I worked as a freelancer with a client who was concerned with the way her business was represented to her first time web visitors and how her home page was effecting the ease of her current customers. Through a lot of research and analysis, I was able to design an experience that made everyone’s life easier.
Final Result
I started by interviewing my client to fully understand her concern, understand her clientele, and also gain understanding of what she wanted represented on her home page when site users first visited.
Her main focus was:
New Users
Current Users
From our interview, I wrote several problem statements to help me understand the job of the user I was designing for:
Users need a way to easily log into their accounts so they can find or update their information.
Success Criteria: We will know this to be true when our users can log in with no confusion.
Users need an easy way to find the card kit instructions, because they need them when they are making card kits.
Success Criteria: We will know this to be true when our users easily find the card kits
Also from our interview, I wrote a Business Requirements Document, to make sure that my client and I were on the same page and that the scope of the project would be better understood.
I interviewed six people who had never visited my clients website before.
When allowed to look at the homepage for 10 seconds, All six of the users believed the website was a place to buy premade greeting cards. After allowing them to look through the rest of the website, three of them slowly realized that you would be purchasing card kits instead of premade cards, but only after looking through several pages.
This validated my clients concerns about new visitors.
I then interviewed nine of my clients’ current customers.
Several users expressed frustrations about logging into their accounts to find the card kit instructions (their documentation when they wanted to build their card kits)
When I shared this information with my client, she also indicated that she was hoping that new website visitors would be able to see the card kit instructions from the homepage, as this may encourage them to want to buy. She noted that the link to the card kit instructions page was currently in the navigation menu, but maybe not where it needed to be.
Next, I decided to create a site map, to better understand the general user flows of the website, as well as to gain better understanding on the navigation menu to compare after our research was completed
I wanted to understand if the way the information on the website was organized was the most logical. I had already made several assumptions about possible changes, but I wanted to ask users. I decided to use card sorting to dig deeper.
I added 17 cards based on the site map (there were a few that couldn’t be changed do to the ecommerce nature)
After analyzing the similarity Metrix, I presented the findings to my client.
The biggest take away from the card sorting is that “Card Kit Instructions” did not belong with the account even though originally it was thought that it fits with the “Downloads.” After reassessing, I decided from the conversations with the users and my client that it was important for it to stand alone and include it on the Nav menu separately.
My Client also asked to add an events calendar on the home page and wondered if there was a way we could remove the “Account” section from the nav bar all together. She wanted it to be cleaner, however I still needed to solve for our users who needed to access their account easily.
I also decided to move the FAQ and Contact me pages to the footer, to allow ease of users finding the path to their jobs.
I presented the new sitemap to my client who was excited and happy and approved the new changes.
With the new site map and navigation menu in hand I began to create wireframes on paper and in Figma for the home page.
I wanted to address the ease that users could access their accounts, while trying to keep in mind that my client wanted it to be removed from the nav menu.
I decided to play around with the idea of the account button being at the top-right of the header. This way current users could easily find their account, but new users wouldn’t be distracted by it in the nav menu.
My original idea to address the recognition problem was to create an animated “Card kit” as the main focus on the home screen, where users could click the “kit pieces” that would reveal information about the card kits to explain to new visitors exactly what the business was.
After wireframing, I realized that while this idea would be a lot of fun (my client was over the moon about it), it was not a solution that fit responsively, as I struggled to match the design for the mobile side. Mobile first design is incredibly important to me as I want to design a solution that fits across all devices.
So I went back to the drawing board.
I started focusing on what the most important aspects of the business that new users would need to know. I went back through and analyzed the interview of my client, and the user interviews. I then looked at the individual products that were being sold, information from the FAQ page, and reviews from the website. With all of this in hand, I came up with four specific “topics” that new users would need to know in order to understand the business. I decided to create these “topics” within mobile-friendly squares. I also wanted to focus on the job of the new users, to purchase a product. I decided to design a large call-to-action “Shop Now” button underneath this information.
I presented my wireframes to my client who loved the changes and approved the new header and Nav menu.
Old Nav Menu
New Nav Menu
However, she wanted something a little more graphic at the very top of the homepage. She asked if there was a way we could move the “topics” down.
I redesigned again, moving the “Shop Now” up to sit above a photo overlay.
She approved the new changes. We then worked together to write the UX copywriting.
You can see the live site here.
You can also see the rest of the homepage design.
I learned that sometimes as a designer you have to step away from the ambitious “shiny” design ideas to solve for the bigger picture. I also learned how beneficial it can be when your assumptions are wrong. For example, learning that my assumed mental model of “Card kit instructions” belonging with the users download was proven wrong by the card sorting. This allowed for a greater solution!
Made with <3 and <> by me