Case study: Website for an e-commerce store
Project Brief
Project Goal: Designing a website for a local store
Project Duration: 2 weeks
Tools: Figma, Zoom, Slack, Maze, Google Drive
Team members: Sufana Hammad, Rafal Basaqer, NORAH ALSAEDI, shaima A
About
This project is a part of the Misk Foundation’s UX Design immersive program, and the main aim of it is to practice UX Design concepts.
UX Design Process:
Phase 1: Discover
SoMé is a high-end Saudi brand that offers jewelry and clothing for women. Most of the brand’s business operates on Instagram and has occasional pop-up stores.
After conducting desk research, we looked into our competitors’ businesses, specifically looking for high-end Arab designers.
First, we created the market positioning landscape to see where our selected brand lies.
Then we moved on to the C&C feature comparison, where we learned a little bit about which features are most in demand among the competitors and used that information to compile a list of dos and don'ts in terms of features.
For the user research, the first thing we did was conduct a screening survey to find users to interview and get general information about users' behavior toward online shopping.
Gladly, the survey helped us find users, and we started interviewing them. We interviewed a total of 10 users and then used their answers to create our affinity map.
Phase 2: Define
The affinity helped in finding many insights, we took those insights and the insights from the business research and ended up with these main insights
The insights helped in developing our persona and problem statement.
Problem Statement: A busy female adult interested in high-end fashion needs to shop easily and conveniently online with smooth delivery and return service in order to stay trendy and fashionable while keeping up with her diligent schedule.
Phase 3: Design
After having a defined persona, the ideas started flowing, and we started building our solution.
We started prioritizing the features based on the findings that we got so far and made this roadmap
then we made a user flow to know how the user behavior within the website will be like
then we started working on the wireframes
and the sitemap
We used the mid-fi wireframes for usability testing, and while waiting for the responses, we refined the wireframes and designed them more.
First, we created the color scheme that we’ll use across the design.
after that, we then finalized the screens, and here’s how they ended up like
Phase 4: Deliver
After creating the screens, we added some images to the mid-fi wireframes and conducted user testing using Maze platform. 6 people participated in the usability testing, and we gathered their feedback.
prototype:
Iterations
Most testers commented on the fonts, saying that it was not clear and there was confusion in the naming of the section “dresses” so we changed it to “capes”.
What’s next
We have a couple of things we would like to do next in this project which are:
- Iterative Refinement: Iterate on the design based on the findings from the second round of user testing. Refine the prototype, making further adjustments as needed.
- Finalize Design: Once the design changes have been validated through user testing and stakeholder feedback, finalize the design. Ensure that all components, layouts, and interactions are consistent and aligned with the overall vision and objectives of the project.
- Further development and Launching: Discuss and collaborate with stakeholders for further development and launching.
Reflections 💫
Working on this project wasn’t the easiest, but it was really interesting and I gained a lot from it. It helped me know how to manage my time better and collaborate in teamwork.
Thanks 🤍
Thank you for taking the time and sticking up till the end of this case study.
