We conducted a heuristic and site map analysis on the existing website as well as market research, competitive analysis and stakeholder interview to organize the information in a clear way for both the customers and the stakeholders.
I was part of a UX/UI designer team of three, responsible for contributing to the business analysis, Design Thinking Process, producing all major deliverables including a high-fidelity website prototype, and presenting these to the audience of teachers and students at Ironhack Bootcamp in April 2023.
After conducting secondary research on global backpack market and e-commerce market in France, we were able to find some significant figures illustrating the situation that our client was in:
- According to a recent report by Market Square Insights, the global backpack market size is expected to reach USD 30.4 billion by 2028, growing at a CAGR of 6.5% from 2021 to 2028.
- In 2022, 10K new e-commerce sites were launched in France, and the average amount spent for online transactions was 65€.
Which meant that while the global demand for backpacks is growing, the competition in the e-commerce world is getting fiercer especially for an e-shop that sold backpacks often amounting to more than 100€.
We conducted a 40-minute online interview with a major stakeholder of the e-shop, based on an interview guide prepared beforehand.
The interview allowed us to gather valuable insights regarding the identity of the business, target demographics, best-selling product(s), and most importantly, the key business challenge.
Mainly, there had been a misalignment between FLEKT’s business identity and its decisions:
Their target customers were young urban professionals (age 27–40) who moved around by bike, liked to travel, and could afford high quality back packs / accessories that weren’t available everywhere. However, the business’ positioning had been quite hybrid and ambiguous, resulting in them having many different clients that weren’t exactly their target.
This led us to the following business problem statement:
How might we emphasise the identity of a backpack and accessories e-shop to reach and retain quality-conscious customers?
Next, we created a sitemap of FLEKT’s website then conducted heuristic analysis on FLEKT as well as several competitors’ websites to identify design issues that could be improved.
Major issues that we identified from the sitemap and heuristic analysis mostly related to Usability Heuristics number 3, and 4. For example:
3. User Control & Freedom: There were some important product characteristics that were not included in the filter function such as color and availability
4. Consistency & Standards: Some large text boxes in header were not clickable when the rest in the header were clickable.
Based on the accumulated insights, we devised the solution pitch:
Then, we ideated on new website screens for a user purchase flow through screen-level, feature-focused sketches created via Crazy Eight’s then selected through dot-voting.
Medium fidelity prototypes are slightly more detailed than low-fidelity prototypes — which are low-cost and quick to build — still rough but closer to the solution.
– Interactive Design Foundation
We conducted usability testing to evaluate how potential users would interact with our website. 6 People — 4 female and 2 male — that fit our client’s target demographic were interviewed online while they interacted with our mid-fidelity prototype.
We were able to gather valuable insights from the usability testing on which to iterate on; for example, many users mentioned that they would like to see price, color, and brand first on product filters. They also mentioned that it’s important for them to see estimated shipping cost and delivery time on the cart before they move onto payment.
Before moving onto creating high-fidelity prototype, we created a mood board that would decide the look and feel of the website, including the color scheme and the fonts.
The mood board was based on the brand attributes such as:
- Sincerity : authentic, connected
- Excitement : active, hip
- Competence : trustworthy
- Sophistication : high-end
High-fidelity prototypes usually allow realistic (mouse-keyboard) user interactions. High-fidelity prototypes take you as close as possible to a true representation of the user interface. — Usability.gov
If we were to continue with the project, there would be two major features to reinforce based on stakeholder interview:
- Strengthen the community connection by adding sections such as lifestyle blogs, integrating social media, and enabling product reviews.
- Deepen the ‘universe’ immersion by adding a “make your own kit” feature. Instead of jumping from one page to another to build their own set of gear, the user will be able to select and compare from one page dedicated to each lifestyle ‘universe’.
- To someone with a marketing background, this project has been an interesting challenge to take the business goals and insights into account, instead of considering only user needs. Finding the right balance between the business and the user would surely be an important factor to consider for most of my future UX/UI projects.
- It had been a great learning experience designing the final high-fidelity prototype that incorporates our solution on a visual and interactive level. We were lucky to have had a graphic designer teammate who had a sharp, insightful eye to guide us.
Read the full article here
