MENU
Socially Immersed
UX/UI Design
PROJECT
Socially Immersed
ROLE
UX/UI Designer, Team of 5
DATE
February 2023 - May 2023
BRIEF
Originally a consulting firm for non-profits on community programs. The founder was looking to pivot the website from a one-way interaction to transform the site into a space for users to learn about and connect directly with the organizations.
PROBLEM
With resources spread across multiple platforms, users had to know what they were looking for and where to find it. Resulted in low engagement rates.
SOLUTION
I want to be able to submit my email for newsletters for updates on Socially Immersed.
DISCOVERY
UI Inspiration
For UI inspiration, each member looked at sites the client mentioned in the initial questionnaire as inspiration. I chose CommunityX and National Geographic based on their visual storytelling, layouts, and color palettes. I found that both sites inspire user participation through exciting calls to action, consistent brand identity, and appealing visual aspects. I was specifically looking for inspiration for text cards, buttons, hero images, and footers.
IDEATION
I want to be able to learn what the Socially Immersed (platform) is and how I could contribute.
I want to be able to submit my email for newsletters for updates on Socially Immersed.
I want to be able to view the shopping page without creating an account.
User Flows
At this point, our team split the work, and another designer and I were tasked with the second user story through completion of the project. There were six iterations before it met the client's vision.
Initially, my partner and I interpreted this user story as an About page for Socially Immersed and other resources. We ultimately decided to split the flow into two pages: Edutainment and Resources. Edutainment focused on their Youtube channel, "Cook and Consider," and featured items that would lead to the Shop page. The Resources page focused more on the non-profit and business-led events and projects, including links and toolkits.
As a User...
I want to be able to see the main page (home) that reflects the process of Socially Immersed.
DESIGN
Style Guide
One team member took the lead for the color exploration, looking at three different color palettes based on the colors used in the existing website and the ones the client mentioned liking.
Our team collaborated on the style guide, which proved very helpful during the UI process. I created the button styles, creating multiple options and then narrowing them down to the ones shown. I also aided in deciding on the grid, header, and text cards. We included a "Working with Wix" slide to highlight possible limitations within the site.
FINAL DESIGN
Takeaways
Transforming a simple but solid existing platform into a complex, interactive website requires a lot of trial and error, and client involvement. UX (and UI) design choices need to be made intentionally and diligently, the process should not be rushed.
What I Would Do Differently
User Research- I would have liked to do interviews of both the nonprofits/businesses and normal users.
Connecting with the client- I would have gone into deeper detail exactly what the client was looking for and done on-going check-ins.
REFLECTION
Wireframes
Initially, the main goal of the first page was to feature Socially Immersed's video series called "Cook and Consider," and other educational resources, while the second page focused on resources, including tool kits, featured projects, and the "Calendar of Opportunity." Both pages included Youtube cards to prompt users to subscribe. Due to the existing site living on Wix.com, we had some limitations to design choices. There were five iterations before the design was ready to progress.
Iterations 2-4 had minimal changes, for the fifth iteration, the client voiced that the pages did not fit their vision. Taking their thoughts into consideration, I altered the pages and offered two versions for the client to choose from: one page based directly on what the client drew, two pages based on my designer interpretation of the drawing. The client ultimately chose the two-page option.
Developer Handoff
Our last contribution to the project was annotating the designs for the developer handoff. Although the site was through Wix, labeling every detail provides a thorough walkthrough of our designs to any designer or developer that may take on the project in the future.
Client Q&A
After reviewing the initial questionnaire and discussing ideas, we developed further questions to gain clarity on the client's goals. Our findings were:
-
Emulate the flow of the websites they were inspired by.
-
Redesign the homepage based on the four pillars mentioned above.
-
There should be a separate page for each of the pillars.
-
Important to include a newsletter sign-up.
Research
Research for this project consisted of examining the sites mentioned as inspiration. They were National Geographic, We Measure, and CommunityX. We discussed what we liked and did not like about these sites, concluding to:
-
Move the newsletter signup from the bottom to the top of the page.
-
Present the information in "bite-size" chunks so users are not overwhelmed with information.
-
Utilize grid structures so users can view the information in a condensed fashion rather than scrolling and searching.
To kick the project off, we had the client fill out a client questionnaire that defined what success would look like, the ideal product, the companies they were inspired by, and what features they like and don't like from the existing design.
This highlighted their mission statement, "We leverage our social impact lens to create ecosystems that combat tomorrow's issues." This was translated into four pillars that served as a step-by-step journey through the site: Awareness, Consideration, Action, and Loyalty.