.png)
BrightSide Produce
Responsive website redesign with the goal of bringing more subscribers to the delivery service. Focused on compelling, mission-centered content strategy.
Redesign is live at brightsidempls.org
Client
BrightSide Produce
My Role
UX Writer
UX Designer
Tools
Figma
Miro
InVision
Shopify
The Problem
The text heavy website obscured the mission and was easily skimmed. This lack of clarity confused users and increased cognitive load during checkout with overwhelming delivery categories.
The Solution
Redesign the BrightSide Produce website with clear, actionable content strategy to help increase subscribers.
Research
This project started in a Bootcamp setting on a team of five people. We conducted 5 interviews (age range 22 to 54), 39 survey responses, and 3 initial site tests that showed us just how much of the mission our users were missing:
.png)
Original Site Observations:
Site visitors find BrightSide’s website too text-heavy, which made it easily skimmable and obscured the mission.
​
It was also difficult for new visitors to find information about signing up for deliveries.
User feedback indicates that this amount of text may overwhelm readers, especially on mobile.
Color coding confused users
Descriptions of bundle size were too vague
Stakeholder Branding
The founders of Brightside provided resources from their recent rebranding, including a defined tone, keywords, and a brand archetype. My contribution was to review all resources in depth, and chose several highlights to include in our Miro board for reference as we brainstormed.
Brand Archetype: The Rebel Next Door
-
Trying to blow up our broken food system with knowledge
-
Making it better for those left behind
-
Eradicating food insecurities and inequities in the Twin cities
Brand Tone & Keywords:
-
Friendly, colorful, optimistic, fun
-
Smart, real, bold, determined
-
You bring the sunshine while standing firmly on a platform for justice.
.png)
Meet John Hill
He is a 44 year old teacher who wants to make a difference in his community, but feels torn between his busy schedule and his family obligations.
​
His Needs: To make a difference in his community and his family.
​
Frustrations: There is never enough time to volunteer and make a difference.
Journey Map
Next I created a journey map of his experience with the current website to highlight what we felt were the pain points of using the website, contrasted with the feeling of community support he experienced by choosing Brightside in the end:
Define
From the affinity maps, we brainstormed and created a prioritization matrix. My top three items that I voted for in our redesign were:
1) Map of the delivery area with a search zip code
2) Clear and compelling mission statement
3) Visual representation of the impact our user John would have with his donation.
Complexity
What if there is a price breakdown that's clear to see?
Add a map or search bar for zipcodes
What if the site is base on mobile first design?
I like that I can help without impacting my time
I wish there is actual food images and description for each bundle
I wish the navigation is a more noticeable and larger on desktop
Intentional community connection
Impact
My biggest contribution in this phase was in summarizing our findings, and leading discussions about how John might benefit from the ideas we brainstormed. I thoroughly enjoyed discussing ways to increase engagement through the use of compelling copy, and sharing what I read in press articles about BrightSide.
Ideate
Wireframing
I created a homepage wireframe, and mocked up a hero image based on all the quotes, brand tone materials, and current website text that I thoroughly researched to present to the group.
Personal Design Feedback
Group feedback on my hero image was that we needed to showcase the human aspect more, and that this was too abstract. I learned from the stakeholders that they wanted the emphasis to be on the people, not the produce. This was very valuable insight to me, and we continued iterating the design in the next section.
Prototyping
My role in the prototyping stage was as a the UX writer, and I focused on clear, actionable language for my content strategy. I wrote compelling copy with the goal of meeting the friendly and educational parts of BrightSide's branding. I received positive feedback from the founders, and learned to avoid language with negative connotations to their customers like "food desert."
“Adam and I took a look at the link you sent as a prototype -- we love it! It looks amazing. The visuals are great, and the customer experience will be so much more straightforward.”
Justa Heinen-Kay, Stakeholder
Final Shopify Update: Solo Project
After graduation, I reconnected with the founders to complete the website as a freelance project on my own, working in their existing Shopify platform. I utilized an existing theme on Shopify to create a new design to solve the user issues discovered in research, starting with clarifying & simplifying the mission:
Clear onboarding was important to reduce confusion and barriers to subscribing for users like John.
Feedback from the stakeholders was to focus on the people of BrightSide for the homepage. This gives our user a welcoming sense of community.
John values knowing how he can make an impact. I incorporated clear language to convey the impact his donations make.
Part of my content strategy was to reduce cognitive load and create a streamlined user experience. Accordion menus simplify the daunting text, eliminate scrolling, and keep our users focus.
Research revealed user confusion around the color coding originally used.
I removed the color borders & reorganized the listings by area. I separated the add-on products to draw a clear distinction
​
Future opportunity: simplify the zip code listings by utilizing a delivery map or a way to check zip codes at checkout.