Figma, Slack, Zoom
Lester Choy, Jun Ying Lim, Andrei Barbu, Dan Kirby
Hi-fi Homepage and Product page, MVP, Style Guide
- Develop the homepage and product page
- Conduct a portion of the user interviews
- Conduct a portion of the usability test
- Develop Design portion of client presentation
- Develop Hi fi Prototype
- Facilitate Design studio
- Team lead for Deliver Stage
WHO IS CREWASIS
Crewasis is a startup that focuses on leveraging Data Science to tackle business challenges. Their approach involves mining open-source data and utilizing data science models to discern important information from the vast amount of available data. By integrating multiple datasets, including government data, research findings, consumer brand data, and social media data, they gain valuable insights and identify trends. Their expertise lies in helping customers interpret this data and translate it into actionable business goals.
Our team has been entrusted with the responsibility of creating a Minimum Viable Product (MVP) that automates the services offered by the company, with a specific focus on enhancing the Customer Portal and optimizing its workflow. Furthermore, we have been assigned the exciting challenge of rebranding the company to reflect its evolving identity and ambitions.
We don’t know anything about data science so it felt like there was a steep learning curve to climb to get us up to speed on the topic.
Using the 5 stage Design Thinking Model proposed by the Hasso Plattner Institute of Design at Stanford (the “d. school”). The stages of this Design Thinking process are as follows:
1. Discover 2. Define 3. Ideate 4. Prototype 5. Test
INITIAL MEETING WITH CLIENT- SETTING UP FOR SUCCESS
We had an initial meeting with the client to introduce ourselves and share our double diamond process for approaching the project. It was a valuable opportunity to understand their expectations for the project, establish timelines, and schedule weekly check-ins to keep them updated on our progress. We also explored suitable collaboration spaces, such as the design studio, where they can actively participate and contribute to the project. This was fruitful because we are not only aiming to deliver good results but also building trust and fostering a collaborative partnership.
CREWASIS INITIAL RESEARCH
When we received the project brief, the Crewasis team provided us with a folder that contained a vast amount of information, numerous resources, and pre-existing work they had done prior to our meeting.
It was interesting to observe the similarities between our approach as UX designers and how data scientists tackle unfamiliar topics, rapidly acquiring knowledge. We had to navigate through a significant amount of information, honing in on the most relevant aspects. Additionally, we had to ensure the validity of the provided data by conducting our own tests.
Our team faced quite a few challenges during this project. We had next to no knowledge of data science, were unfamiliar with the customer base, and had to build the portal from scratch. It was a thrilling yet complex endeavor that required careful attention and problem-solving.
HOW DOES CREWASIS WORK?
Essentially the whole data science process in crewasis goes through 3 main steps: define, ideate and iterate, present.
STEP 1: Define
In the define stage, clients will have to go through an interview and fill up a survey for the Crewasis team to understand what their business goals are and what are the topics they are looking to explore to find business opportunities. Once the problem/scope of the project is defined it will be presented in a form of a project brief.
STEP 2: Ideate and iterate
Taking the brief, data scientists will really dig into the open source data and draw out the interesting insights that they can come up with within a week which we would call sprints.
During each sprint, approximately five leading ideas will be presented to the clients. The customers will then select the ideas they like the most, shaping the direction for the next sprint. This iterative process allows for the narrowing down and refining of insights.
STEP 3: Present
Finally, in week five, they’ll wrap it all up with a final presentation and a comprehensive report.
Crewasis and its customers are confronted with two significant challenges:
- Firstly, the process demands extensive labor from the Crewasis team as they guide the customers through every step of the way.
- Moreover, customers themselves lack the capacity to delve into the data independently, leaving them reliant on assistance.
So with all that in mind, we devised some research goals to get a better understanding of Crewasis.
One of the research methods we started with was to do a competitor and comparative analysis. This involved examining our competition to gain insights into their practices and identify valuable lessons that we could incorporate into Crewasis.
There were quite a few competitors providing similar technologies. However, their websites often feel dull and artificial. They rely on cliched imagery, such as generic stock photography and contrived diagrams, which makes them seem impersonal.
And then we looked a bit broader with comparative websites, it was similarly cold and impersonal websites. However, one standout was the accounting software called Zero.
Their homepage offered a detailed overview of the package and portal navigation in a clear and organized manner. However, the portal itself was more suited for experienced accountants, with complex terminology and labeling that could confuse less experienced users. We also admired the minimalist and clean design of their homepage. Inspired by their elegance, minimalism, and efficiency, we aimed to integrate these qualities into our own approach.
Fortunately, Dan had access to SEO analysis software, which turned out to be a game-changer. As we delved into our research, we realized the crucial role SEO plays in attracting visitors to a website. After all, designing a visually appealing website is pointless if people can’t find it. So, we aimed to strike a balance between keeping the content minimal yet informative enough to explain what the company does and build trust with potential clients. This experience really highlighted how previous know-how can bring extra value to the UX process.
In the user interviews, we gathered insights from nine participants who were highly experienced experts in their respective fields. These individuals held influential positions as top executives and managers, and their opinions carried significant weight, as their teams would follow their guidance.
Users want a balanced approach between automation and the human touch:
9/9 participants are excited about the automation element but they underlined that direct interaction between client and Crewasis is necessary for achieving the best results.
Users need to understand how Crewasis can help to adopt their service
Users need to understand what the product does and how the portal works
The portal must accommodate the needs of both existing teams and potential new teams that using the service:
- Portal must be easy to use
- It must be easy to learn how to use the portal
- All past progress should be on the portal.
The periodic and final findings need to be presented in a way that encourages smooth implementation.
- consistent structure
Additionally, they mentioned that they primarily used desktop devices for their work, making mobile access less necessary. While mobile functionality could be a future consideration, it was not a priority. The summary of these user interviews provided valuable guidance in identifying key areas to focus on.
In Crewasis previous research they had a total of 8 personas, we decided to pick one of them that was closest to what the main client would be for our MVP and built on that. Introducing …
Laura represents a fresh user perspective as an enterprise client entrusted with the responsibility of discovering new business opportunities and insights through data science. The process of developing Laura’s persona proved to be really valuable as it allowed us to explore ideas and gain a profound understanding of the user’s needs and frustrations. Moreover, it helped us assess whether these aligned with our business objectives and research goals.
Through all the research that we have done, we built a journey map and found out there were parts of the journey that needed clarification from the crewasis team. This was important for us because by properly understanding what that step would entail, we could identify opportunities to enhance the user experience and streamline the process for the user.
We sought to address key questions such as:
- What are the questions the client needs to answer before a Project Brief created by Crewasis Data scientists and AI?
- What would happen if the client needs to change certain information after submission? Will there be a grace period?
- What would the beginning of a customer’s sprint look like?
- How would Crewasis be able to help the customer should they require assistance? Would they be alone during the sprints, or what else would be planned for the customer during this time?
By gathering these answers from Crewasis, our team could plan or include certain things in our design such as instructions on each screen or an onboarding feature. This is where having weekly meetings and having a clear dialogue with the client proved to be really useful.
Keeping that in mind, we proceeded to the next phase of simplifying the interaction map we initially encountered. Despite our efforts, we found that the journey still consisted of 21 steps, some of which were challenging. However, on a positive note, we identified 22 opportunities to enhance the user experience and streamline the process, making it significantly easier for the users.
Additionally we shared with the client our brand analysis of what Crewasis currently represents and discussed with them what they would like to be so that we could steer their branding towards those keywords
Using those keywords as a starting point, we put together a mood board that encapsulates those qualities.
At the next scheduled meeting, we presented our research findings to the team, shared problem statements and ‘How Might We’ statements to see what resonated with the crewasis team and also to facilitate a design studio to ideate on possible solutions for the MVP. That meeting was memorable because I was witnessing the intersection of the double diamond process, and it felt like a north star was built in front of me for what was to come for the rest of the project.
Understanding that there are multiple angles approach this problem, we thought it would be best to write each write out our own set of problem statements and after that sat together to choose and iterate on which statement would work the best and we chose this
PROBLEM STATEMENT 4:
Laura needs a way to gain confidence in the automated system, so that she can receive and analyze data on her own without too much help from a Crewasis rep.
HOW MIGHT WE
Crafting the “How Might We” (HMW) statement was a critical aspect of our process, as it essentially set the course for the rest of the project. Getting the statement right was important, as it enabled us to generate ideas and devise solutions that would shape the MVP. Conversely, choosing the wrong statement could result in developing a solution that fails to resonate with the user or align with our business objectives.
We compiled a list of “How Might We” (HMW) statements and invited the entire team to vote on them. It was good to have the team choose which statement made sense to them since they were the closests to the product. These chosen statements served as the foundation for ideating potential solutions.
Since we had a good number of people participating, we used a fun ideating method called “Crazy 4s” to get a diverse range of ideas and insights that is shared and iterated upon really quickly.
- Onboarding system
- Hierarchy system of ideas
- Use of videos for explanation
- Indication of a human behind the screen
- Metaphorical puzzle
- Generated out-of-the-box thinking
Taking the ideas we got from the design studio, we organized ourselves and drew up a rough happy path user flow to determine the assets/screen that we would need to design starting with lo-fi sketches.
We started off with sketching out separate layout variations each for the portal and website.
Mid-Fidelity: More iterations and usability testing
After that we quickly took the sketches that we felt worked for what the homepage and portal would look like and turned them into Midfi sketches. It was helpful because we could take them and do usability tests instead of investing time into endless iterations without feedback.
We conducted usability tests with 7 other participants that were on a similar professional level as the people we reached out to in our user interviews. We aimed at observing the participants’ ability to accomplish specific tasks while also assessing their confidence in engaging with the product. We also assessed areas that required meaningful changes that would improve the users’ experience.
Homepage / Product Page
Overall the tests were really fruitful and as expected there were many things that were difficult for the users to navigate. Generally there was 3 big points that was brought up in all of our tests:
1. Surveys need to be simplified
The surveys are also very heavily loaded with information; we needed to lighten the user’s load by making each slide and question short and succinct, and intuitive to move forward step by step.
2. Consistency is key
Most users found it difficult to navigate the portal due to certain elements within our layouts that would change as they moved from one page to another.
3. Users were not sure of what to do and where to go through the portal
When it comes to the portal, users have a lot of difficulty understanding what they have to do next and are also unfamiliar with the whole product process which leads them to be lost most of the time. It was clear some sort of onboarding system to educate the user was something to consider.
4. Users were confused by certain labels and weren’t sure about certain terms.
Users had trouble understanding some labels and instructions, which made us realize the significance of UX writing in our design. It’s no use having something fancy if people can’t figure out what a button does. So, moving forward, we made sure to prioritize clarity and user comprehension over mere aesthetics.
Given the numerous issues and a substantial number of features and pages to design, we recognized the need to prioritize our efforts. We carefully selected the features and pages that would be part of the user’s smooth journey, focusing on the happy path of the user experience.
ATOMIC DESIGN PROCESS
With the amount of pages set out for us, we adopted an atomic design approach. By breaking the user interface into atoms, molecules, organisms, and templates, we established a consistent and flexible design system. By having reusable components, we could quickly put together and refine the different screens and features of the MVP. The atomic design method kept things organized, made collaboration smoother, and sped up development.
Documenting our design process played a crucial role in facilitating a smooth handover and establishing guidelines for future design endeavors. This documentation served as a valuable resource, enabling a seamless transition and minimizing knowledge gaps. Additionally, it set clear standards for consistency and cohesion in future projects.
Taking the keywords from the personality map and inspiration from the moodboard we set out to develop a style guide that fit the crewasis’ personality and also their practical needs which was to have something that was flexible and easy to adopt as well looking professional and legible.
After implementing the feedback from the usability tests and applying the style guides to our design we finally got to our hi-fidelity design.
Homepage designed to immediately show the direct benefits and functions of what Crewasis does
Video demo at the start of the product page to allow user to see how the product works immediately
4 step explanation to let user understand the process of the service
Portal guide easily available that is designed for users who are not sure about how to navigate the product, because they will not be interacting on the product on a daily basis.
The survey questions were designed to avoid overwhelming the user, with a progress bar indicating their step-by-step progress. Example questions in the answer box gives users an idea on how they should answer the question for their brand.
A project dashboard allow users to get a full overview of the idea generating process while easily interacting with steps that are up next or already have done.
Idea Database shows a format where you can easily look through and learn all the insights of the week.
Help page for additional FAQ’s, access to the portal guide and other related info that the user wants to find out
The user could also chat to Winston instead, he is a chat bot that acts as another point of contact in the event the user has a question or unsure where to go.
It was by no means the final, but for what we have done over the course of 4 weeks. I would say I’m quite impressed with where we got to. After getting to the hi fidelity stage, we conducted a final presentation to showcase our research findings and how we applied them to create the new website and portal. Thanks to our consistent check-ins with the Crewasis team, they were well acquainted with our work and were thoroughly impressed by what we achieved within the limited timeframe. They even expressed their eagerness to implement our work in the real world as soon as possible.
Although our MVP did not fully automate Crewasis’ data science service as asked for in their brief, our research revealed that most users still prefer a human touch when it comes to interpreting insights and identifying business opportunities. As a result, we provided an alternative solution to streamline the data science process, allowing users to interact with a data scientist where it truly matters, without being burdened by the logistical aspects of insight discovery. Moreover, with the new rebranding efforts, Crewasis has transformed its identity to project approachability, thoughtfulness, and being a data-driven authority in assisting customers to interpret data and translate it into actionable business objectives.
Even though we have worked on so much of this MVP, there were still so many things that could be worked on and addressed. We split them up based on priority.
High priority next steps
- Sharing feedback, complaints through a ticketing system
- Sharing reports and questions for team discussions
- Balance Insight and Report information provided to customer for processing optimal information
Medium priority next steps
- Flexible Sprints for projects with varied complexities
- Adding Team mates into project for collaboration and sharing
- DS Chat via Insight Database
Low priority next steps
- Gamification of surveys, just to make things more fun during the tedious questionnaire
- Example Project for customers in order for them to have an idea what Crewasis can provide
- Mobile view for quick viewing and approvals
Clear communication/ Building trust
I highly valued the clear and effective communication we had with Crewasis throughout the project — it was truly appreciated. From the start, they maintained transparency and remained actively engaged, fostering open lines of communication with our team. By sharing a common vision, consistently exchanging ideas, and holding regular meetings with our client, we gained a solid understanding of the project’s direction. I would always take this experience as a model to refer to when i am working on another project.
Get into mindset of a Data Scientist
We also felt like we had to get into the mindset of a data scientist to understand how to serve the customers better as well as understand how the customer would prefer their portal to be like.
Iterate: there is no final solution
I think it would be good to mention something about the iterations made throughout this process till final High Fidelity. We did a lot of it, just looking back at the amount of screens made me feel surprised/ proud of what we had done. I think it was necessary but also showed the dedication the team had to the project which I am proud of.