UI/UX
Wonder
An interactive reading and writing service designed to bring easy and fast solutions in a wonderland full of books.
Institution
Tyler School of Art & Architecture
Role
Designer
Team
Ashley Yeboah
Matthew Mcglynn
Tools
Figma
Adobe Illustrator
Procreate
UI/UX
Wonder
An interactive reading and writing service designed to bring easy and fast solutions in a wonderland full of books.
Institution
Tyler School of Art & Architecture
Role
Designer
Team
Ashley Yeboah
Matthew Mcglynn
Tools
Figma
Adobe Illustrator
Procreate
Overview
Overview
Wonder is a reading, writing, and publishing platform where users can explore a wonderland of written and published works by other users from an assortment of genres. As well as start their own worlds by writing, storing, and publishing their content while connecting with a community of readers and writers.
Wonder is a reading, writing, and publishing platform where users can explore a wonderland of written and published works by other users from an assortment of genres. As well as start their own worlds by writing, storing, and publishing their content while connecting with a community of readers and writers.
Research
Research
Initial Problem
Initial Problem
Often users find it difficult to discover well made original works and fanworks that are similar to genres or books they enjoy to read. While also struggling to get into writing after being inspired by the works they enjoy. Creating various frustrations and challenges for users to actually be motivated to continue reading and writing on their own accord.
Often users find it difficult to discover well made original works and fanworks that are similar to genres or books they enjoy to read. While also struggling to get into writing after being inspired by the works they enjoy. Creating various frustrations and challenges for users to actually be motivated to continue reading and writing on their own accord.
Research
Research
Competitive Analysis
Competitive Analysis
Through competitive analysis of existing solutions, I narrowed down and took a closer look at three existing services that connected readers through reading and writing. Researching and also taking note of user insights upon each of the services strengths and weaknesses noting things like which genres of work are more popular on each platform as well as pain points that frequently bother users the most.
Through competitive analysis of existing solutions, I narrowed down and took a closer look at three existing services that connected readers through reading and writing. Researching and also taking note of user insights upon each of the services strengths and weaknesses noting things like which genres of work are more popular on each platform as well as pain points that frequently bother users the most.
Research
Research
User Interviews
User Interviews
At least 5 interviews were conducted to understand complete insights and how users function using Wattpad, Archive Of Our Own, and Campfire. As well as how they go through their own time when reading and writing by themselves without the use of these apps. Most of these interviews led to major key complaints that were also addressed during the Competitive Analysis Research.
At least 5 interviews were conducted to understand complete insights and how users function using Wattpad, Archive Of Our Own, and Campfire. As well as how they go through their own time when reading and writing by themselves without the use of these apps. Most of these interviews led to major key complaints that were also addressed during the Competitive Analysis Research.
Research
Key Insights
Through Competitive Analysis and 4 in depth interviews, I was able to identify the key challenges and takeaways that reflected the main pain points that users faced the most as well as their overall needs.
Through Competitive Analysis and 4 in depth interviews, I was able to identify the key challenges and takeaways that reflected the main pain points that users faced the most as well as their overall needs.
1
Writers wish there was a proper tool for them to pace themselves properly or any helpful tools they could use to properly organize their works.
Writers wish there was a proper tool for them to pace themselves properly or any helpful tools they could use to properly organize their works.
2
Users want an easy to use filter system/friendly user interface that doesn’t intimidate them can be personalized to works and genres they would enjoy.
Users want an easy to use filter system/friendly user interface that doesn’t intimidate them can be personalized to works and genres they would enjoy.
3
Writers would like a better place to post their original works rather than alternative websites that display only fan-made works.
Writers would like a better place to post their original works rather than alternative websites that display only fan-made works.
4
Users want a balance of reading both non mature/mature topics without systems in place failing to keep up with moderation.
Users want a balance of reading both non mature/mature topics without systems in place failing to keep up with moderation.
Research
Research
User Personas
User Personas
Each user persona was established through a cultivation of competitive analysis and interviews, grabbing key insights and typical mannerisms when users are reading and writing at their own volition.
Each user persona was established through a cultivation of competitive analysis and interviews, grabbing key insights and typical mannerisms when users are reading and writing at their own volition.
Research
Research
User Journey
User Journey
Established through the User Personas, I created three in depth user journey maps that take a much more deeper and reflective look on the daily activities that each persona goes through. Connecting more on the ideal users that would use Wonder through the common needs, goals, and pain points of a user that involves a user’s journey through reading or writing. With one map showing a user’s journey as they search for a better platform to organize and store their works, another user who’s new to writing and wants to create their own stories, and another user who wants to find better works to read. This process and established journeys helped me generate ideas and thoughts that could be established onto the platform.
Established through the User Personas, I created three in depth user journey maps that take a much more deeper and reflective look on the daily activities that each persona goes through. Connecting more on the ideal users that would use Wonder through the common needs, goals, and pain points of a user that involves a user’s journey through reading or writing. With one map showing a user’s journey as they search for a better platform to organize and store their works, another user who’s new to writing and wants to create their own stories, and another user who wants to find better works to read. This process and established journeys helped me generate ideas and thoughts that could be established onto the platform.
Research
Research
Solution
Solution
After formal research, I decided to create, Wonder, a reading, writing, and publishing platform that encourages and helps users to write and publish their own authored works as well as give out an array of both fan-works and original works from other established users to read from. Giving easier chances for users to be motivated to create, read, and publish works on the platform, but also to connect with other users.
After formal research, I decided to create, Wonder, a reading, writing, and publishing platform that encourages and helps users to write and publish their own authored works as well as give out an array of both fan-works and original works from other established users to read from. Giving easier chances for users to be motivated to create, read, and publish works on the platform, but also to connect with other users.
Research
Research
Site Map
Site Map
To understand what would need to be added and created to reflect on users needs and pain points. A site map was needed in order to establish and organize informational sequences. Especially to implement opportunities and ideas in the places that would make the most sense both visually and logically for users to explore.
To understand what would need to be added and created to reflect on users needs and pain points. A site map was needed in order to establish and organize informational sequences. Especially to implement opportunities and ideas in the places that would make the most sense both visually and logically for users to explore.
Design
Moodboard
Moodboard
The moodboard was primarily composed of understanding the overall atmosphere of the website, but also to understand what the interface should look like. My main goal was to create an imaginative experience for readers, grabbing various elements that would cultivate a fun and dreamlike aesthetic for users. I also wanted to encourage users to step into a world full of reading and ended up incorporating some inspiration from the classic English novel Lewis Carroll's Alice's Adventures in Wonderland, transforming user experience into an enjoyable and entertaining journey where the platform can be their wonderland for reading and writing.
The moodboard was primarily composed of understanding the overall atmosphere of the website, but also to understand what the interface should look like. My main goal was to create an imaginative experience for readers, grabbing various elements that would cultivate a fun and dreamlike aesthetic for users. I also wanted to encourage users to step into a world full of reading and ended up incorporating some inspiration from the classic English novel Lewis Carroll's Alice's Adventures in Wonderland, transforming user experience into an enjoyable and entertaining journey where the platform can be their wonderland for reading and writing.
Design
Final Brand Identity
Final Brand Identity
Continuing the Wonderland inspiration, Wonder, became the final brand identity name for the platform. With the design, including the color palette and name logo that features a curved fountain pen tip with a star at the center. All created and chosen to evoke a whimsical and magical atmosphere for users to relax themselves in.
Continuing the Wonderland inspiration, Wonder, became the final brand identity name for the platform. With the design, including the color palette and name logo that features a curved fountain pen tip with a star at the center. All created and chosen to evoke a whimsical and magical atmosphere for users to relax themselves in.
Prototype
Prototype
Wireframes
Wireframes
To explore more of what will be on the website using the Site Map as a key element,
I created a set of wireframes for each important page and key functionalities of the platform, including, a homepage, a search page with an added filter and alternative page with the use of filters, a book page view of a selected story, and a comparison tool page, for users who want to find an easy way to find more books similar to the ones they enjoy.
To explore more of what will be on the website using the Site Map as a key element,
I created a set of wireframes for each important page and key functionalities of the platform, including, a homepage, a search page with an added filter and alternative page with the use of filters, a book page view of a selected story, and a comparison tool page, for users who want to find an easy way to find more books similar to the ones they enjoy.
Final Prototype
Final Prototype
Homescreen
Homescreen
Wonder’s homescreen displays access to the site including key features such as the search as well as displays of a user’s recent reads, what’s currently popular with other users, and recommendations for the user to read. The Virtual Assistant for the platform is also displayed here as well as other pages on Wonder.
Wonder’s homescreen displays access to the site including key features such as the search as well as displays of a user’s recent reads, what’s currently popular with other users, and recommendations for the user to read. The Virtual Assistant for the platform is also displayed here as well as other pages on Wonder.
Final Prototype
Final Prototype
Search With Filter
Search With Filter
Wonder’s search incorporates a display for users to look at the stories based on the keyword they type into the search. It also includes a filter for those who want to refine their searches.
Wonder’s search incorporates a display for users to look at the stories based on the keyword they type into the search. It also includes a filter for those who want to refine their searches.
Final Prototype
Final Prototype
Book Page
Book Page
After selecting a work to read on the platform, the page displays key features such as the information about the book, including information about the author who uploads the work. Additionally, what other works the other has made, similar works to that story, and as ratings and comment sections. Which includes a sectioned comment for the author’s official community group to chat more with other users who like the author’s work.
After selecting a work to read on the platform, the page displays key features such as the information about the book, including information about the author who uploads the work. Additionally, what other works the other has made, similar works to that story, and as ratings and comment sections. Which includes a sectioned comment for the author’s official community group to chat more with other users who like the author’s work.
Final Prototype
Final Prototype
Comparison Tool Page
Comparison Tool Page
Wonder’s biggest key feature is its comparison tool system, which is designed to compare books together to find similarities that can help users find their next big read. It includes a comparison button which is featured on all story pages of wonder for people to compare books that users are reading on the platform, but also an import function for users to compare books outside of the platform to compare with works on Wonder.
Wonder’s biggest key feature is its comparison tool system, which is designed to compare books together to find similarities that can help users find their next big read. It includes a comparison button which is featured on all story pages of wonder for people to compare books that users are reading on the platform, but also an import function for users to compare books outside of the platform to compare with works on Wonder.
Final Prototype
Final Prototype
New Story Page
New Story Page
For users, who would like to write, Wonder allows users to create their stories onto the platform. Through the New Story page, users can easily add the information of their work, plus user notes, and the option to create extra tabs to keep track of other information within their stories.
For users, who would like to write, Wonder allows users to create their stories onto the platform. Through the New Story page, users can easily add the information of their work, plus user notes, and the option to create extra tabs to keep track of other information within their stories.
Final Prototype
Final Prototype
Virtual Assistant
Virtual Assistant
The White Rabbit is Wonder’s official virtual assistant/mascot and is featured on certain pages of Wonder. It helps users to navigate the site, and any writing problems a user may come across on through their writing journeys.
The White Rabbit is Wonder’s official virtual assistant/mascot and is featured on certain pages of Wonder. It helps users to navigate the site, and any writing problems a user may come across on through their writing journeys.
Reflection
Reflection
Reflection
As a lover of reading and writing, this was an exciting project to create especially getting to understand other readers and writers own thoughts and processes.
As a lover of reading and writing, this was an exciting project to create especially getting to understand other readers and writers own thoughts and processes.