Storyline Strategies
Participant App
screening room
make it social.
Storyline Strategies Participant App
Storyline Strategies (formerly known as Luntz Global), is a market research company that conducts focus groups. Currently, a combination of analog and digital practices is used to collect data during focus group sessions. With the implementation of the Participant app, focus groups will be fully digital, allowing for more time to analyze and learn.
My Role
Device
Year
Tools Used
- UI/UX
- Product Research
- Ideation
- Sketching
- Wireframing
- Prototyping
- Visual Design
- Interaction Design
- iPad
- 2019
- Photoshop
- Illustrator
- After Effects
- Whimsical
- Sketch
- InVision
- XD
- Flinto
The Problems
Storyline Strategies is a leading market research company that conducts focus groups with pen and paper, which makes analysts input data sets manually into a computer before they are able to visualize and conduct discussions with participants. Because of this, sessions would take an unnecessary long time to conduct because of waiting times.
The Solution
- Convert their paper-practice into a fully digital iPad app that would collect and convert data on a laptop that would act as a local server to run the whole session. Allowing for fast storage of data and the ability to be easily mobile. This will also streamline the progression of the disscussion portions of sessions, preventing wasted time collected data with participants.
Looking at the design brief, and the question types (20 different exercises) the bulk of the project would go into the image annotation and streaming video exercises. However, a lot of consideration went into the layout and design of the basic questions to allow users to focus and not be subtly influenced to answer questions a certain way. I looked at various questionnaire examples provided by Storyline Strategies, and from competing companies to help inform the standard presentation of questions, and how I could present the exercises in a clean and simple way.
Mood board
By looking at examples of the current layout and the general practices in UX/UI design for questionnaires, I was able to develop an inspiration board how the project should move forward. I then presented my ideas to the Creative Director and considered the feedback received to help inform the project.
Lo-Fi
With the design brief in hand, I was off to the races in producing the basic framework for the Participant App. I started off with planning out the exercises that were more traditional in nature as they would help inform the overall feel and style for the app as a whole. There was an initial phase where the design was calling for an instruction modal that would appear prior to the exercise, this was removed as it felt too repetitive for the user and if needed an instruction prompt would be displayed above the exercise question (seen in the hi-fis).
Hi-Fi
Considering the feedback from the client and their whole rebranding, I wanted to keep Participant App visually clean. This would keep focus on the questions and prevent the posibility of bias that could be put onto users while going through the exercises. To help evolve and inform the process, I looked at existing UI standards from Google and Apple to inform components that I felt would evolve my vision and form a seemless design.
Iterations
The iteration process is something that I enjoy doing, as I can see improvements to the design and make sure the app is something that will be intuitive to the users. This process was something I worked on with my team as I would ask for feedback at various points during the design process.
Button variations were a key part in the overall design process as these assets were the interaction for users and what would inform the UI. Coming up with a clear way to siginify a selection was decided early on that it would go from a solid white state to an outline and text color change, and a shadow to give prominence to the selection. This is similar to Google/Android selection UI as I thought it was a concise way to present the information to users without being graphically intense.
Pagination of the annotation screens was brought up in a meeting about the flow for users and due to the fact that participants will be drawing circles with their fingers, finger swipes to progress within multiple annotations would be hard to differentiate during this process. So, the addition of buttons was introduced to allow for a clearer way to navigate through the annotation process. This took some time to problem solve as I knew I wanted the ability to move between image sets to always be in the same place for the user. I eventually got to a place where the buttons would be in line with the pagination indicators, to collectively group related components together.
The annotation tool set and how they were initially conceived as radio buttons was originally ideated from looking at various apps that dealt with photo editing/drawing. In changing the pathways for the user with pagination, the radio buttons felt clunky and took up a lot of space that could be better utilized, a tool bar was then mocked up and created. I changed the height to something more sleek and kept the overall shape (rounded corners) to stay consistant with the overall UI of the other buttons the user has to interact with.
Finally, considering the same issue with pagination navigation, the functionality of the comment feature during annotations needed to be changed. Specifically, removing, moving, and editing a comment had to be changed as it was originally based on swiped gestures. I considered a long hold to being the ideal solution as it could initiate an interaction to expand a set of options and be relatively innate to mobile device users.
Loading Screen Animations
These animations were a late addition to the project, but they were a delight to make as I got to get back into After Effects and work on some of my skills with the program. The animations for these were straight forward as their own entity and I made them all separate for ease of looping and combining for later use.
The Prototype
Impact
The implementation of the Participant App allows for session leaders to conduct user research sessions with ease while being effective in data collection. Having the ability to not only store multiple data sets, but to upload and distribute back to the office from the field will allow for faster distribution of data. This will give the opportunity to conduct focus groups with more efficiency and frequency.
What I learned
I learned to communicate better within an agency setting and making sure my ideas were clear and concise. I was able to work closely with a Creative Director who offered creative freedom to design this portion of the Storylines Strategy App, and offer feedback and input on the Admin Portal they were working on (after completing this project I had taken over the Admin Portal). Finally, I gained a better understanding of industry standard UI practices, that I hope to implement in my future projects.
Storyline Strategies Admin Portal
