Upsell and Cross-Sell Solutions

This UX redesign was the capstone project at General Assembly that involved working for a global fast moving consumer goods company that makes food items. This company wanted to improve the experience on their existing nutritional information site in a way that actively helps consumers make informed choices with clear information regarding their products.

We worked at the company with the company’s UX design team, reporting findings to project stakeholders.

Solution

Our challenge was to produce a mobile first approach to the redesign. This included identifying design and functionality issues and suggesting improvements including simplified navigation and search filtering. Our primary suggestions included a revised approach to Product Information and Articles pages that would deliver a large amount of desired information without overwhelming people using the site.

PROCESS 

In our initial meeting with the company’s UX team, we received their research so far which gave us some insights to start from. We used that as a springboard to dig deeper with our own research.

Discovery

• We began by reviewing both the mobile and web versions of the site and white boarding what we believed to be problems.
  • Some were definite design issues that needed to be addresses or streamlined. Others involved functionality and navigation that we believed to be issues and wanted to test to verify.

• We tested our hypothesis on issues around functionality and usability by conducting user testing with people who purchase these types of products.
  • We ask participants if they consume products of the type our company offers.
  • We asked if they research food information online.

• We learned people had problems in the areas we identified (navigation and search for products as well as specific information) We also discovered a few issues with functionality we had not already identified that caused people to get lost on the site.

• I put together a questionnaire to find out who uses the web to investigate food information:
  • What information are they looking for
  • What reasons they have for their search
  • How the information they find effects their choices
  • What research tools do they find useful
  • What obstacles they face in their search

• Researching competing sites gave us insights into features and functions for presentation of food information that were successful and that might be improved upon.

• A comparison to non-competiting but similar sites showed functionality that would directly answer the needs of our users that neither our company or its competitors were taking advantage of.

Exploration/Ideation

We took our data and discoveries and explored solutions.

• Rapid sketching exercise: generate a variety of solutions

• To narrow down those ideas we used dot voting to select the solutions we each thought were most effective. (We each had 4 dot stickers to vote with)

• My teammates and I made a sitemap so we could see how the site would be structured and a user flow to see how people would get to the information they were looking for.

Design

• Taking the solutions we discussed and agreed on, I laid out initial wireframes, our visual hypothesis.

• I tested this basic design on a paper prototype with people who fit our personas.
  • We found that the structure of our user flow allowed people to find a particular item.
  • We tested features to see if people knew what they were and if the features did what they expected. In many instances we had success.

• Our filtering need work. Testing showed some categories needed to be renamed for clarity. Also, people wanted more specific options for certain categories.

• We A/B tested two features
  • To allow people to efficiently find specific information on a list of terms we offered (A) a swipe feature to select the letter their term starts with or (B) a box containing the alphabet to select the letter for the term from there
  • People tested understood the swipe function and demonstrated a natural understanding of it. Some even tried swiping on the paper prototype!
  • We had concerns an alert icon we were using would be alarming put people off. We created an alternative and tested both. We found our assumptions about the first icon were wrong. People understood it and had no issues with it. The alternative icon was confusing at all the people tested.

• I revised the mobile wireframes from low-fi to hi-fi updating them with our findings from A/B testing and issues people had with search filters. I worked on the design in tandem with my teammate who worked on the web wireframes.

• From the hi-fi wires, I built a prototype for the mobile site. We user tested again and had the following findings:
  • The use of color on information tabs was confusing, people were sure which one they were on.
  • Modals needed ‘X’ buttons to close them.
  • The alphabetical swipe feature needed design adjustments to be more clear.

• With these findings, I updated the wires and prototype.

Due to non-disclosure agreements with the company, I am required to limit the amount of information I can share. If you are interested in learning more about my approach, findings, and conclusions email me at: matt.dixoncarter@gmail.com

This was a rush project. I was given graphic assets, a wireframe for web, and 2 hours to turn around an initial visual design for web. Finals for mobile and web were delivered in two days.

Final page layout for desktop web.

Final layout for mobile.

A filtered search window lets people generate a living that prioritizes exactly what characteristics they are looking for. A paw “rating” system lets people know how close the dog or cat fits their search requirements.

Specific Information and Story (a pet’s “About Me”) are important factors to people searching for a pet to adopt. Organizing the information for both categories keeps all that vital information on one page while saving screen real-estate and saving people from scrolling excessively.

I took a cue from Match.com, a popular dating site, to add favorites. While people want the efficiency of online retail like Target or Amazon to find their future pet as quickly and efficiently as possible, the process is also like the dating site where the experience does not exactly end in a transaction. AHS does adoptions in person, including paper work, to do everything they can to evaluate the potential adoptees. Those adoptees still need to meet the pet to see if they click in person. A list of favorites allows the user to go to AHS with their favorite list on their phone and meet the cats or dogs they are interested in and visit have alternates on hand in case their initial choice is not “the one”. Also, pets are not held for an adoptee, so a pet might be available when a person leaves home to go to AHS, but by the time they get there it is possible another person has adopted them during that time. Again, the favorites list offers a list of other pets a user cab meet.

I started with 4 rough ideas I put together in Photoshop for a round one submission. The inclusion of the graph paper background was well received, and my AD wanted to see it go more 3-D and sent a “terrible comp” (the sketch at the bottom of the R1 image. His words for it, not mine) to show me what he was thinking. Taking that feedback I created the title card art featured in the second image above. For the platform elements, I referenced the 2-D images of them from the game and worked out how their perspective would layout against the grid in order to make them 3 dimensional. I also reworked the art for the Fionna & Cake and Night-o-sphere updates as shown in the third image.

Title card art finals in mobile ads

Title card updates

The first in this series of images, is a sketchbook sample of some rough ideas on how I might design the page. Next are highlight samples from the series of mockups. A lot of times, even if I started with pencil sketches, I explore ideas and experiment with elements further in the round one mockup phase. The focus in our design revisions was on icon development, character focus and reduction of extra elements. In the final draft we finalized the character composition and gave some breathing space to the Starter Kit icon/link.

Below are samples of the landing page and the details pop up window.