Date
April 04, 2016
Role
Lead Entire Design Process: Research, Ideate, Create Solution
Project Deliverables
Responsive Website, Information Architecture, Wireframes, High Level Prototypes,
Keynote
Project Overview
Progress Hardware is a local hardware store based in San Francisco with a focus on customer service and expertise. Ever since customers started purchasing more on bigger outlets such as Home Depot, Lowe's and even Amazon they've decided to create an online store that will allow them to sell more items and stay relevant in the digital age. However the challenge is to stay true to the local culture and community values.
PROBLEM
Progress Hardware wants to go online and meet the needs of the digital age consumer however they also don't want to lose the physical connection with their customers. The brief requires a clear value proposition from online to offline.
SOLUTION
Design a responsive web site that provides the convenience of online shopping, even when on a mobile device, while maintaining a traditional customer service approach and community engagement.
DESIGN PROCESS
PERSONAS
Progress Hardware describes customers as three distinct personas. These personas helped me better understand the characteristics of a typical customer and where I should focus my efforts when designing a solution.
Lisa here is one of the personas with a clear goal; she's a DIY person who wants to have all materials in place and ready to go for staining her bookcase on the weekend. So, she needs the site to be easily accessible with quick to find products, descriptions, product availability, and a more affordable option for delivery.
COMMON GOALS
All three personas have different needs but also share common goals;
- Find products easily
- Clear description of products (with images)
- Easy checkout process
- Delivery options
- Customer support and loyalty
In order to find the right hierarchy we used the card sorting method with several users.
USER GOALS
Further elaborating on users goals we started building our thoughts and started drawing our solution on wireframes.
User Flows
To improve ease of use on the new site I created a flow for each user clearly showing how they will achieve a given task. The user flow below shows Lisa, a returning customer's easy check-out process for an item she selects from her favorite items list.
WIREFRAMES
NEXT STEPS
The next steps for Progress Hardware include collecting feedback from usability and beta testing, making necessary corrections based on new findings and the designing the visual user interface with user and business goals in mind.
Additional steps include:
Development of the web site, usability testing and fixes.
A content management system will be selected to efficiently manage the content of the website.
In terms of improving the customer experience we also recommend the addition of the community portal to increase engagement both online and offline. A social media campaign might be effective to support this initiative.
