
Designing an improved shopping experience for Fields Foods' customers
role —
Information Architect
tools —
Axure
responsibilities —
User Research
duration —
2-week sprint
Interaction Designer
Visual Designer
User Researcher
Otter
Miro
Synthesis
Ideation
Interaction Design
Usability Testing
OptimalSort
Information Architecture
summary —
Fields Foods is a full service grocery store that offers fresh and healthy food options at affordable prices through partnerships with local farmers and trusted brands. I created an e-commerce element to their existing website to make shopping more convenient and enjoyable.
​
Through user research, I discovered that users needed a quick and efficient way to purchase products based on their specific shopping needs. I found that users needed a more robust navigation and checkout experience to discover their favorite products, suggested products, product details, and flexible delivery options.
How might we increase engagement for new users on the platform while simplifying the key tasks affecting productivity for advanced users?
before —
original dashboard
before —
original dashboard

after —
final prototype

problem —
users need a way to easily and conveniently shop online while considering budgets, time, product discovery, and detailed product information.
early usability testing revealed 40% task success rate —
I conducted evaluation research with 5 individuals to assess the product itself based on the stakeholders' feedback from existing customers. My team and I recruited users that have experience with VR and 3D modeling as well as new users. Given that feedback, I initially tested by watching them explore the dashboard and presented task flow scenarios.


user interviews helped me understand customer needs —
After discovering pain points from usability testing, our team wanted to gather deeper insight into the problem. I conducted 8 user interviews to learn from existing users of the platform, users with experience in VR and 3D modeling, and brand new users.



"It's frustrating when my dietary needs aren't reflected when I shop. It makes the process even harder than it is for me."
- Field's Foods customer
"I love seeing grocery suggestions and ingredient information, it helps me easily find safe dairy free brands."
- Field's Foods customer
"I typically use delivery, pick up, and curbside which is so convenient, I don't even have to get out of my car."
- Existing user
competitive analysis discovered where iQ3connect could improve —
I typically implement an in-depth approach to research, examining the competitor landscape closely from a user's perspective.
For this project, I conducted competitive analysis by registering to similar platforms, exploring the interface and studying the overall user experience. With iQ3Connect offering a unique platform, I broke down the major work flows and completed analysis on direct and indirect competitors.

In-depth analysis of user cards from different competitors to help us move forward in the design process.
with over 100 pieces of data to sort, we prioritized the top insights —
After compiling the data, our team created an affinity map to prioritize user insights and see how those aligned with stakeholder's goals for this project. While there was a substantial amount of feedback from users, I had to consider timeline constraints and focus on the top insights for this first iteration.
.jpg)
Affinity mapping helped with feature prioritization and defining scope as we moved further into the design process

we created two persona categories: advanced and new users —
After synthesizing data received during user research, we were able to deduce that iQ3 had 2 key users based on the varying levels of experience with iQ3, 3D modeling, and VR.


uniting user and business needs —
Through user research and competitive analysis, we concluded the following user goals. iQ3Connect's initial goals during stakeholder meetings aligned with our users needs - create a streamlined, user-friendly experience from the moment they entered the platform.

our goal — how might we make features more discoverable, encourage collaboration, and project progression?
streamline and simplify meeting creation —
An area of focus was to streamline the meeting creation process within the platform. Creating a meeting was only available under VR models, which provided confusion to many users. I added the ability to create and join a meeting right on the initial dashboard page for easy access.
.png)

easily upload and view models in progress —
Before, uploading 3D Models and converting models into a VR ready state was hidden beneath numerous tabs that caused frustration amongst users. Users wanted this process to be more accessible and understandable as the existing steps were difficult for new users to grasp. We moved this process to the main dashboard and condensed the uploading and converting process into one seamless flow.

emphasis on making knowledge accessible —
During our research phase, users wanted a knowledge base to help them learn the platform. We discovered that users would rather search their question and get an immediate solution for their basic support issues. This would not only help relieve the users' frustration but would provide relief to iQ3Connect's team who were inundated with support inquiries.

.png)
making the dashboard reflect what's important —
During interviews and testing, each user identified a different purpose for utilizing the platform. We discovered that the main uses revolved around creating/joining a meeting, uploading 3D models, VR model conversion, and managing teams. We confirmed with users what was considered important in their work flow and worked to put this all together in a consumable and simplified manner.

a design studio helped bring ideas to life —
My team participated in a design studio where we took about 15 minutes to sketch out our ideas on how to best create this platform. We would each present our work, how we felt it reflected the users' needs, gave our critiques, and then back to the drawing board we went. We went through several rounds before we decided on a design where each element was backed by the user research we had collected.





After much collaboration and many hours of a design studio, we were focused on bringing together those key insights onto one page: creating a meeting, uploading 3D models, converting into VR models, and managing teams.
reducing steps in the task flow —
The original task flow required users to click into different tabs within the dashboard and caused confusion due to the vague naming of each section. My team's goal was to shorten the task flow, provide clear call-to-actions, and allow users to complete the full task flow from start to finish all on the dashboard.

mapping out designs —
After putting together our designs on paper and mapping out the user flows, I began bringing our designs to life using Figma. I would share my designs with my team, get feedback, and continue with another round of iterations. This design process was especially challenging as it took quite a few iterations to perfect the flows of creating a meeting and combining the uploading and conversion process into one consistent flow.
​
Recognizing these needs, I began to explore how to best execute the creation of a meeting. Users had mentioned their favorite calendar platforms and how they loved the ease of use in creating a meeting. This inspired me to create an invitation template that mimicked that functionality. I also repurposed the attachment tool to give users the option to easily add VR models.
.png)

combining model upload and conversion —
I began brainstorming the best ways to combine these separate tasks into one seamless flow. During the interview process, users preferred particular file upload platforms and spoke of their likes and dislikes associated with each. Moving forward, I used those insights to help piece together each part of the uploading and conversion process. To ease the transition, I kept major parts of the original process but focused on uniting the two so that it could be easily completed on the dashboard.
.png)


two rounds of usability revealed a 96% task completion rate —
After many iterations and feedback sessions with my team, we conducted usability testing with six users. We tested iQ3Connect users and new users who had never interacted with the platform before.
.png)

Users were successful with moving through updated flows but made comments on changing progress bars' colors to muted colors to not distract from call-to-action buttons.

PROBLEMS
FIRST ITERATION
FINAL ITERATION

SOLUTIONS
reflections —
Fun fact: Even though I'm an avid gamer, I've never worked with VR before, but I'm extremely passionate about digital transformation and being apart of technical innovation so this project was perfect to work on.
​
With such a steep learning curve initially, I learned that becoming well-versed in such a technical product not only helped me understand our users but how to create a design that considers technical constraints. It helped me think about the hand-off process with developers to be able to deliver a design that was doable within a certain timeline and budget.
​
Lastly, my mantra I repeated, "Don't overpromise and underdeliver". There were many great use cases for the addition of other features but every single one was unrealistic given our timeline. I had to determine what the real value was for iQ3 and deliver that without spreading ourselves too thin.
building for the future —
Additional features:
-
Further testing and iterations to continue to improve the user experience
-
Dashboard customization to cater to users' changing work flows
-
Focus on Assets and Resources section - research revealed these were areas of frustration for users