2024
Product Design
Duration
August - December 2024
Client
The design system created for the IMDb website ecosystem.
What is Lumity?
"Our goal is to build a community of curious thinkers committed to lifelong learning."
Lumity is an information sharing platform to engage in positive, productive content with your like-minded, growth-oriented learning community. Users can track and share what they are learning, and view other people’s learnings to witness their growth in real time.
What are their goals?
A reason for users to keep coming back from a tool perspective
Customized profile and suggestive feed
Connecting users with other members of the community
Consumption of diverse content that leads to genuine learning
“ I want the app to feel more alive and for users to have a reason to keep coming back from a tool perspective, rather than just a community/social network perspective. This includes customizing the profile and having a suggestive feed - connecting users with other members of the community and content that enhances their experience beyond their immediate network. “
Scoping it Out
To define the scope of the project, and guide us through the process, we defined our project goals directly on the basis of the client's needs.
Curate a Digital Identity
Create a space for users to curate a digital identity based on their learning journey and tracking learning to showcase their consumption and growth
Empower Users
Empower users to create their personal learning journey and build long-lasting learning habits through tracking and gamification
Encourage Exploration
How can we increase user learning and exploration on topics outside of user’s interests? Increase exploration and growth through interface design
Cultivate Community
Cultivate a sense of community and security to encourage user interaction and discussion, encouraging learning and sharing
Refine Interface Design & Experience
Increase usability, improve consistency, and build confidence in Lumity’s design to create a consistent visual aesthetic & brand identity
The project Timeline
The redesigning process spanned over 15 weeks
Exploratory Research
5 weeks
Gather data from various sources to define project principles and design direction.
Methods: Ecosystem Map, Technical Analysis, Literature Review, Competitive Audit, Interviews & Usability Testing
Schematic Design
4 weeks
Generate potential design solutions for low fidelity wireframing
Methods: Product Architecture, Information Architecture, Key Workflows
Evaluative Research
3 weeks
Evaluate the performance of the new designs and identify areas for improvement
Methods: Low- fidelity Wireframing and Prototyping, Usability Testing
Design Iteration
3 weeks
Finalize the designs by implementing improvements from evaluative research
Methods: High fidelity Wireframing and Prototyping,
Exploratory Research - Understanding
Laying a Foundation:
The history, background and aspirations of Lumity
"We are what we consume"
"Eliminate the noise on social media"
The creators wanted to create a space and focus feed to have niche content or curators that really speak to users. The other aspect they want to focus on is to maintain unbiased content that doesn't enhance the user's biases.
The Lumity Ecosystem:
Ecosystem Mapping to understand the stakeholders
Ecosystem Map of the various stakeholders involved in Lumity
Technical Analysis - How is the information structured?
Analyzing the Information Architecture of the app
Information Architecture or organization of features on the Lumity application
Information Architecture or organization of features on the Lumity application - zoomed in
What are the Competitors doing?
Exhaustive competitor analysis between many applications and services with similar features to Lumity
What can we learn
& apply to Lumity?
Onboarding
Engagement:
Interactive and personalized onboarding captures user goals and preferences - similar to Deepstash. Allow users to explore without commitment, as seen in Letterboxd.
Streamlined Process:
Avoid overly complex onboarding; ensure it is engaging but straightforward to prevent user drop-off.
Tracking Consumption
Customization:
Offer customizable tracking features (like easy follow buttons and customizable posting options) to enhance user engagement, inspired by Deepstash.
Intuitive Organization:
Organize user content in an intuitive way to facilitate easy access, addressing potential frustrations highlighted in Deepstash.
Exploring & Content Curation
Diverse Exploration:
Multiple exploration avenues (topics, authors, recommendations) and gamification elements (like streaks) to encourage user engagement, seen in Fable and Deepstash.
Personalization:
Allow users to choose content from individual creators, which can enhance discovery and user satisfaction, addressing limitations in Deepstash.
Sharing
Community Interaction:
Encourage sharing both within the app and on external platforms to enhance visibility, similar to features in Letterboxd.
Reduce Clutter:
Limit ads and ensure a clean interface to foster meaningful interactions, taking lessons from Goodreads.
What can professional case studies on learning based platforms teach us?
Takeaways from the study of TV Guide - source
What can we learn
& apply to Lumity?
Tone: Should be positive and encouraging
Ease of use: UX-best practices and patterns which users are familiar with
Personal Touch: Users want to take suggestions from friends & family
Notifications: Clear notifications and feedback showing actions taken by users
Information overload: Too many avenues can make the experience confusing
Flow: Any discover flow should account for search, categories and add to list feature
Getting stuck: With information heavy interfaces clear cues and exits need to be in place
Speaking to the users directly - Interviews & Usability Testing
A total of 4 interviews were conducted to gain insight into Lumity's current users and their needs.
Takeaways from interviews & Usability Testing
What can we learn
& apply to Lumity?
Onboarding: Visually engaging login pages with colors and varied options create a strong first impression, setting expectations for an enjoyable app experience.
Visual Design: A balanced use of white space with bursts of color is visually appealing and makes for an engaging but non-distracting interface.
Ease of Use: Minor improvements to button responsiveness and adding confirmations for key actions would create a smoother, more reliable user experience.
Content Exploration: A grid view and specific content tags would make exploring content easier and more intuitive, helping users discover new topics.
Profile Management: Users enjoy concise profile snapshots and categorized media. Profiles could benefit from clearer follow/unfollow options and customization.
Library & Playlists: Streamlining playlist workflows and making saved content easier to find could improve usability and encourage regular use of these features.
Personal Tracking/Streaks: Building on habit-forming features like learning streaks and adding gamified milestones could increase motivation and long-term engagement.
Navigation: Simplifying the main navigation; clearer prioritization of key features within the navigation. (Moving less-used items like playlists out of the primary navigation bar could make space for more relevant, frequently accessed features).
Community Engagement: Features that highlight trending discussions and impactful learning themes within users’ networks can help create engagement. Users view "Community" as a people-focused space and "For You" as interest-based. Renaming these tabs to better align with their purposes could help avoid confusion
Design Strategy - Hypothesizing
Product Architecture:
What is the product's core and who are it's users?
Product Architecture diagram - exploring the core goals and user types of Lumity
Solidifying the Key Functions of Lumity:
Personal Tracking
This app function supports novice users with tools for tracking progress and effectively organizing content in their Library.
Exploring Interests
As users grow more engaged, they explore and discover new topics and search for specific content they may be interested in.
Creating Community
And as they become regular users, they seek to actively engage with others and contribute to community discussions, thereby fostering deeper connections through the Lumity platform.
The proposed Information Architecture - how content will be organized
The proposed navigation for users
Key Changes:
Navigation Bar
The core functions of Lumity are now grouped together on the main navigation at the bottom, giving users faster access to the different sections of the app.
Messages and Notifications
Moving ‘Messages’ to the top navigation now makes them directly accessible from the home page.
Post Interactions
We also refined the interactions on a post card to ensure users can now seamlessly add a post to their desired playlists.
Key Workflows:
Onboarding/ sign-up
Create a new post
Create a new playlist + Add posts
Explore content
View & explore user profiles
View & interact with posts
View & send messages
View notifications
Wireframing
What should the application skeleton look like?
Wireframes - a skeletal representation of the main Lumity app functions
We presented these designs to the client for further feedback, as well as conducted evaluative research to understand user experience with the new design. This step ensured alignment among stakeholders early on and provided a clear foundation for the next stages of the design process.
User Research - Testing the Hypothesis
What we did
Test navigation and key workflows of the application
Understand how users interact with Lumity’s new design elements
Consolidate insights and improvements to implement them into final designs
Participants: 4 existing users and 4 new users
Quotes from user testing
Key Insights:
Clearer Navigation tabs
Users struggled to understand the distinction between the tabs on Home and Explore pages.
Originally proposed Home and Explore pages
Redesign the Post card
Users were overwhelmed by all the information and interactions on a post which led to cognitive fatigue.
Original - unchanged post card from Lumity appearing in a user's feed
Visually distinguish media types
Need for different thumbnail sizes and icons to visually distinguish the different media types that content can be explored in.
Media types on posts look the same with the exception of an icon
Unified learning and tracking experience
Users struggle with fragmented learning and note-taking across multiple apps. A unified platform that integrates both would create a seamless experience.
Final Design Development - Culmination of Research & Design
It was important to us to create a foundational design system. This design system is easily buildable for future iterations. The emphasis was on:
Adaptability across pages
Visual Consistency
Clarity of actions - labels
Navigation Components
Providing a cohesive component library for all new and updated features
Components created for Navigation - homepage, explore, menu, filters and search
The problem: All posts and media look the same
All posts on Lumity before the redesign were:
Standard - no visual distinction between a podcast and video
A small icon was used to distinguish between different media type
Lengthy
Original - unchanged post card from Lumity appearing in a user's feed
The big idea:
Visually distinct components for media types
This makes the interface more intuitive for users. They can explore freely and know exactly what type of media they are looking at - reducing cognitive load.
Redesigned post cards
Homepage - switching easily between interests & people
The homepage is a personalized aggregation of content based on the user's selected preferences, comprising two primary sections:
the people they follow and
their specific interests.
Each section dynamically displays posts relevant to its respective category, offering a tailored and engaging user experience.
Homepage components - navigation and filters
Browsing through interests
Description of the page:
Posts on interests users already follow
Filter through media types:
Users can select single or multiple media types.
Posts contain:
- User's name
- Username
- An option to save the post
- The media box designed according to its type
- Media descriptions
- Interactions such as like, report, comment and share
- Navigable tags for the post topics
Browsing through people following
Description of the page:
Posts by people users already follow
Filter through media types:
Users can select single or multiple media types.
Posts contain:
- User's name
- Username
- An option to save the post
- The media box designed according to its type
- Media descriptions
- Interactions such as like, report, comment and share
- Navigable tags for the post topics
Explore: expanding the learning experience
The Explore page offers users two distinct sections to discover new content:
Free Explore, which allows users to browse through various topics and interests at their own pace, and
Random Exploration, where users can stumble upon random posts from other users.
Both sections provide users with alternative ways to explore content while maintaining a consistent design and layout with the homepage, ensuring ease of use and familiarity for a seamless user experience.
Explore components - navigation and filters
Browsing free explore
Description of the page:
Exploring from a wide range of interests
Search:
Users can search for any interests/topics they are interested in
Filter through media types:
Users can select single or multiple media types
Filter through community members:
Users can explore other community members and voices
Posts contain:
- An option to save the post
- The media box designed according to its type
- Media descriptions
- Clickable to view the full post
Browsing free explore
Description of the page:
Exploring through posts from a wide range of interests and people
Search:
Users can search for any interests/topics they are interested in
Filter through media types:
Users can select single or multiple media types
Filter through community members:
Users can explore other community members and voices
Posts contain:
- User's name
- Username
- An option to save the post
- The media box designed according to its type
- Media descriptions
- Navigable tags for the post topics
*interactions such as like, share & comment were removed from the posts on the explore page since users don't immediately need to interact with these posts
Library: Personal tracking
The Library feature provides users with a centralized location to access their saved posts for convenient navigation.
Additionally, it includes a consolidated playlist page that offers a selection of pre-existing playlists, as well as the ability to customize their learning experience by creating personalized playlists tailored to their specific interests and preferences.
Library components - navigation, playlists and saved posts
Library - saved and playlist sections + Playlists and easily adding from saved posts
User Profile: With Delghtful New Updates
‘My Profile’ Page
The Bio section has been redesigned to create clear visual distinction between the various parts of the user’s Bio.
Overview
The new Overview feature gives users a sneak peak at their and recent activity on the Lumity App.Playlists
A featured ‘Playlists’ section when viewing another user’s profile.
This section features a user’s curated public playlist on their profile page. It is designed to give them a chance to better express themselves and curate a playlist of content for visitors on their profile.Grid View/ List View Toggle for User Posts
The Inclusion of a Toggle here gives users two ways to explore recent posts:A Free Explore Grid View layout which give users another way to explore their recent posts.
A List View displays posts by the order in which they were posted (recent posts first)
User profile - profile overview, saved posts and insights
Lumity Insights
We created an updated Insights page designed to engage users while also motivating them to use the app regularly.
Here are some notable changes we made on this page:
Streaks
A new Streaks section gives users a visualisation of their monthly Lumity app activity. Through motivating users to build streaks, we hope to motivate users to come back and engage with the app regularly.
Stats
The Stats feature gives users a way to visualise and track their activity and interactions on the Lumity app.
Quotes
The Quotes now have a new home at the bottom of the Insights page.
Also, the Quotes are now interactive. Users now have the ability to save, repost and share them with their community.
Looking Back, Moving Forward
Client Reaction
Final handoff meeting with the client
When we presented our final project, the client expressed a high level of satisfaction with our work, particularly with the grid view and filter functionalities that facilitated a more content-centric experience.
They appreciated the layout, citing its smooth flow and design as factors that contributed to an enjoyable user experience.
The client also highlighted their appreciation for the thoughtful addition of a highlighted "about me" section in the user profile. The display of playlists on the profile was another aspect that the client found particularly appealing.
In conclusion, the client expressed their gratitude for our team's dedication and hard work throughout the semester. They praised the overall quality of our design proposals and research and looked forward to delving deeper into the final designs and prototypes during the following week.
Notably, the client did not request any changes or provide additional comments, indicating that our project met their expectations.
Looking ahead on Lumity
Looking Ahead: Future Considerations
As Lumity continues to evolve as a platform, it is essential to remain committed to the principles that have guided its development thus far. With a focus on meeting the needs of its users, there are several potential features and collaborations worth exploring to maintain growth and enhance the user experience. Besides testing, if we had more time, these would be the main needs we would address:
Personal Notes Feature: Many users have expressed interest in a feature that allows them to record their thoughts and reflections. Integrating this functionality would enable users to engage more deeply with the platform and foster a sense of personal growth and self-discovery.
Customizable Learning Journeys: By offering users the ability to personalize their learning paths, Lumity can continue to be a valuable resource for growth and development. Tailored experiences will not only help users stay engaged but also contribute to the platform's overall appeal.
Collaboration with Local Community Organizations: Partnering with local organizations would allow users to connect with one another and engage in shared learning experiences. This collaboration could foster a sense of community and belonging among Lumity users while expanding the platform's reach and impact.
Team Reflections
Upon completing this project, our team is proud of the work we have accomplished in designing a platform that prioritizes user needs and aligns with Lumity's core principles. The positive feedback received from the client has validated our efforts and affirmed that we successfully met their expectations.
Throughout this process, we have learned the importance of adaptability and collaboration. Navigating various challenges has helped us grow as designers and problem-solvers. If given more time, we would have liked to incorporate some of our future recommendations and test our design with a diverse range of users to identify and address any potential usability issues.
Moving forward, we are confident that Lumity will continue to evolve and improve as a platform that empowers users in their personal growth journeys. The opportunity to contribute to this project has been invaluable, and we are grateful for the experience gained in working together to create a meaningful and impactful design solution.