STUDIO-FY
Studiofy is a platform to keep people of a design studio informed about all the activities currently active on the floor. Essentially it is used to book rooms, create events, conduct polls and get to know your co-workers.
Industry
Utilities
Platform
IOS Native
Role
UX Designer
THE CHALLENGE
The project started off as an initiative to bridge the gap for a lot of daily problems that we faced in the design studio. We found people having general conversations about few things which we saw as an opportunity to solve. We gathered a team consisting of UX, VD, IOS Engineers and QA to build a product which could help people make their daily routines more productive and efficient. Since, it was very vague in the beginning we had to start from scratch firstly to identify our target audience and then understand their needs. We had to formulate a design process which would point us to the exact issues people are facing and come up with a solution which could easily be adapted by people. The project also tries to capture the essence of a “design studio culture” and re-imagine it as a digital product.
MY ROLE
I was one of the two UX designers on the team. My major role was to drive the UX strategy working closely with the Visual Designer, IOS Developers and QA to build the product. Along with establishing the design process for the project, I played a major role in driving the overall timelines and deliverables for this project. I also managed the on-boarding of resources for the project.
DESIGN PROCESS
01 DISCOVERY
Ecosystem Study
Identification of User groups
User Interviews
02 DEFINE
Empathy Maps
Personas
Journey Maps
HMW Questions
03 IDEATION
Workshops
Prioritization of features
Information Architecture
User Flows
04 DESIGN
Sketches
Wireframes
Visual Design
Prototype
05 ITERATE
Usability Testing
Affinity Map
Revised Wireframes
01 DISCOVERY
Goal
To understand the ecosystem, identify major problem areas and collect user insights
Process
Ecosystem Mapping | User Interviews
Ecosystem Mapping
We started off with studying the ecosystem around the studio to gain a general understanding of how the studio works and what might be the potential areas of improvement that could be looked at. A quick brainstorming session with a lot of sticky notes helped us map the system and bucket it into broader themes.
User Interviews
We broadly categorized our user groups into four segments. To learn more about them, we conducted user interviews with 8 users about their daily routines in the studio. By the end, we collected a lot of insights and mapped them to our broader themes.
Number of Participants 8
Gender 4 Male | 4 Female
Age 23 - 45 Years
DESIGNERS
DEVELOPERS
MANAGERS
LEADERSHIP
02 DEFINE
Goal
To define the target users and understand their needs, goals, emotions and frustrations
Process
Empathy Map | Persona | Journey Map | HMW Questions
Empathy Map
After we gathered insights from our interviews, we felt the need to dig deeper into our user's minds. To align on a deeper understanding of end users, articulate the insights and also reveal any gaps in the existing user insights, we created empathy maps from all our interviews. This exercise also revealed a lot of emotions and frustrations the user was going through.
PERSONA
Once we had a fair understanding of our users, we created personas to represent the findings from the interviews and empathy maps. We made sure to incorporate a mix of personas ranging from a designer who is a new hire, a developer who has more experience, an engagement manager and leadership of the studio. By representing our insights in the form of personas, we were able to better empathize with the target users throughout the design process. Although we had a broad user audience, we chose to focus on new hires and experienced employees till manager level because these were the larger user groups and had a lot of pain points to solve.
JOURNEY MAPPING
To understand the current 'A day in the life' of our personas, we created journey maps to articulate the emotions and behaviour patterns of the user. It was also to create a visual representation of all our findings and align the whole team to it.
HMW QUESTIONS
After having an in depth understanding of our personas, it was time to translate their needs into actions. We constructed point-of-view statements and how-might-we questions to start the ideation process for solving our persona's needs.
03 IDEATION
Goal
To ideate features, information architecture, and flows
Process
Workshop | Prioritization of Features | Information Architecture | User Flows
WORKSHOP WITH USERS
We decided to do a collaborative workshop with users as there was a lot of creative potential within our target audience. 15 users gathered in a room were asked to ideate individually and in teams keeping the HMW questions in mind. As the goal was generation of ideas, we kept the tools as simple as possible - paper, sketch pens & sticky notes! We made sure to explain the context and create an open, non-judgmental environment. By combining our creativity together, we were able to translated our questions into features.
PRIORITIZATION OF FEATURES
We used individual dot voting within the team to prioritize the key features based on impact of users and feasibility. We created a product roadmap to showcase prioritized features aiming to solve user's needs. Since there were a lot of features to be considered, it was important to go with a release approach keeping the timelines in mind.
INFORMATION ARCHITECTURE
Next, we created a sitemap to visualize the information architecture of the app. This helped us to determine the overall structure of the application and afterwards create a seamless navigation for the users.
USER FLOWS
To analyze the flow of the features, we mapped out three user flows based on common scenarios we found from the primary research. This helped us validate our IA and optimize the user flows.
04 DESIGN
Goal
To design high-fidelity wireframes and prototype for Usability Testing.
Process
Sketches | Wireframes | Visual Design | Prototype
SKETCHES
We started designing the screens by sketching out various ideas. It was the first concrete step to visualize all the ideas that we had to envision this product. With the annotated sketches, we were able to present our ideas to the team and the users to gain constructive feedback at an early stage of the design.
WIREFRAMES
We then created high-fidelity wireframes in Sketch for the mobile screens. The designs were all based off of iOS native components following the Human Interface Guidelines. The wireframes demonstrated the navigation flow and designs of the screens and were used to prototype the flows. This gave a clear picture to the visual designer on the team to make the product come alive with colours, themes and typography.
KEY
FEATURES
Create events to broadcast about upcoming workshops, parties, educative sessions, project showcases.
Create polls to quickly survey about activities in the studio.
Find contact details of folks in the studio in the directory to contact them regarding projects or just have a chat.
Book a room for meeting or other events.
Filter by capabilities & levels to connect with the people you want in your network!
Folks – Your one stop directory to all the studio people across capabilities. This feature would have basic information about a person which helps the user know a little bit about them to break the ice!
Events – A timeline of all the activities happening in the studio. The active ones would be displayed on the dashboard as cards when the user opens the app.
Polls – An easy way to quickly gather public opinion for an upcoming event or any other information. The active polls would be displayed on the dashboard as cards.
Rooms – A schedule for you to check availability of meeting rooms. You can choose to book a room to avoid last minute inconvenience.
VISUAL DESIGN
The project is currently on-going with the visual design in progress*. Here is a peak of the dashboard.
PROTOTYPE
With the high-fidelity wireframes, I created a mobile prototype in Marvel to showcase it to the team and gather usability data from our users. Feel free to interact with the prototype using the button below.
05 ITERATE
(Coming Soon)
Thanks !