Concept A: Card Sorting
Participants liked Concept A’s visual clarity and found the flow easier to follow
Our participants wanted to see all of the options laid out and did not like the way the cards overlapped
Concept B: Word Bank
Word Bank feature is engaging and has greater option visibility
Cluttered, users voiced concerns about text sizing inside the options
mechanics for adding and ordering options were unclear
Sketches for concepts 1 and 2
Low-fidelity wireframes for Concept A, where users drag and drop options into ordered spots
Research
Examining Knowsy's Current State
→ TheGameCrafter had recently updated its manufacturing requirements again. This meant that instead of needing to resizing and updating every board game component, we could scope down and focus on updating the box
→ Our team also played a few rounds of the board game to identify outdated aspects of the game that could benefit from a redesign. Some of the topic card options were outdated, and the font used made it difficult to discern certain letters.
Lacking a timer or progress indicator creates confusion when rounds end abruptly. Having a timer or progress bar offers transparency.
Time Limits
A point system keeps the game competitive, but this competition is kept friendly with the inclusion of alternative awards.
Alternative Awards
The general flows and structure of each game are straightforward and easy to follow: 1) setting up a room 2) individual activity 3) scoring.
Mobile Flow
Redesigned Cover Top
Redesigned Cover Bottom
original card design for the topic "Pets"
our redesigned topic card
Reimagining The Game Box
Final Design
I was tasked with redesigning the box cover and started by reviewing TheGameCrafter’s guidelines for box cover designs. Based on the site's recommendations, I chose the design template for a “large stout box”. Using the dimensions and spacing requirements, I created several design mockups in Figma, including a resized version of the original cover. These visual mockups were then presented to our sponsor for feedback and suggestions.
What's The Standard?
Competitive Analysis
Our team conducted a playthrough of the games Fibbage Enough About You and Family Style, two parlor-style games similar to Knowsy. By taking notes on standout features of the mobile UI and gameplay mechanics, we gathered ideas for elements to include in the mobile app.
Creating Knowsy's User Flow
User Flow Mapping
Based on our competitive analysis, we created a detailed flowchart in Miro that outlines three main phases of the game: start, ranking, and scoring. We structured our wireframing around these phases, placing a strong emphasis on the ranking phase for our high-fidelity prototype. The flow of the game differs slightly from the original gameplay, as players will now rank assigned topic cards simultaneously rather than one at a time.
Generating Ideas For Knowsy's Ranking Process
Sketching
Our team utilized insights from our initial playthrough and competitive playtesting to brainstorm various methods for ranking options within Knowsy’s mobile app. We organized a workshop where we sketched our ideas and discussed them collectively. Afterward, we presented three concepts to our sponsor: 1) A layout that features digital recreations of the board game, 2) An option for users to input their own options instead of selecting from a fixed list, and 3) A format that includes a word bank from which users can choose alternative options from to add to their option pool.
Shaping Our Ideas In Low-Fidelity
Prototyping
Our sponsor preferred concepts 1 and 3. We took to using Figma, where we adapted our sketches into wireframes. To better visualize each design concept, simple click-through interactions were added to the wireframes for testing.
What Do People Think Of Our Ideas?
Evaluation
We ran concept tests with 5 different users to identify specific elements of each concept that users like/dislike. Both ideas were presented as a clickable walkthrough, and team members gathered feedback on navigation, UI, and the overall gameplay progression.
Bringing Knowsy Mobile To Life
Final Design
We consolidated feedback from concept testing to generate concept wireframes for the final design. The concept designs were then developed into mid-fidelity wireframes with minimal interactivity. Once the framework and flow were established, we referenced our style guide to refine the design. Click through the finalized prototype below!
Looking Back…
Final Design
I'm grateful to our sponsor, Luke Hohmann, for allowing me and the team to try out something new for my final studio project. Working to bring Knowsy, originally a physical board game, into a digital space has given me the opportunity to explore interaction design and practice designing for mobile.
→ If given more time to work on this project, our next steps would be to create a high-fidelity prototype that encompasses the entire mobile experience and refine our designs based on insights from user testing and heuristic evaluation.
Designing Knowsy's Mobile Experience
After successfully revamping the physical components of our board game, we shifted our focus to the second phase of our project. Our goal was to design a comprehensive mobile experience and create screen prototypes to effectively visualize our design. To guide and inform our activities, we asked ourselves:
"How might we ensure that the mobile app experience is user-friendly and aligns with the original board game?"
Using the style guide and card template, the team began reformatting the old topic cards and designing new cards for the expansion pack. This will maintain consistency and address previous readability issues. This helped maintain consistency and address some of the previous issues with readability.
A significant change from the original design was the addition of shapes for each option, intended to help accommodate colorblind users or anyone who may find it difficult to discern between the color-coded options.
Next Step: Reformat and Redesign
Final Design
Establishing Knowsy's New Look
Style Guide Development
The team opted for a bright, high-contrast color palette and selected a new typeface to enhance Knowsy's playful identity and ensure readability. Creating a style guide to consolidate our design choices was essential for establishing a cohesive visual identity across both physical and digital formats, especially during the redesign of the board game's components.
What's Knowsy?
Background
Originally released in 2014, Knowsy is a board game designed to promote empathy and community-building in a fun and engaging way. In the game, one player receives a set of items related to a specific topic and ranks them in order of preference. The other players then try to guess how the items were ranked.
Knowsy is commonly used as an icebreaker activity in both casual and corporate settings, helping participants learn about each other's preferences and priorities. The board game is produced by TheGameCrafter and was also adapted into an iPad app.
Ideation
Problem Statement
So, Where Do We Come In?
We found that Knowsy's digital assets no longer meet manufacturing standards, and some of the terminology used in its topic cards is outdated. Additionally, the mobile app has been discontinued. Our goal was to update the graphic design and terminology of the physical board game and to create a new and improved mobile app experience.
Bringing Knowsy into the 2020s
After discussing the outdated topic cards in the board game, our sponsor suggested creating an expansion pack to enhance the game. Our team decided to develop a new set of cards themed around the 2020s. Each member contributed 10 new topic ideas along with corresponding response options, resulting in a total of 50 fresh topic cards for the expansion pack.
Ideation
Problem Statement
Knowsy
Updating physical components for the board game Knowsy and prototyping a mobile adaptation to relaunch it for modern audiences.
Project Info
Duration: Fall 2024
My Role: Research, Sketching, Graphic Design, Wireframing, Prototyping
Team: 5 undergrad UX students