Feasability 101
It’s week number two for the december Ironhack UX bootcamp and things started to be unexpectedly challenging.
Brief
The official challenge
We had to create or redesign a website to adapt e-commerce to covid-induced difficulties. With my teammates, Marie & Lucie, we decided to work on a yoga website founded by one of Lucie’s friends : it would be easier to get interviews from the stakeholder — and yoga online users or former users aren’t a rare thing after the first french lockdown.
From there, the plan was simple : business analysis and interviews on Monday ; analysis of the data and mapping of existing website content on Tuesday ; ideation and mid-fi prototyping on Wednesday ; usability tests and hi-fi prototyping on Thursday,; presentation on Friday.
The unofficial challenge
We made a Kanban on Trello to organize the first day, and it went really well, all tasks were done on time, without any rush. Then a teammate got sick and could only join from time to time Tuesday, then could simply not join on Thursday. How did we manage ?
- Tuesday was data analysis day, so the plan was simple : the affinity map groupings were decided on the basis of the interviews questions grid so our teammate could easily catch up. We were lucky to find very simple themes to possibly ideate on later, and the teammate got back on time to watch us finish the audit of the website. Mapping the content was postponed to Wednesday.
- Thursday was unlucky again : we realized we were gone to be only two working to wrap up the last steps. Unfortunately, the last steps were crucial : we had to test ideas, some of them being the absent teammate’s ideas, and then make decisions going possibly against this idea. We chose very simple ideas again, and could only try our best to hold on the deadline — this could simply not be manageable with a Trello.
Why were the tasks we already knew the hardest ones to work on with a teammate missing ? First, the business analysis, site audit, and prototypes tests are easy to divide. We do one of the analysis together, and once we are sure we are on the same page, we handle the others on our own. Second, they were tasks really close to our backgrounds — me in research, the last teammate standing in marketing.
That is not the case for prototyping, especially when there is a gap between our respective skills, knowledge, and equipment. I have a 16 inches screen with a brand new trackpad. I first draw on a computer at 12yo, and later had a three years curriculum in history of arts that trained my eye a lot to quickly catch mistakes and unbalances. I also like geometry and never forgot the principles of symmetry and alignments I learned in school.
I could work way quicker than my teammate by using these tools and habits. That also meant I could easily become annoying, pointing out pixel-imperfect alignments, or overriding the changes she had done. I tried to be careful about this.
A balance had to be kept, and the most important part of this equilibrium was accepting that we couldn’t come up with a beautiful thorough redesign and a flawless presentation on Friday. We did our best while being able to adapt to changes without sleepless nights, and that makes me proud of us.
Look what we did !!
Research
This, completed with the stakeholder interview, allowed us to see several things :
The website we were analyzing was by far the most complete, but had a serious search engine and content classification issue. The engine looks for keywords only in the videos titles, so “advanced yoga” search didn’t result in the engine displaying advanced yoga videos. Filtering the results canceled the keyword search and started from 0 again. See the red arrow on the site map ? It’s the access point to different but identically formatted, pre-filtered results the site can give you access to, and it’s an overflow from which the touchpoint is on the header — we didn’t invest time in filling all the sub-sub categories, because : you see the point already, this touchpoint has to go.
The stakeholder told us a few people unsubscribed when the first lockdown ended but the main part of the newcomers stayed. We couldn’t find users corresponding to that description though : they were online for free specialized content and didn’t consider coming back to it right now, since they hadn’t the time to enjoy a subscription anymore, even if they appreciated the flexibility or the fact that nobody could judge their skills on their screen. Or they were completely rejecting online yoga, as it didn’t respond to what they were looking for in yoga—connexion, personal feedback from teacher, competition… Conclusion : we were failing to find the typical user of the website.
The users we had that could be converted back into online yoga were advanced athletes who had a specific criteria. They wanted a clear view of the teacher’s level, they didn’t want to lose time and money on classes that would be identified too late as not challenging, they didn’t want to subscribe to anything, they wanted fusion. We blended them into a persona, Picky Yogi Patricia. This would be Picky Yogi Patricia’s journey in the website we were reviewing :
The problem
We are reviewing a website. Even if the stakeholder said she hadn’t any problem to solve, we found one when we reviewed the product and its target : it needs a way to engage Picky Yogi Patricia because now that covid is over, she has less time to practice on it and can return in face-to-face classes.
But on the opposite side, the user that isn’t interested in coming (back) to the website has her reasons : Picky Yogi Patricia needs a way to attend advanced yoga classes whenever she wants, because now that covid is over, she has no time to lose on inadequate classes.
In its current state, the website can’t respond to Patricia’s needs and engage her. We concentrated on one how might we — How might we create a way for Picky Yogi Patricia to have her criteria for level and time constraints taken into account ?— and then MOSCOWed the possible solutions. As time constraints were tough, we just used the opportunities we came up with while working on Picky Yogi Patricia’s journey. Aaaaaaand the must-have ones are… a search engine that displays its current status, a simpler navigation between contents, and a possibility to book one lesson only — we want Patricia to quickly test the product and not give up when seeing she has to subscribe. The MVP was basically a search engine, and the current userflow wasn’t fit : the user made mistakes and mistakes were paid by adding way too many steps to get to the end of the task.
(To be completely honest, the as-is sitemap was made after research but I thought that for the purpose of this presentation it was better to introduce it during the research process).
Solution
Here I am skipping some small parts of the process, like lo-fi wireframes, or the redesign of the video player, because I would like to go straight to the point.
The buttons originally displayed their own menu, and a filter was not listed as active — you just knew you had selected two, three, four of them with a small “+4” added to the filter label. Wireframing, we made a unique panel that had the same size as the original filter area, and displayed a list of selected filters below it. The panel closed when the mouse was away from it to mimic a live-update of the results and a roll up disappearance of the panel when the results were scrolled up. We got rid of the non functional overlay and search bar.
And of course it was too small, even if it was exactly the original size of text and components. The users testing this were expecting a keywords search. They didn’t like that the panel reduced when not hovered. They didn’t like the real-time refreshing of the results (quite frankly it wasn’t visible wireframing it this way). They had a hard time finding the “Niveau” (“Level”) area. It was a big fail (a predictable one, but again, time constraints, reduced staff, and remote setup didn’t allow us to properly ideate on this). And that is without speaking about the mistakes made on the video player page.
So, doing hi-fi, we enlarged the panel and font sizes, put the search bar back telling ourselves that in this fiction the stakeholder would have updated the database and rebuild the search engine-filter combination. We kept the original colors (my macbook uses truetone so it doesn’t show on these screencaps), except on the page’s title because it lacked contrast.
Several things are missing (location signal on the “cours” section in the header), and this could be improved : we originally planned to conduct card sorting to redo the IA, but the events didn’t allow us to do so ; expand the panel was one of my chosen ideas but I think it’s too visually stressful for a yoga website ; there isn’t a personalized sorting system. Etc. Etc.
In conclusion
I really wish we had more time and less stress to reflect on our choices. BUT I also think that in these conditions, we have done a good job. Even if it lacked audacity, sticking with very simple ideas since the beginning of the project was a smart move : the main quality of our project is that we cared about feasability, something that is crucial forthe health of team members on the short and long run.
