Starting our second project, new groups were arranged. The challenge was to design a responsive website for
a local business or professional.
In this project we were introduced to the Stakeholder’s Interview. We were asked to find an e-commerce business
interested in collaborating with us in this interview, and given tools to analyse the market around it.
Our chosen e-commerce was Amagi Boutique, a clothing e-commerce website that provides clothes for people who
want to actively fight for freedom, in various ways: freedom of speech, freedom to wear what you want, etc.
Their clothing is handcrafted, and some of the clothes have slogans in defense of freedom on them.
Original Amagi's Website
Starting with the Empathize part of the Design Thinking process, we started conducting a Competitive Analysis Analysis of businesses around this niche. We analysed some big brands’ websites, like ASOS or COS, and then some One-brand websites, more concerned and centered in certain topics, such as Patagonia, Nike or Vinted.
Competitive Features and Brand Comparison Analyses
After this part, we conducted the Stakeholder’s interview. Bjorna (the owner) is a super nice person who introduced
ourselves to her business very thoroughly. She had a clear idea of the values she wanted to transmit in her website.
Bjorna is a very strong believer of freedom in all its forms. We could extract a lot of useful information from it,
about her goals and vision. With this we had a clearer idea of what our website should focus on.
After this first interview, we conducted 5 User interviews to know about their experience using this kind of e-commerce
or just their overall experience shopping online. We extracted a lot of useful information about how people usually shops
online, what makes a good e-commerce in their opinion, and if they find important to check the brand values beforehand.
Some answers from the interviewees
With all these Stakeholder and User insights, our team started the Define part of the process. It was great to see that with the experience acquired in the previous project, we went through this part a lot more efficiently. We quickly grouped the insights in the Affinity Diagram.
Affinity Diagram dot-voted topics
The next step was to identify the traits of our User, using the insights from our Affinity Diagram, and translate the result in an Empathy Map.
From there, we had very clear the demographics and key points of our User Persona. Please met our Mindful Mia:
With Mia clearly defined we could easily see and build her Journey Map:
From all the insights we got previously in this stage, we were able to come up with a Problem Statement:
“Millennial Online Shoppers need to find a way to buy from brands that meet their values because they want to make more informed decisions about what they are buying in an easier way.”
Using the Lean UX methodology, the next step was to discover the Features Using the MOSCOW Method, we worked on the features that this website might or not need:
And then defined an MVP (Minimum Viable Product):
“Our goal is to create a site that makes the brand values readily available to users, enabling them to make more informed decisions about their product purchases in an easy and enjoyable way.”
In a parallel way, we studied the current Sitemap for Amagi Boutique, and added the new pages that came from our Design Thinking process, our secondary research, and our stakeholder’s interview.
Site Map
From there we defined our User Flow for our Happy Path, stating clearly how Mia should first check for the Values of the webpage to see if they fits her needs, for later search for a product she likes, ad it to the cart, and finalize their purchase successfully.
User Flow
After that we moved to Prototyping. First we conducted a Crazy 8s exercise, specially to see what ideas we had for the project and prioritize features for the MVP.
Our Crazy 8s
Final Low-fi Prototype
With all the information we got from the Concept Testing we built our Mid-Fi prototype. In order to test the usability of it, we conducted 5 Usability Tests on it. First of all with Otti, our bootcamp colleague who we interviewed in the Empathize stage of the process. She gave us a lot of insights that made us improve our prototype. After that we conducted two more tests with Stuart and Nuria, who gave us more insights about the website structure and overall feeling. Finally we conducted two more tests with Alex and Yusleivy, completing our Usability tests and applying the insights we thought more useful, iterating our Mid-Fi prototype.
Mid-fi Iterations
At this point, we had to start thinking about the Hi-fi prototype, where style, color and typography would be added to our design. For this we had three exercises to conduct. First of all we conducted a Visual Competitive Analysis where we analysed the features and overall feeling of our direct competitors. We gathered our insights on this in the same file and then searched the resemblances with our website.
Visual Competitive Analysis
After this we figured out our Brand Attributes, and came up with these five that we think are the pinnacle of our project: High-end, Artistic, Progressive, Rebellious, Free.
Finally each of us had to express in their own ability and opinion what these Attributes meant for them in a Moodboard. Using Images, Quotes and in the end anything that helped to express our own vision was
to be placed in a board forming a cluster of sensations which expressed our feelings about this website.
Of course this is very subjective and personal, and the group came up with very different Moodboards. Each of us explained the “why” behind their choices and we finally voted on the most relevant to ours.
We ensembled a common Moodboard with the most voted and tested it with the entire class. It was a funny game. The Teacher Assistants placed all Moodboards in a collaborative file, with the Brand attributes
hidden. Other groups had to guess them in different sticky notes below during 2 minutes, and then the original Brand attributes were revealed. This way we knew if our Moodboard transmitted the same vibrations
and ideas that we had in mind.
Moodboard
The next step was to define the Style Tile for our website. We analysed our Moodboard and extracted from there a palette of colors for each of us. We explained our color decisions and voted for the final palette. Then moved on to the typography and other elements, this way defining our entire Style Tile.
Initial Style Tile
From there, we had all the tools ready to transform our Mid-fi to a Hi-fi consistently. All group members took part in applying the style and refining our Mid-Fi to transform it to Hi-fi.
When we finished our first Hi-Fi Iteration we performed Desirability Tests on our prototype. We asked our testers to describe the feelings our webpage transmitted them. The idea we wanted to convey,
that our webpage was an e-commerce but strongly attached to its values was not entirely achieved, as some of the testees pointed that this rebellion and energy that our page needed to stress more this rebellion and energy that our page needed,
and the choice of colours and tipography somehow blurred our message. From those insights we iterated our Style Tile and later Hi-fi prototype and conducted more tests. We kept on testing and iterating until we felt our prototype was ready.
New Style Tile
Apart from this change, we also changed the images of the fictitious products, to adapt them a little more to the theme and style of the page, aligned with its values of rebellion and freedom.
Phone Home page screen
For the Tablet design we decided to keep the navigation buttons on the right, since they fit well as icons, so in this case the Hamburger menu would only contain the three buttons on the right of the navigation bar.
Tablet Home page screen
Below you can find the final result of the Hi-Fi prototype:
In the future we will have to take into consideration the Stakeholder insights as well as the User insights.
From what we learned, iteration is really important. So we want to keep conducting tests to refine even more our product and and finish our prototype to make it fully functional in all the paths possible.
This was my second project in the Bootcamp. It was hard, but rewarding in the end. Without my incredible teammates Sara, Elleta and Claudia this project it would not have been possible. I am extremely grateful for the experience and knowledge that we shared together and I look forward to continue working with them. Again, there is a lot of room to improve in this project, but it showed me the whole design process, from the
Briefing to the Hi-Fi Prototype.
Thank you for your time.
