top of page
.png){kind=small}
OpenMeal
blog redesign
client
OpenMeal is a non-profit online platform allowing those in need to order food from family-owned restaurants funded by generous donors. This platform was created to support financially-stricken businesses and financially affected individuals during the COVID-19 pandemic, particularly two of the most vulnerable communities: Asian restaurants and individuals in need of meals.
project purpose
╰ Redesign OpenMeal's blog site while retaining consistency with client branding for consultant use.
╰ Implement new features and improvements to the blog.
╰ Establish a more branded look for the site.
role
Designer for a marketing & consulting agency (Gaucho Creative Marketing Group)
╰ UI/UX Visual Design, Mockups, Prototyping, Interaction Design, Wireframing, User Flow/Research
tools
╰ Figma
timeline
╰ 5 weeks, Nov 2020-Dec 2020
problem
problem.
While OpenMeal's current blog site serves its purpose for posting blog stories and updates, the overall user experience and interface lack in addressing a purpose for the non-profit. With a lost purpose, the blog can be seen as quite unnecessary and non-beneficial for continued maintenance or updates.
product.
╰ critique
The 3 main issues we found with the current OpenMeal blog site were:
-
Weak hierarchy: The hierarchy of the page seems lost and confusing, making it difficult for users to pinpoint where to direct their attention to most. Information hierarchy is not clear as certain parts are unnecessarily large and take up the entire screen, covering up the fact that there are other content to be viewed on the page.
-
Mismatched persona: The photos and icons used for blog thumbnails and decor for the site seem to be mismatched with OpenMeal's bright persona. The use of dark shadings over bright images gives an non-alluring look to the page, making it difficult for users to stay engaged or be drawn to any one article.
-
Lacking brand consistency: While elements of OpenMeal's branding certainly exists here and there on the blog, you can't help but feel detached from their branding due to the lack of consistency in their display of brand elements. The non-profit's huge emphasis on line graphic visuals throughout their main site and social medias is completely erased from this page, creating a hole in the site's overall vibe.
product
.png)
user research
user research.
╰ target demographics
During our initial internal debrief research, we narrowed down our target demographics for donors as generous Baby Boomers, upper class individuals (>$150k in income), lower middle class individuals (~50k in income), tech industry workers, and high-income communities across New York, Dallas, San Francisco, Chicago, Houston, and Los Angeles.
From these findings and recognizing that our priority audience is to appeal to potential donors, we were able to brainstorm a strategy that not only the strengthens visual appeal & UX/UI of the page, but addresses a mission purpose of effectively using this blog to inform, build, and showcase.
process
process.
╰ exploring
Before the ideating process, we decided to take a look at other non-profit blog sites for inspiration. We found that these were overwhelmingly, for the most part, not incredibly helpful as many non-profits have outdated websites, especially those that are smaller and not well-funded. Knowing that OpenMeal has a group of skilled web developers on their team, we definitely wanted to look elsewhere for higher quality UX/UI blog design inspiration.
After some time spent on searching for different blog interfaces, we pooled together our favorites and findings for discussion and dissected each on the points we liked or wanted to incorporate into OpenMeal's blog, and briefly went over possible ways on how we would do that.
We found our greatest initial influences derived from Riot Games, SMTOWN and Patagonia's blog sites.
╰ sketching low fidelity wireframes
In a quick 30 minute drafting session, we sketched out our visions and potential web flows, then presented them to each other where we further dissected the positives and negatives of each design. At the end, we tried to come to a collective consensus of which features of each design we wanted to incorporate and potentially combine or test out as begin creating our mockup.
⇣ this is the one we chose to implement ⇣
╰ user flow & information hierarchy
To help our team visualize what the user flow will operate like and how users would be navigating and approaching the site structure, we created a series of user flow diagrams to help us better organize the site's information hierarchy at its most fundamental level of importance for donor attraction and retention.
Separating out the blog's web content by its level of importance was a key element to our reorganized and repurposed user flow and site structure build.
╰ initial prototype design
Taking our wireframe sketch and user flow, we began to build out the design for our first working prototype model. In this attempt we:
-
Infused the site with clear OpenMeal branding elements from the color palette, their signature blob decor motifs, bright imagery, and thin lined graphic visuals.
-
Incorporated an experimental transitional panel that brings some more life, movement, and freshness, as this piece can be constantly updated.
-
Increased call to action effectiveness by providing more visually intuitive assistance (i.e. graphics, gifs) and inflated the number of times these CTAs are brought back to address the potential donors at the most effective/appropriate locations on the site.
There were many things we implemented in this first prototype that made it in some shape or form to the final design, however, we found that there were still critical points of distraction and places of improvement within our first draft. Taking our given feedback and self-critiques, we took these comments and analyzed how we wanted to go about making these changes and made note of all of the additional parts we felt unsatisfactory towards.
final design
final design.
╰ our purpose
Throughout this entire design process, there were 3 key purposes we identified and were guided by every step of the process with the fact in mind that our target users are the potential donors.
In addition to strengthening the visual appeal & user experience of the site, we defined that the redesigned blog must serve a purpose of:
-
Informing audience members about events or topic of OpenMeal's expertise.
-
Building community and creating a discussion space for audience members to read.
-
Showcasing progress as a company of expanding reach to customers and donors.
╰ mobile prototype
Before we began to revamp our mockup, we decided to first develop a simplistic capture of the vision we wanted for the blog in mobile format. Where mobile development usually takes longer, we accounted for the limitations of mobile accessibility and design when approaching the desktop design.
Simplifying things down in this way helped us a lot in determining what details to keep and what to cut out of the final desktop design. For example, the removal of the blob shapes, the new design for the call to action panels, as well as the removal of the transitional hero panel, were all made in consideration with the limitations of a web version.
Other accommodations made for the web version include:
-
A dropdown menu bar instead of a long laid out one.
-
One post preview instead of 6 to prevent scroll-fatigue and higher bounce rate.
╰ desktop homepage prototype
Upon entering the original blog, there used to be this huge header, and at first glance, you probably wouldn’t even know it was a blog page.
1. Here, in the new blog homepage design, we’ve incorporated a much smaller and articulate hero section with a clear call to action at the top of the page to promote further engagement. Now when you enter the site, you see the blog posts beneath popping out slightly so you know the purpose of this page right away as compared to before.
2. We’ve also created an intuitive, easy filter system that organizes all the blog stories by type, making it easier for readers to read by the category they choose. Along with that, we’ve also updated the format of how posts are displayed, with 3 posts per row instead of 2, and incorporated brighter images in replacement with the darkened images from before. Each post is categorized by a storyline topic tag clearly, and there’s a post date beneath each which gives the blog more timeliness. We’ve also shortened story preview tag lines in comparison to before, giving readers a much quicker and better overview of each blog before they click in.
3. As for the bottom half of the redesign, we’ve replaced the redundant social media section, and left that for the footer, while creating a more effective and relevant set of call to action panels asking for the engagement of viewers. After they’ve read our blog, these call to actions prompt them to also share their inspiring stories with us, as well as encourage them to support others through OpenMeal by donating or subscribing to the newsletter.
.png)
.png)
.png)
╰ desktop blog post prototype
1. The blog post pages individually were redesigned with a white transparent header layered over an eye-grabbing enlarged photo header to introduce the story and capture the audience. The iconic OpenMeal orange is replaced over the previously black text, bringing back a sense of brand identity to each individual blog posts. There’s also an added button to guide users to view additional stories.
2. Photos embedded within the story are now expanded to a longer width of the page horizontally to add some dynamic rather than stagnant feel to the flow of the blog progression and wide spaces in between lines are enforced to promote easy reading accessibility.
3. To further reinforce call to actions, we’ve created a panel that encourages potential donors to join the movement at the very bottom of the blog when they finish a story. We also tried to add back more elements of OpenMeal in subtle places like here again with the bold orange font color.
.png)
reflection.
╰ key takeaways
I have had previous experience working on a company website at my previous marketing & sales internship, but this was my first time I actually got to work on a site with a team of 2 other designers. Working with 2 other minds has so many benefits to this process of ideation, critique, and learning of tools overall.
My personal top takeaways from this project were:
-
The right balance between simplicity and decorative exists when it comes to branding. Nothing has to be overdone or underdone as long as the persona and narrative comes across appropriately.
-
The first prototype you make is rarely ever going to be the final one that you touch. Once we hand this off to the developers, they may very well ask us to change some designs as well.
-
Designing on a team both makes the process more efficient, but requires careful and attentive collaboration/consensus across ideas. Where certain aspects are seemingly subjective pieces, this calls for us to each individually be able to clearly explain our thought process and help our teammates understand our suggestions or struggles. This was an incredibly valuable opportunity I had to work with them and I certainly learned a lot from each individual.
╰ what's next?
The redesign is being presented to our client where it will then be fully handed off to the developers to be implemented onto their website. As a representative has already briefly looked over our first copy, they gave an okay on how we've designed it as of then. This redesign will be part of a list of other deliverables we are handing off to the non-profit.
reflection
bottom of page