Gabriela Cotosck
User Experience Designer

Redesigning Ahold's Recipe Center and Shopping Tools

As a UX/UI Designer at Constant Commerce

About the project

I joined Constant Commerce (a Distributed Commerce Platform in London, UK) in 2016. Their mission was to connect retailers, brands and consumers by turning content into shopping experiences.

My role in this project

  • Redesign the recipe website for Ahold USA supermarkets.

  • As a UX/UI Designer, I took the project from Research to Wireframes and Prototype, created with our Graphic Designer's final mockups.

Process
Original website vs Competitors
Original website vs Competitors

Research

Questions during the process:

What did the client ask for?

"A fresh website but keeping the current infrastructure and key functionality."

What is "fresh"? What does the Competitor Analysis show?

High-quality photos, detailed information (eg: nutritional data), simple navigation and predominant search bars.

What is the current infrastructure? What should be kept or changed?

Highlight nutritional information, give focus to sections like Favourites and Meal Planning.

What are the pain points for users of the current website?

Poor discoverability of the search functionality and recipe management.

How can we solve those pain points?

Simplify navigation and make the Search bar easier to find.

Sketches

I started with low fidelity sketches to share with the team. 

  • Share fast -> Get feedback -> Iterate

  • Include all content necessary in a clear and scannable way

  • Existing infrastructure and features maintained, and a new feature included (updated "Shop this recipe" widget)

Time to share with the stakeholders
Part of the Mobile, Tablet and Desktop wireframes

Part of the Mobile, Tablet and Desktop wireframes

Wireframes

The first round of sharing with stakeholders:

Using Adobe XD, I created wireframes for Mobile, Tablet and Desktop, detailing each type of page layout across the website.

These started as low-fidelity but ended up as high-fidelity wireframes which were later used by the team's Graphic Designer to create the final mockups.

Recipe Center is still in use today

Recipe Center is still in use today

Prototyping and delivery

Once all mockups were done, I created a prototype on InVision to test out the initial flow. 

The final version shared with the client was a more detailed Axure prototype, allowing interaction with the Shopping Tools side-drawer and "Shop this recipe" widget (which were Constant Commerce's main products, sold together with the website redesign).

Learnings

Having then just started at the company, some of my biggest learnings during this project involved team and stakeholder dynamics:

  • The Product team didn’t have direct communication with stakeholders in the US — all communication went through our Marketing team. If I went through a similar experience again, I would ask for adequate time to document deliverables in a more self-explanatory way to reduce back-and-forth communication and iteration.

  • Due to the volume and urgency of other projects, I didn’t always get the chance to participate in feedback rounds for mockups produced by the Graphic Designer. This resulted in crucial changes which impacted both usability and accessibility. Fortunately, these changes could be corrected at a later stage, once I reviewed the project alongside the Project Manager, VP of Product and Developers.

  • My takeaway from this experience is that regardless of how busy the team could get, investing more time on documentation (even if short and Agile-friendly) and having more direct communication would have saved us weeks of work.