2024
Product Design
PROBLEM
SOLUTION
A complete product redesign that targets the key areas through in-depth research, design and testing
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,
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.