Research, Ideation,
Visuals, Prototyping
Responsive Website
Figma
To minimize the pity feeling of reading stories of new comers, I decided to use an abstracted entrypoint into the story to represent these talented and inspiring women by using handbags.
Indeed, most women own a bag regardless of her background. Each bag on the website is linked to a woman and therefore to her story.
The story page has been designed in way to facilitate the reading of these long but inspiring stories by grouping the intereviewee’s life events in blocks of text and photos.
I have interviewed journalists, new comers in Berlin and Redi-School as a website provider to better understand their needs.
To summarize
- Journalists want stories with clear credentials and reliable sources to share different point of view regarding the newcomers. Journalists also want to see an good selection of stories and a way to contact the interviewee directly.
- Newcomers care about their privacy when sharing their stories. Also, they don’t always speak German, therefore the website needs to have several other languages to offer.
- The website provider (Redi-School) would like to give to these talented women interviewed, a platform where their story get the attention it deserves. But also to attract potential new students and teachers to join the school and create their own success story.
I used the value proposition canvas to understand what are my users pains, jobs, gains and matching those with potential gain creators, pain relievers, product and services.
Among the potential users I have identifed the following groups:
- New comers In Berlin | Interviewee | Potential Students: interested in reading stories from like-minded profiles.
- NGOs/Journalist: Looking for interesting content to share.
- Redi-School: Looking to attract more students or volunteers.
I have decided to create a style tile based on the insights gathered from the user interviews. All starting with a list of keywords translated into the potential look and feel of the website.
Depending on the user type, I have identified the following user flows.
Goal:
Read stories of different people, a starting point to assess the quality of the content and if it's worth reaching out
and contacting either the organization or the individuals for further content.
Goal:
Reading inspiring stories of like minded women who define themselves as newcomers.
After reading several stories they might be interested in submitting their own story, contact the interviewee to grow their network and/or contact the organization to get more information such as course enrollments.
Goal:
- Potential teachers would be interested at first to learn more about the organization and then read stories of newcomers (current students at Redi-School or not) and understand how organizations like Redi-School can impact people’s lives positively. They would then contact the organization to find out how they can become teachers and help further the integration of these female newcomers.
- Current teachers and Redi-School would be able to recommend the school with more ease to potential teachers showing the success stories of newcomers with some help from organizations like them.
After wireframing the responsive website I turned it into a high fidelity prototype for a usability testing session.
1
Some users couldn’t find a way to go back to the story listing after scrolling the long story page
Action:
I have added at the bottom of the story page a way to navigate to the next and previous story and implemented a sticky navigation.
2
The filter option wasn’t used as a way to find a story to read. They mainly went straight to the navigation or to the bags.
Action:
It really depends on the user attention. Some with a specific profile in mind is more likely to be using it. I have decided to keep it while conducting further analysis with journalists.
3
Users had difficulties to understand the usage of bags when expecting to visit a story telling website.
Action:
I have changed the information architecture in the homepage. Adding a little note about the bags and putting it closer to the bags. I have also changed the h1 to a message helping the understanding of the concept. For your information the h1 was: “Welcome to NCB’s Website” which I changed for “Each bag tells a story”.
.png)
4
The option to read the full story page was barely used.
Action:
One insight gathered from the interviews was that newcomers wouldn’t read long stories. Which explains the reason why I have decided to cut the story in few chunks of text and image to ease the reading process.
Nevertheless, I decided to give the option to others such as journalists to get the plain interview transcript, important to them.
From this test with newcomers I managed to understand that users couldn’t actually see the link, therefore I have changed the design.
Taking into account the results from the usability test I came up with the solution below.
- Contact the interviewee page: On this website I am not sharing the direct contact details of the interviewee on purpose. Indeed, the research phase highlighted the fact that the interviewees care about their privacy. Therefore the website provider acts like an intermediary when a visitor wants to get in contact with the interviewee. The Interviewee will get a notification in her inbox and decide to get back to the person or not.
- Contact the website page: This page is essentially to contact Redi-school directly, which is important for journalists to assess how trustworthy are the stories or talk about further opportunities.
- Submit your story page: On this page newcomers visitors can share their story too. There is a form to fill out that will help redi-school to assess if the applicant’s story matches with the website’s purpose.
- The read full-story page is accessible from the classical story page. The content there is the authentic interview transcript. I have decided to provide this option to journalists for their need of authenticity.
- The filter feature, this is here to facilitate the finding of stories, users need to connect with somebody speaking a specific language and interested in a specific fields (eg: UX/UI Design).
Key-Takeaways
- Running usability tests earlier in the process: It helps to gather different insights that can be very interesting to have early and above we have much more flexibility and ease in changing a paper wireframing than a high-fidelity one.
- Prioritization of the website features while keeping the personas in mind: I was tempted to add several other features to the website, but going back to the personas throughout the process was helping me to stay focus to offer a solution to my users’ pains.
Next Steps
- Optimization of the filter options
- Designing the tablet version
- Adding more animations to the prototype to guide better the developer towards the final ideal outcome
- Run a usability test with journalists and potential teachers
If you like what you see and want to work together, get in touch!
bambydotco@gmail.com