As a minimalist designer, I prioritize simplicity in my designs. For me, product design means creating visually appealing and user-friendly experiences while conveying information concisely.
DivaTales
Building a social publishing platform from scratch.
Starting last September, I received an ambitious project to lead and manage the design for DivaTales, a social digital platform for publishing articles and engaging in meaningful dialogue and thought-provoking discussions. This is the story of how I made a positive difference to the responsive platform using my focused research, collaboration, and product design skills to deliver results on a tight schedule.
I saw this project as a remarkable opportunity for us to create something remarkable for a global community of passionate writers, particularly women entrepreneurs or those taking a break from their careers. Our aim was to facilitate idea-sharing and collaboration among like-minded individuals to effect meaningful change and enhance lives significantly.
So that’s what we set out to do.
To maintain confidentiality until the product launch, I've refrained from disclosing sensitive information and have adapted the designs accordingly.
Long Story Short
I took the lead in UX tasks, managing all major deliverables and presenting them to stakeholders from September 2023 to January 2024. I collaborated with a third-party specializing in UI and was supported by a team comprising a senior designer and a content writer. My involvement spanned the end-to-end design process, including user research, screen design, prototyping, iterative exchanges with the content writer to address our content needs, and working closely with the development team for implementation.
The Challenge
1 responsive social publishing platform in 3 Months
The challenge lies in leading the design for DivaTales. The task involves overseeing the design for DivaTales. Beginning last September, the project requires strong leadership and management to improve the platform's responsiveness within a tight schedule. The goal is to establish an outstanding platform for a worldwide community of dedicated writers, particularly women. This community should encourage idea sharing, collaboration, and fostering positive change.
Focusing on Goals
To make our mark in a tough market, I knew I had to define a clear role for our platform and meet the needs of our users. I was excited about the chance to create something meaningful.
​
My main goals for DivaTales, a social publishing platform, are:
​
-
Boosting User Engagement: I aim to increase user interaction by refining the platform's design and features. My focus is on encouraging meaningful conversations among authors, particularly women entrepreneurs or those taking a career break.
-
Enhancing User Experience: I'm dedicated to improving the overall user experience. This involves understanding user needs through research, collaborating on user-friendly designs, and ensuring the platform is easy to use and accessible.
-
Creating a blog that captures leads and entices visitors to return is crucial for promoting our community.
Research
I started the project by looking at what other similar platforms were doing. Once I understood that, I focused on the people who would use our website. I wanted to know how authors use platforms like ours to write and read. So, I talked to people from different parts of the company like Marketing, HR, Design, and Development.
From those talks, I learned a few things about what our users need:
-
Figuring out what topics, formats, and features they like best so we can make DivaTales work for them.
-
Making it easier for them to share stuff with the community.
I also noticed some interesting habits:
-
People mostly use their phones to browse publishing platforms, not computers.
-
They like to read more than they like to share stuff on social networks.
-
They like it when things are organized and focused.
​
Besides talking to our team, I also looked into what's happening in the market and what other products are out there. It helped me see that now's the right time to launch DivaTales, with the digital publishing market growing fast.
Working on the initial concepts
Brainstorm Session
Our Objective
.png){kind=small}
"Our objective was to build a vibrant community beyond a mere writing platform. We aimed to offer a supportive space where writers could connect, learn, and grow. Crafting an engaging blog was crucial for community promotion. Our focus was on continuous improvement to meet both user needs and business goals."
The Lean Approach
At DivaTales, we believed in keeping things simple and effective. Our strategy involved quick, step-by-step cycles where we gathered regular feedback from our team. This collaborative approach encouraged the UI team to quickly sketch ideas, create prototypes, while I provided them with regular UX/UI feedback. This process helped us to align early and feel a sense of ownership across different areas.
To ensure everyone was on the same page, we spoke with key stakeholders to understand their challenges. Together, we identified risks, set expectations, and laid the groundwork for a shared vision. Afterwards, I developed a plan outlining our approach and goals for DivaTales.
User Empathy
Throughout the project, we relied on personas to steer design choices, set priorities, and foster empathy among our team and the client.
For DivaTales, our strength lies in understanding and engaging with our diverse community. By immersing ourselves in the experiences, needs, and obstacles of our users, we tailor the platform to resonate with their feelings. Our dedication to empathy transforms DivaTales from a mere functional space into a nurturing environment where users can exchange stories, collaborate, and effect enduring change.
"Every word written is a step closer to sharing our story with the world."
Defining Important Tasks
Structuring the Experience
After pinpointing the main story elements in our scenarios, I outlined the primary pathways our persona would take while navigating the website. Emily enjoys creating and sharing stories across different categories, expressing her unique voice within a supportive community. Collaboration with other authors is essential, allowing her to contribute to impactful content that reflects shared insights.
In addition to crafting stories, users task for Aisha involves exploring various articles by fellow authors. She can save her favorites, creating a personalized collection that she can keep private or share publicly as she prefers. Within this growing platform, Aisha sets up her profile and connects with other authors, expanding her network within the emerging DivaTales community.
.png)
(Click to enlarge)
.png)
(Click to enlarge)
Building a Framework for Design
Before delving into specific designs, I organized the information architecture to map out the main screens and features. I opted for a flat navigation structure for this website, as it would include multiple pages like the Home Page, Categories Page, Article Page, Blog Write-Up Page, Help Page, Tips & Guide Page, Terms & Conditions, Saved Articles Page/Favorites, and Profile Page.
Starting on the same page, meeting with the key stakeholders helped me understand the business challenges. Together, we identified risks and aligned on expectations, constructing a shared vision for the website.
Site Map for DivaTales
Sketches:
The Design Framework
When outlining the design for DivaTales, our main aim was to create a modern and user-friendly experience across all key pages. The homepage greets users, while the categories and blog pages make exploration effortless. Creating a story on the blog page is made simple for users. Features like notifications and saved articles help users stay organized, while the profile and favorites pages are user-friendly. The tips and tools page offers valuable insights, and help and terms & conditions pages are easy to find. Our design focuses on clarity and simplicity, providing a unified and contemporary visual experience centered around the user.
Sketching the layout for DivaTales
Low-fidelity Designs
We followed a structured process of testing and refining, starting with broad ideas and gradually honing in on the best solution with each iteration.
Once we settled on a main direction, we stayed in the early design stage for several rounds, exchanging UX feedback on the designs. Suggestions included minimizing choices in the first section and incorporating trending topics into the navigation as categories. We also aimed for a more playful and modern design, with square thumbnails for blogs and a two-column layout for articles.
Throughout, we focused on consistency, aiming to make card designs uniform across different pages. Additionally, we tweaked the layout to display one author below the featured image and the rest at the end of the blog. We also worked on integrating features like 'Listen to Audio,' 'Pause,' and 'Restart Audio' buttons, as well as implementing options to save favorites as 'Private' or 'Public.' We considered making the profile tab the hamburger menu, where clicking on it would reveal the options typically found in the hamburger menu. This approach aimed to streamline navigation and provide easy access to menu items without cluttering the interface.
Low-Fidelity Wireframes
Helping in Refining the Low-Fidelity Screens
Visual Designs
In shaping the DivaTales brand, we aimed for a bold and confident design to avoid stereotypes. We chose imagery and colors that appeal to modern women and entrepreneurs. Our color preferences and images reflect these principles, and we showcased the brand with digital and physical assets.
-
Fonts: We aimed for a mix of different fonts, both with and without decorative strokes, making sure that larger text was easy to read.
-
Color Theme: We chose a refined set of colors, using various shades of purple to create a unified look across the website.
-
Banner Image: We're still exploring options for the main image, whether it's a representation of our brand's personality, an interactive graphic, or a compelling visual to engage users.
-
Design Composition: We ensured that the overall design wasn't too busy by harmonizing colors, fonts, and shadows to create a cohesive look.
​​
Additionally:
-
We improved the icons to make them more impactful within the design.
DivaTales UI Kit
High-Fidelity Designs
The main screen is set up for users to easily access key website functions. Icons are sized for easy tapping, their order chosen for convenience, and the layout made to scale for future updates.
Regarding the banners - these are the first things users will notice, so they need to be attention-grabbing. I suggested adding more interactive or original banners. We needed some tweaks for elements like "min read," "min ago," and the "bookmark icon." and keep these separate from the main image, as users will add blog images themselves. I shared some websites for inspiration and suggested adding interactive elements to the page.
For categories, we're moving forward with the ten options I helped finalize with the founders. We also needed a section about DivaTales and could include a Newsletter subscription just before the footer.
High-Fidelity Screens for Mobile Version
Responsive High-Fidelity Screens
Usability Testing
Testing With Users
I tested all these designs with our own employees to ensure they meet user needs. Through multiple rounds of usability testing, the designs were refined and the overall user experience improved.
Due to the project timeline, usability testing ran concurrently with website implementation. The aim was to validate concepts and identify any issues early on. Sessions involved employees from different departments interacting with interactive prototypes. Based on feedback from usability testing and design reviews, updates were made to the designs by the UI team.
Design Handoff
During the Design Handoff, I ensured a smooth transition for the DivaTales project by providing the development team with comprehensive Figma files and detailed explanations of all functionalities. Additionally, I shared interactive prototypes for the screens to enhance the development team's understanding of the website's interactions. Throughout the design process for DivaTales, I maintained open communication with the development team, keeping them informed of any necessary adjustments or challenges. This collaborative approach facilitated problem-solving between the design and development teams.
Ensuring everybody is on the same page
Learnings
Like any project, we had our ups and downs.
-
Working together as a team made a big difference in how things turned out.
-
Staying open-minded during the design process helped us try out new ideas.
-
One thing I learned is that finding passion in what you do can be a big source of motivation.
-
As a leader, I made sure to stay connected with everyone involved, whether it was stakeholders, UI partners, content writers, or the development team. It kept us all on the same page and moving forward together.
Read More of My Case Studies
Girl Power USA
VERZIO
Rainvas