StoryJam
Project Overview
Problem
Lack of recent updates has resulted in a clunky and unfinished website, making it difficult for users to host large group discussions and store/retrieve information.
Tools
Figma
Miro
Ford employees need a platform to exchange ideas and encourage group voting in a casual and creative way. They currently use the platform StoryJam to achieve this.
Solution
Elevating StoryJam's current UI to account for more diverse use cases, improving the flow and functionality of the platform for both facilitators and participants.
My Role
-
Heuristically evaluated the current site
-
Conducted a competitive analysis
-
Interviewed StoryJam's current users
-
Concept tested Ford & FordLabs employees
-
Crazy 8 sketching (ideas for new features)
-
Designed lo-fi wireframes in Figma
-
Created hi-fi mockups of the final design
Project Goals
During the project, we established three main objectives to guide our design process:
​
Assess StoryJam's ability to foster open communication
Identify alternative use cases for StoryJam
Identify experience improvements for facilitators
Design Process
1
Heuristic Evaluation
2
3
4
5
6
Comparative Analysis
Interviews & Concept Testing
Low-fidelity Sketches
Expanding Use Cases
High-fidelity Mockups
Heuristic Evaluation
To improve the usability of StoryJam and its interface, our team analyzed the site using Nielson's Ten Usability Heuristics. The goal was to identify areas for improvement and patterns that could enhance the user experience.
Analyzing and assessing StoryJam's current interface based on usability heuristics
Key Takeaways
Aesthetic and Minimalist Design
There is an opportunity to create a more streamlined and visually appealing user interface.
Recognition rather than Recall
An option to record and export user responses does not currently exist.
Flexibility and Efficiency of Use
We should continue to build on the site's current onboarding efficiency.
Comparative Analysis
We aimed to identify success points across similar platforms that could be integrated into StoryJam. The team investigated the following platforms:
-
Hotseat
-
JackBox
-
Kahoot
-
Slido
-
Wordclouds
-
AhaSlides
-
StartQuestion
-
SurveyMonkey
Analysis Findings
Our exploration of other platforms revealed different features that could be implemented throughout StoryJam. ​
Templates
Having pre-set features eliminates any repetitive tasks and can make the meetings more efficient. This also allows users to have a more unique space for the task at hand.
screenshot from Kahoot
Multimedia Features
Widgets such as wheels or emojis can encourage creativity and express perspective on ideas. Media and links can also be integrated into posts.
screenshot from Ahaslides
Permissions and Controls
Ability to customize attributes of the voting room, such as who is allowed to vote, who can share the room, etc.
screenshot from Kahoot
Interviewing Users
We reached out to current users and conducted 4 interviews. Our interview questions centered around the current use cases of StoryJam and its successes and limitations.
Findings
We learned that StoryJam is largely used for icebreakers and iteration planning meetings. The platform is primarily used by design and product-management teams and least used by company engineers. Here are what our interviewees reported:
What they liked:
-
Fun characters and overall theme
-
Simple, intuitive nature of the site
-
Benefits of anonymity when voting
Their pain-points:
-
Difficult to view votes when hosting large groups
-
Cannot store or retrieve previous information
-
Site lacks updates and feels unfinished
Concept Testing
After their interview, participants were sent a survey to rate potential site improvements on a scale of 1 (not useful) to 5 (extremely useful). This was done to assess the usefulness and relevance of the proposed ideas.
Compiled testing results
Sketching
With a list of additional features for StoryJam, we each spent 90 seconds sketching to generate ideas for implemententation based on the research findings from the comparative analysis.
Gamification of results could synthesize votes or feedback in a visually efficient format.
Adding different media formats to allow for more diverse types of discussion
Screen flow for "Create Room" vs. "Join Room"
Whiteboard sketch establishing separate flows for "Create Room" and "Join Room" options
Changing Spectator Display
In order to achieve a more aesthetic and minimalist design, we brainstormed various ways of displaying spectators. We also had to ensure that our layout could visually house large amounts of spectators.
Large-Group Layout
From our interviews, we learned that there were issues when displaying large groups. Our team formulated different interface layouts to support viewing larger teams.
UI Redesign: Low-Fidelity Mockups
In order to start bringing our designs to life, we utilized Figma to create low-fidelity mockups. This allowed the team to experiment and envision what the final prototype would look like.
Theme Templates
Incorporating room themes allows for creative expression, adding to StoryJam's fun environment. To include this feature, we added a step to the process of creating a room.
Reorganized General Layout
StoryJam's current layout is strictly centered, making it difficult to follow the information being presented. We shifted and grouped elements to evenly distribute visual weight.
%20LOW%20FI.png){kind=avatar}
Enhanced Voting Layout
Slight adjustments were made to improve the voting screen:
-
input area was resized to be in-line with the submit button
-
spectators can now be displayed more efficiently via pull-out menu
Expanding Use Cases
We then began exploring alternative use cases for StoryJam, aiming to identify scenarios where teams could leverage the platform beyond applications such as icebreakers and small team meetings. Our team realized that StoryJam had the capacity to facilitate collaborative decision-making, collect feedback on specific decisions, conduct surveys, and serve as a repository for data. The following examples illustrate use case scenarios we envisioned:
.png)
Scenario #1
Thalia wants to conduct a StoryJam session where she can gather opinions from the product team on the kinds of features they would like to include in the new product design. How might she do it?
Including media options for responses allows for more diverse types of discussion. The team can upload sketches and references to better articulate their ideas.
_PNG.png)
Scenario #2
Carl wants to conduct a survey on a recent design decision made by the company. He wants to allow the responders to creatively express their opinions through the survey. How might he accomplish this?
Currently, StoryJam accepts short-answer submissions. Adding varied voting methods (e.g. multiple choice, scales, and star ratings) can improve efficiency and engagement.
.png)
Scenario #3
Kelly wants to be able to clearly discern her team members' stances on certain decisions made during the session. Currently, she struggles to mentally sort the votes while looking through them one by one. How might this be solved?
By synthesizing responses in a visually understandable and efficient format, Kelly will be able to quickly scan her team's voting results.
.jpg)
Scenario #4
Alexander is tired of taking screenshots of responses during StoryJam sessions with his PM team and wants a more efficient way of saving data. How might he do it?
.jpg)
Offering an option to auto-save and download responses reduces the need to manually record responses, allowing Alexander to efficiently keep track of important information.
Site Mapping
With our sketches, we created a new user flow to incorporate these features. The main focus is around saving data, specifically how and when users would be able to do so. The flow is pictured below:
click to view in more detail
Final Designs
We used our research and sketches to create high-fidelity mockups in Figma. Check out the final designs in this video walkthrough:
Next Steps
If given the opportunity to extend this project, we would continue testing and iterating to implement design changes. Our team also considered creating an onboarding tutorial to introduce new concepts and features.
Implement Design Changes
Continued
Usability Testing
Design New Room Themes
Reflection
This was my very first project with Purdue's Experience Studio, and it proved to be an eye-opening introduction to user experience (UX) methodologies and design tools. The project was centered around user interface (UI) design, which challenged me to refine my skills with wireframing and prototyping in Figma. I gained valuable experience in creating and maintaining design libraries, something I've found extremely useful for other projects. I'm grateful to Purdue, Ford, and FordLabs for providing me with the opportunity to work on such a fantastic project and for building a strong foundation for my future work.