.png)
_edited.jpg)
THE SERIOUS TYPE WEBSITE
In this phase, we designed and established TST's foundational structure as a collaborative platform, empowering artists to create projects, showcase their art, connect with like-minded artists, and mentor the youth. By the end of this phase, we aligned with the founder on TST's long-term strategy and future direction.
ROLE
Over the course of two months, I worked in an agile environment with a design team of six volunteers. We collaborated closely with the research team during the generative research and user interviews, partnered with the content team to create the sitemap, aligned with the product team on requirements, and supported the development team in implementing the design system.
CHALLENGE
Some artists find sharing their art online a vulnerable experience. Artists need a way to showcase their creative process and get feedback
Platforms nowadays focus on the end product an artist's work, leaving artists navigating a 'wild west' of audiences engaging with their work. This makes it challenging to gather meaningful feedback or connect with like-minded individuals. Artists need a an online space where they can foster a supportive community of shared values and creative growth.
APPROACH & IMPACT
A platform that allows control in sharing work, seeking help, and cultivating a community
By allowing the artist to have control over posting updates, seeking roles, looking for feedback, and interacting with the community, artists are not only able to express their project vision but also uplift the community through the impact of their creations in a method they are comfortable with.
%20(1).png)
%20(2).png)
%20(3).png)
%20(4).png)
DISCOVER
BACKGROUND
Understanding the TST ecosystem
Throughout the 8-week sprint, we worked alongside the clients in defining the different functions of the TST umbrella. The client was very specific about having 4 distinct features with varying functions and audiences.
-
Studio - Project documentation platform.
-
Gallery - Completed works approved/curated by TST.
-
Experiences - Live or virtual events supported by TST.
-
Salon - Place for elevated conversations with like-minded individuals.
Initially, the team planned on designing for all functions but had to reprioritize because some features were still conceptual and need to be finalized by the TST board. Thus, given the limited timeframe, we pivoted to creating just the Studio as it most aligned to the aspect of "sharing work".
USER INTERVIEWS + COMPETITIVE ANALYSIS
Users want to share their work to connect with other creatives, but it can be a vulnerable experience
Generative research was conducted by the research team through user interviews of the target users. Paired with a competitive analysis, where the teams worked cross-functionally to vet over 50 websites that shared the intersection of art and nature, similar to TST, the research team handed off actionable insights and HMW (How Might We) statements to the design and content teams to inform the designs.
Insight #3
Users find that sharing their work can be vulnerable
“I think a challenge can be feeling like, oh, is this even good enough to share?”
Insight #2
Users value feedback on their work from trusted sources
“I have a number of people in my immediate community who I'll always vet things with... just to see how work is progressing.”
Insight #1
Users share their work to connect with other creatives
“It’s nothing about money or recognition, it’s more about ‘wow I love this so I’m sure someone else would love this too.’”
WHAT WE LEARNED
DEFINE
CROSS-COLLABORATION
We held 1-2 all-hands weekly meetings to ensure all teams remained aligned throughout the project
The team then worked cross-functionally to outline and brainstorm the goals, actions, and pain points of our perspective users. Ongoing collaboration across teams early on helped us create a timeline and ensure that we are all aligned and working in parallel before every presentation to the client by the end of the week. The design team and I participated in ideation workshops to help us inform our designs and ensure we are still within the scope. We constantly met with:
-
Research - Aligned which HMW statements are most relevant to the target user
-
Content - Defined the different terms used throughout the TST ecosystem such as Studio and Salon. Organized the sitemap
-
Development - Talked back-and-forth with Development in implementing the design system into the chosen web builder of Bubble.io
-
Product - Ensured our work is still within the expected scope
HMW create a culture on TST that inspires artists to start their own projects?
HMW Statements
HMW ensure that artists’ work is getting viewed by the right audience, at the right time?
HMW make artist users feel safe when sharing out their Work In Progress?
DESIGN
LOW TO MID-FIDELITY WIREFRAMES
We started to design wireframes based on the HMW statements and the client's vision
We started creating low-fidelity wireframes for the landing page, onboarding, and project creation/management pages (the Studio). As the wireframes increased in fidelity, our design decisions were largely informed by two aspects:
-
The HMW statements helped us identify opportunities to design for the users' mental models and goals
-
The client's vision of having a visually-pleasing, collaborative, and inviting platform that piques visitors' curiosity and interest.
Landing Page
HMW create a culture on TST that inspires artists to start their own projects?
As we built out the landing page, it was vital for the client to showcase the 4 distinct functions of TST. which was also in alignment with the HMW statement. We created sections in the landing page that gave visitors a glimpse of what TST has to offer to get artists inspired to create an account. Early iterations were described as bland and did not encourage exploration. The client wanted us to "imagineer" the landing page and so as the fidelity increased, we added interactive elements such as videos and slideshows and consolidated the most pertinent content at the very top of the page.
Onboarding
HMW ensure that artists’ work is getting viewed by the right audience, at the right time?
The variety of functions in the TST ecosystem also entails a variety of users. Thus, when were designing the onboarding, it was important that we capture the user's goals and interests during the onboarding flow. This allows a catered experience for both the artist and the viewer. Initially, we had almost 15 input fields when creating an account but we greatly consolidated this to ensure user retention. Certain components such as toggle (on/off) for feedback were also added to allow a sense of privacy and control with the artists' works. We worked closely with the Content team to ensure the voice and tone remained concise and encouraging.
Project Creation & Management (studio)
HMW make artist users feel safe when sharing out their work-in-progress?
The Studio comprises of the Dashboard, All Projects Page, Project Creation, and the Project Page. To account for this HMW statement, we designed customizable privacy options to control the visibility of projects and posts and toggles to express interest for collaboration or feedback.
The Community Guidelines were created, working closely with Content, to help potential TST members understand what is expected of them, and ultimately create a safe community of creatives who uplift and inspire each other.
.png)
.png)
.png)
.png)
.png)
.png)
CONCEPT & USABILITY TEST
Mass confusion on the purpose, layout, and terminology of TST
Once a mid-fidelity prototype was created, this was handed-off to the Research team to conduct their concept and usability tests.
As seen from the insights below, there was mass confusion on the purpose, layouts, and terminologies of TST. The results were eye-opening, especially for the client. The client was very rigid and wedded to certain concepts and terms but these insights allowed us some wiggle room to iterate and direct the client to solutions that would clear the confusion. We then used these insights to build and refine the high-fidelity prototype of the MVP.
Insight #3
Some feature terminology caused confusion for users.
“I don't know if I would use the word needs... I would say like, like looking for collaborators.”
Insight #2
Users had trouble understanding navigation
“The question is like this, my profile view or do other people click through these tabs when they're on my profile as well?”
Insight #1
Landing page was unclear to users & did not indicate purpose of TST
“I am just trying to figure out what this website does. Like what this organization does.”
WHAT WE LEARNED
MORE ITERATIONS
Clarifying the confusion through discoverable CTAs, content, and iconography.
Most of the findings were focused on the Landing page and Project pages. I presented to the product, research, and content teams what we had implemented into the designs to resolve the issues. I made sure to back-up our team's design decisions with:
-
The insights and pain points from the concept and usability tests done by the research team
-
The recommended changes in style, voice, and tone from the content team
-
The scope and timeline restrictions outlined by the product team
.png)
.png)
.png)
DESIGN SYSTEM
Establishing a dynamic design system for the new visual direction
As there was a pivot in Phase 3 from a social media site into a production company, the visual direction had to pivot as well. Our team built out a design system to remain consistent with the design and user experience in between phases. The team and I created flexible components with an assortment of properties to achieve a dynamic component library.
The Serious Type P4 Design System
Landing Page & About Page
KEY FEATURES
-
The landing page has dynamic elements the encourage the user to explore the many facets of TST ecosystem
-
The About Us page goes more in-depth ofTST's mission, vision, and story.
Landing Page
About Us Page
KEY FEATURES
-
A short onboarding process captures the users' details, goals, and interests, which influences the content they see. The user can complete setting-up their profile after creating an account.
Onboarding
Sign-up Process
Studio - Dashboard & Project Creation
KEY FEATURES
-
The dashboard is the central hub for the user to start a new project, finish setting-up their profile, or find inspiration in the All Projects page.
-
When a user creates a new project, they can add descriptions, links, collaborators, and files. They can also set its privacy and needed roles for collaboration.
Dashboard & All Projects Page
Project Creation
CONCLUSION
CLIENT RECEPTION
During the weekly demo presentations, the stakeholders, Nikki and Sara brought unique perspectives and feedback to our design progress. Both were very adamant to see more tangible deliverables early on but overtime they understood the value of designs that are backed by research, especially when it comes to creating a usable product with a profitable business direction. In the final presentation, we presented the long-term strategy for the future direction of TST and Nikki and Sara were extremely impressed with our progress. Here were some of their words:
Was navigating through all that ambiguity a success?
Nikki: Really really exceptional, absolute work. Really amazing. I love everything you presented today and saw how it all came together and I'm incredibly grateful because I think there's some really special work done here. Overall, I think you brought great value to this segment of The Serious Type.
Sara: I don't know if you realize that you are part of helping to create the organization... The design is beautiful, I love the images that got added to create more inspiration and more reason to go further. You left us a really great container and direction to move forward with.. and as Nikki said was exceptional."
NEXT STEPS
Establish the artist user base and explore additional user audiences.
The structures we have developed in this Phase are a great jump-off point for the clients and future phases. In terms of the current platform, building a community takes time and so it is important to:
-
Establish a robust artist base to draw in users and increase engagement. Best to start with a sample size of ~100 registered users with varying goals to observe community interactions.
-
Track new accounts created and user retention rate.
In terms of potential avenues for exploration, the next phase needs to prioritize the following:
-
Articulate the focus for additional user audiences to inform future direction of the platform. Adults, youth, or both?
-
Unify the TST brand to build a solid branding strategy.
Studio - Project Page
KEY FEATURES
-
The project page houses a singular project of the user. It is divided into 5 tabs: About, Updates, Roles Needed, Media, and Threads.
-
From this page, the user can edit any part of their project, add potential collaborators, or post an update of their progress.
Project Tabs & Posting an Update
Project Creation
KEY TAKEAWAYS
Align early with both internal and external stakeholders
-
Align early and often with the cross-functional team - consistent cross-team collaboration in every step of the design process allowed us to tell a cohesive story which became key in the product's success.
-
Be flexible and adapt during ambiguity - the scope was adjusted often due to time-constraints and client feedback and so being able to pivot through the ambiguity is key. It also allows you to hone in on the generative and evaluative research to set the direction.
-
Encourage stakeholder alignment early on - this was a limitation as Nikki and Sara were only available 1 hr/week and so exploring other avenues of communication with the stakeholders to get through that barrier should be prioritized.