ui_ivor
Edge - An e-comerce website case study
Role : UI/UX Designer
Project Type : Mobile First Website Design
Duration : 14 weeks
Overview
This is an e commerce clothing brand shopping website that allows user to complete an order without engaging in conversation on how to complete a purchase. The brand started off as a small business where users were able to complete their purchase in dm either on Instagram or WhatsApp. Over time the sales grew and there was a need to look out for an alternative to how to successfully complete an order because without a conversation been in the middle of the business transactions
The problem and back story
Mr Edge was getting more orders than he could attend to and he is not able to respond to everyone as there is a need to focus on other things. Users are not happy about the time it's taking to complete their order because they need to wait for a response in the dm on how to get the product.
Solution
Create a platform that allow users to complete a shopping order, selecting multiple items to add to cart, check out and complete an order within a very short time.
My Role
Conducting a user research to understand the behaviors, goals and need of the user
Creating a user journey that meets the user goals and need and also aligns with the objective of the company.
Creating wireframes, mid and high fidelity prototypes.
Testing the prototypes with user and ensuring we have a user centred design
Presenting to stakeholder and handing off to developer
The design process thinking
1 Discovery stage
Research -Interviews
To learn about the user, I created an open end survey form using google docs to enable me get an insight into how they feel about the product. This was done by sending it to users at the end of a successful purchase and we did this for the next 5 purchase. Another 5 users who have not completed their purchase in the dm were also sent the the form to complete to enable me understand why they did not complete their purchase and lastly 5 more previous users of the product to get an insight into how they feel about the product and the process.
open-ended survey question
-
Can you describe your experience purchasing products from EDGE on social media platforms?
-
What do you like or dislike about the current purchasing process on social media platforms?
-
What challenges have you faced when trying to complete a purchase with EDGE on social media platforms?
-
How would you describe your ideal shopping experience when purchasing products from EDGE?
-
What do you think is important in a website design for an e-commerce brand like EDGE?
-
What features do you think would make the shopping experience more convenient and user-friendly?
-
What suggestions do you have for improving the overall purchasing process for EDGE products?
Key findings after user feedback
-
They find the quality of the product good enough to engage in a chat with EDGE in other to complete their purchase.
-
Find other less stressful means of making their purchase without having to wait for feedback about how much, how to pay, where to pay, and how to get their product after payment.
-
Few enjoyed the communication as it builds some level of trust between them, love a chat option however want to complete their purchases faster regardless.
Quantitative Research - Market Analysis
Further research into the market made me look into other competitors to understand the scope of the market, how they operated and what they do differently from edge. To get the best result and see things from the user point of view, I made some purchases to enable me understand in real time their functionality. I picked a 5 of them which included ( without the box, Jago of Lagos, Raven, Nack apparel, habit) and I conducted quantitative analysis to better understand the market and the best approach I can use to create an outstanding product.
2 Define stage
After I have completed the survey and research, collected the data and higlighted the key findings, I was able to Identify the user pain point below.
Pain Points
-
User are not happy with the buying process as having to wait till edge is online for users to engage.
-
User are unable to easily tell the price of each product.
-
Scrolling to the page to find a product is annoying and time consuming
-
Quite hard to trust a brand that does not have a platform to showcase it's products
-
Trust issues when it choosing product as it's lacks a professional end to end touch
-
Need for a less time-consuming process to complete a purchase as is time consuming and discouraging for a new user.
User persona
By creating personas of the potential users and mapping out their thoughts, feelings, actions and words, I was able to gain a deeper insight into their experiences with the current EDGE shopping process on Instagram. This allowed me identify specific areas where the process could be improved and tailor our solutions to meet the users' goals and needs.
Empathy Mapping
An empathy map was created thereafter prioritizing the users' needs and ensure that our solutions were centered around their experience. I was able to develop a comprehensive and holistic understanding of the users' needs, which was critical in creating an effective user experience for EDGE.
3 Ideate
User Journey Map
Based on the research, a user journey map was created to visualize the steps a user takes when making a purchase on the EDGE website. This map helped the team identify areas where the user experience could be improved, such as reducing the number of clicks required to complete a purchase and improving the clarity of information presented to the user.
User Flow
Using the user journey map as a guide, a user flow was created to outline the steps a user takes from landing on the website to completing a purchase. The user flow focused on making the process as simple and efficient as possible, while also incorporating the key elements of the EDGE brand, such as luxury and quality.
Information Architecture
With the user flow in place, the next step was to create an information architecture for the website. This involved breaking down the pages of the website into sections and sub-sections, and organizing the content in a way that made sense for the user and aligned with the EDGE brand.
Wireframes - initial paper sketches
before creating the paper wire frames. I considered the mobile first approach while adapting it to a larger screen later as majority of the user makes use of a smartphone so their mobile experience was a priority and this help me tailor out my sketches as it enables us be an organized structure of the interface before creating our digital wireframe.
Wireframes - digital
I then moved to the low fidelity digital wireframes that matched with what we had on paper. Presented it to the client as it represent the foundation of the user interface.
4 Prototyping
Design stage
The visual design process was seamlessly easy as I had the mobile first approach in check so I knew what we needed to do. His brand logo was black and white which the black radiated authority and power while the white showcases purity and brightness. I created a style around this and added a touch of grey to come up with the palette below as he wanted a black and white theme as well. For the typeface, I pick a serif font which easy to read and understand. Picked the icons and I created a style guide after getting my colors, icon and typography in place. See style guide below
Design stage
The final hi-fidelity design page, below is the slideshow of each page in order they have been designed as well as the dark mode design as well. our aim was to create a design system which is easy to read and navigate in any of the modes.
The Adobe XD Prototype
To view the Adobe xd prototype, Click here to view in full screen in a new window.
5 Testing
Formative Usability Testing
I conducted a task analysis test by having 5 users complete a purchase using the prototype as I observe how they navigate the website to enable me identify areas where they struggle or encounter confusion. I also asked them to verbalize their thoughts as they navigate the website so as to enable me identify areas where they are confused or encountering difficulty, as well as areas where they find the website intuitive and easy to use.
Implementation and success
After finalizing the design, the next step was to hand off design files to the developer, including style guide, user journey map, and hi fidelity designs. Regular communication was maintained to ensure that the project was progressing according to plan. The developer began coding the project and modifications were made when required.
After completing the coding, the developer provided instructions on how to deploy the website. It was tested and necessary modifications was made before launching the website. Post performance was evaluated the website's performance for conversion rate which optimized edge's revenue by 10% in the first month. The successful handoff and implementation of the project led to a functional website that met the desired specifications.
To view website in real time, Click here.
Conclusions & lesson learned
Challenges faced in delivering this project was the time constrain as Mr Edge wanted everything done so fast and the website launched.
Secondly, The project had so many competitors who are start ups and offering same solution, making it important to differentiate the solution and offer unique value to the target audience.
Thirdly it was a little challenging convincing Mr edge the need to consider a mobile first website approach to the solution other than have them download an application before completing a shopping since we are trying to reduce time on task and increase the conversion rate.
Also if i had an opportunity to do the project again, I will put a lot of things in place especially the importance of auto layout and also using a breakpoint so I do not have to present the desktop mobile and tablet in different screen and file for a proper handoff to developer.
My Learnings
-
I understood the importance of conducting a competitive analysis, creating personas and empathy maps as it enables me see from the user point and also from the business point of view which is what was needed to create a website that solves the business objective and meets the user's need and goal
-
The Importance of user experience was also validated as improving the user experience is a critical aspect of the project. From the slow and confusing process of ordering through direct messages on Instagram to the importance of a fast and efficient website, the user experience is key to the success of the project.
-
Importance of project planning and goal setting was also put in use during the project as by setting specific, measurable goals and defining key performance indicators which is critical to measuring the success of the project. I was able to track progress, identify areas for improvement, and adjust the strategy accordingly to ensure the project meets its objectives.