Designing a responsive online magazine bearing in mind users' time efficiency.
The Challenge
How might we create a responsive online magazine bearing in mind users' time efficiency?
Participants
Thomas Schnabel & Belen Moran
Role
User Researcher, User Writer, Strategist, Interaction Designer
Tools
Figma
Timeline
1 week (40 hours)
01. Empathize
The whole purpose of this design was to meet the needs of a very specific persona given to us by the client. The proposed challenge was to create a tailored product for this user.
Persona Development
- Reads Vogue, People, Cosmopolitan, Elle.
- Trend-seeker who uses publications as a source of inspiration for work.
- She reads whenever she has a free slot.
- Goals: be on top of the latest trends, look fashionable, get more tech-savvy.
Research
Our first step in the design process was to interview users with Candice´s profile. We performed 7 interviews and the most relevant insights that we got from them were:
- The importance of time management.
- Content display.
Many users claimed not having time for “chunks of text”. Some even mentioned how stressful it was not being able to find exactly what they wanted because of information overload.
Our users’ common denominators were the fact that they all worked, all had tight schedules, financial stability, and showed considerable interest in fashion.
02. Define
Before initiating the product´s design, we carried out a competitive audit. Our idea was to evaluate what is already in the market and how do the “big ones” do it.
During this phase, we also formulated our "How Might We" (HMW). This allowed us to reconfirm the idea of our product´s differential element: Time Management.
Our platform would stand out from the others because the information would be provided to users in “Snaps” (in a quick, sudden, and clear way).
Our Goals Using "Snaps"
1.
Give users access to already reviewed content.
2.
Allow users to get all relevant details and simultaneously, access information in a short period of time.
3.
Deliver a high-quality product that would grant users accessibility in terms of time and quality.
03. Ideate
During the ideation phase, we crafted the first site map of our website. We carried out a card sorting test and several interviews to define its sections.
In addition, we picked a coherent user flow with Candice’s (our persona) profile. We developed a hypothetical statement on how her behavior might be while interacting with the product.
Style Guide
Part of our challenge was to create the branding of the product. To start this process, we came up with the name “Catwalk” and moved on to specifically defining the product.
Catwalk would be a sassy and classy lifestyle magazine, focused on educating, motivating, curating, and creating content for empowered women.
Mobile MID-FI's
Mobile HI-FI's
04. Prototype
Desktop Prototype
Next Steps
As for the next steps, this project is currently being revamped! With the collaboration of Pedro Vilela, we are improving the designs’ aesthetics. When designing Catwalk, having just one week to deliver the product gave us little time to focus on the aesthetics and UI section of the process. Reason of which, now we would like to go over the product in a calmer and more thoughtful way.
Learnings
Even though we had some initial discrepancies, we managed to negotiate an agreed solution. Communication between the team was fluid and transparent. We shared the same vision, organized our time thoroughly before tackling the whole process, and stuck to our agenda through it all. It was a great learning experience since neither of us was a Figma expert. We both found ourselves investigating features and trying to learn some new techniques to make our design stand out. Every problem we encountered in terms of UI was tackled as a team. The key takeaway of this project is the optimization of the input of the team members through a constructive negotiation resulting in a synergic process towards the optimal solution.
