Case Study: Wave
This is project is a collaboration between Jaione C & Alessio Sacconi.
Starting from a given User Persona our goal was to define the Information Architecture of an online editorial, wireframing and ideating the web application and designing the UI.
Who is our persona?
Elaine (35) — The Eco-Friendly Researcher
- She reads National Geographic, The New Yorker, Broadly.
- She wants to invest more in self-care and self-love while being good to others, seeding a more empathic society.
- She reads during work breaks. She often works at home, when she’s not at university or the library.
- Goals: be more rational, Discover new passions, achieve a good work-life balance.
Visual Competitive Analysis (VCA)
Based on Elaine’s suggested profile was easy to direct ourselves on the potential competitors.
National Geographic, The New Yorker, Broadly (gender-topic focused branch of VICE), three diverse and well-known institutions.
Comparing them and analyse them had allowed us to identify similarities, differences, pain points and strengths so that we could provide an alternative that aligns with Elaine’s interests.
After analysing the visual styles, attitude and tone we conveyed all our insights in a tab with defining key attributes in order to have a more clear idea of what Elaine would value for her editorial experience.
What do we want to communicate?
Keeping in mind the previous insights, we started defining the essential traits that would characterise our platform.
The key information for our decision making is that as a remote worker she mainly reads during work breaks, so although we want to create an engaging editorial experience with an interesting range of topics to her profile, we also want to make it quite light to contrast the other platforms and type of media she follows.
We opted for WAVE as the name of the editorial.
Actual, but the broad term, can be basically applied to every movement, topic, a niche that we’re interested in at the moment.
WAVE — Attributes:
- Progressive
- Honest
- Informal
- Empathic
- Conscious
Based on these we generated 3 mood boards and conducted a survey where we can analyse these attributes and define the styles we want to develop. Overall we received 16 responses, due to time limitations we will proceed with these responses but ideally, we would like to receive more responses.
Blocker
These mood boards are not very precise in content and could be improved with a more accurate choice of elements.
Nonetheless, they helped us greatly in directing our focus to a certain visual direction.
Attributes Affinity
To find out which kind of message our mood boards are sending to the users, we divided the survey into two parts:
- in the first part, we provided 11 attributes to choose from for each mood board, the 5 WAVE attributes plus 6 dummies,
- in the second one, instead, we provided the WAVE attributes and asked which mood board was matching the best.
After reviewing the inputs received,
we decided to combine Mood boards 1 and 2.
Style Tiles
Taking the visual design part forward we start working on possible variations as style-tiles.
This is a crucial stage between the conception and the actual UI design, as it allows us to define the specific visive focus of our editorial.
After discussing the 3 options, we combined the most suitable & relevant elements together.
Here below, you can see different branding elements such as logo, icons, headers, body text, buttons, illustration style, colour palette and photographic style.
Information Architecture & User Flow
Categories & Sitemap
For this section, we started listing a series of categories that Elaine would have like to find in the appositely designed editorial.
After that, we ran an open card sorting session with 5 participants using the useful card sorting tool Optimal Workshop.
The interviewee associated these sub-categories cards into the main categories that they personally specified.
As a result of this session, we proceeded with assembling our Sitemap — we wanted to create a constant connection between the categories, in order to facilitate the navigation through the site contents.
User-Flow
For the short time of this design sprint, we preferred to focus on a simple but fundamental task – allowing us to focus on the navigation and the main layout of the platform.
Mid-Fi Wireframes
As we developed the information architecture and sketched our Lo-Fi Wireframe, we started assembling our Mid-Fi as well.
During the testing, we noticed that our users were very fast and intuitive in the navigation process and more inclined into tapping on images and text rather than responding to Call-to-actions (CTA) or buttons.
Atomic Design & Hi-Fi Prototype
To build our website inventory, keeping the style-tile as a reference, we proceeded through the Atomic Design process.
Starting from the small, basic components (Atoms) to reach composite systems (Organisms & Molecules).
Curious to do this again with the new Interactive feature in Figma!
And, no excuses to be messy here!
Hi-Fi Prototype
After designing the required screens for our User-Flow, we proceed in building our Hi-Fi Interactive Prototype in Figma.
You can check the file directly:
And also, check this short video showing WAVE in action!
Key Learnings & Next Steps
For the 5 days Design Sprint started on Monday, we managed to deliver the results we were expecting and we are happy about it!
Looking at the future, we are definitely coming back together to develop and improve the platform.
Would be nice to see it published/featured somewhere too, but for sure will be part of Jaione and my portfolio.
Hopefully, this case study has been interesting and made you think and learn new things as it has for us.
To summarise:
Key Learnings
- The importance of having a solid site map and a well-researched information architecture.
- To focus not only on the visual but also on the technical, integrative and functional side of the platform.
- The importance of a Mood board development process (subjectivity).
- The aesthetics conflicts when two graphic designers are working together on a UX/UI design project. (IT WAS FUN!)
Next steps
- Hi-Fi Mobile version and additional testing.
- Adjusting and diversifying page layouts.
- Responsive design across devices (taking into consideration multiple breaking points).
- Improving the navigation and adding customisable and back-end features.
That’s it, so far!
Hope you enjoyed this!
Ah! And be sure to check also Jaione’s article:
Ciao!
