REALSOUL
The REALSOUL curriculum-based arts organization is an innovative digital platform designed that develops creative offerings that shed light on the intersectional stories of Asian America and other BIPOC communities.
​
REALSOUL's mission is to develop an immersive and user-centric online learning experience, tailored to the needs of educators and students alike.
Problem
The current website faced challenges, including a lack of clarity about the company's offerings on the landing page and difficulties in navigating between the pages.
Project Duration
3 months
​
Responsibility
Lead Product Designer
​
Team
3 UX Designer, 2 Developers
​
Tools
Figma, Canva, Notion,
Google Suite
Methods
Affinity Map
Competitive and Comparative Analysis
Heuristic Evaluation
User Interviews
User Flows
Card Sorting
Visual Design
Wireframes
Sketches
Usability Testing
Prototype
RESEARCH & DISCOVERY phase played a pivotal role in shaping our design direction. We conducted a series of investigations to gain a profound understanding of the business goals, user needs, and the competitive landscape. Here's how I approached this phase:
Client Interviews Takeaways
We conducted interviews with key stakeholders, including the client and other decision-makers. These discussions allowed us to align our design strategy with the overarching business goals and vision for REALSOUL.
CURRICULUM FOCUSED
Building a curriculum-driven platform as a bridge to connect various communities of color targeting educators and students.
LOOK AND FEEL
Improve on the website's look and flow, which needed enhancement to become more user-friendly and engaging.
VISUAL ELEMENTS
The importance of an easy-to-navigate design that prominently featured art and posters.
Current Website
We reviewd the current website to determine the pain points and design needs based on industry standards and client/user interviews.
-
The website lacked proposition with the services it provides.
-
Inconsistency navigating between pages.
-
Currently no online curriculum for educators and students.
User Interviews Takeaways
REALSOUL's PURPOSE
A simplified, clear, and concise means of conveying REALSOUL's purpose and message. User expressed a desire for the website to communicate its core value proposition more effectively.
EDUCATORS/ADMINISTRATORS
Cater the website more to educators and administrators. User believed REALSOUL's potential lay in its ability to aid educators in delivering enriching content to students.
ART ELEMENTS
Users emphasized their liking for the art and comics on the website, which they found engaging and helpful in conveying the educational content.
DEFINE phase was primarily focused on identifying the main problems and target audiences. I wanted to make sure the design I create is aimed specifically to the right users.
How might we communicate REALSOUL's core value and purpose more effectively for users to start engaging with the website?
How might we improve on the website's navigation to create consistency throughout the web pages?
How might we create an online curriculum targeting educators and students?
My proposition was to revamp the website with the business goals and client needs in mind, create a simplified means of communicating REALSOUL's purpose, and improve the overall user experience.
IDEATE phase portrays the application of the solution from the sitemap I created. The sketches and wireframes were the first steps before I created the first mid-fidelity prototype.
Information Architecture
I developed a sitemap that clearly outlined the website's structure, ensuring that users could easily find and access content. This sitemap considered distinct sections for art, curriculum, resources, and user accounts.
Mid-Fi Wireframes
TEST portion was the user testing of the mid-fidelity prototype. Following the feedback for design improvements, I made necessary iterations.
Usability Testing &
Client Feedback
During the usability testing, we asked all 8 participants that represented different levels of art proficiency to complete 3 tasks which were to identify the REALSOUL's purpose, discover their online curriculum, and locating additional resources.
Additionally, continuously receive the client's feedback. These are the key discoveries:
User Testing
Navigation Bar
​
Users were confused about the navigation bar.
Events & Workshops
​
Users need more clarity on the upcoming events, if the events are virtually or in person.
Call to Actions
​
Users felt there's a decent amount of content, but not enough CTA's.
Client Feedback
Team & Press
​
Separate REALSOUL's Team and Press onto another page.
Students
​
Incorporate the target audience (Students) on the home page.
Iterations
Navigation Bar I went with a industry standard and simple navigation bar to address users concerns with a white background and rounded corners in the final design.
Original Hi-Fi Design
Revised Hi-Fi Design
Final Hi-Fi Design
Hi-Fi Prototype
Final Prototype
​
The high fidelity REALSOUL's desktop browser includes changes made from iterations in additional to including the Student section on the landing page, separating Team and Press onto a new page, and moving Events under Community.
​
Summary
The client said that we surpassed their expectations by redesigning their website, including a online curriculum for educators and students, all of it which aligns with REALSOUL's values and mission, and collaborated effectively in the design process.
Retrospective
Challenges: It was challenging yet rewarding to lead the design team in the design process in making sure we meet the deadlines requested by the client, our design decisions based off of research aligns with the company's value and proposition, ultimately getting client buy-in with the final design solutions we presented.
​
If I had more time: I would continue to test with high fidelity to validate my design solutions. And start the discussion to design REALSOUL'S mobile version.
​
After presenting the final deliverables to the client, we hand-off the final prototype to the Founder of REALSOUL, the design and development teams worked together to address last-minute concerns and finalize the website for release. This is the launch of the redesigned website: https://realsoul.us/