Challenge (college assignment): I was tasked to re-design a website page, using two design approaches, with three break points for each.
I opted to re-design the home page of ABC Flower Shop, a hypothetical multi-occasion, neighbourhood flower stop that caters to consumers in its suburban neighbourhood and the wide delivery area around it. The store offers corsages to elaborate arrangements for all occasions and has won awards for meeting many a wedding’s end-to-end floral needs.
Implementing a Solution:
It starts with the site’s audience, which ranges from young professionals to seniors, many of them long-term community residents. There is also an influx of newcomers to the neighbourhood, who ABC Flower Shop wants to win over. This diverse audience uses the website to find and purchase flowers from the store or online, often via a mobile device. They buy all flower types/styles for varied occasions, particularly weddings, which comprise 20% of its business.
I re-designed this site to:
- Retain current customer base and capture more business from them through a convenient, responsive design coupled with an ecommerce capacity that encourages customers to order from anywhere, anytime.
- Grow customer share, particularly by attracting newcomers to the neighbourhood, as well as those outside it.
- Build and foster online brand advocates to further promote its services.
I used OmniGraffle to develop wireframes for each approach.
Design Approach 1 – To Attract New Customers
I developed this approach to attract new ABC Flowers’ customers from recently built condos, while retaining the current customers. To help new customers, I included a full index search, plus options to search for arrangements by occasion, price range or type. I added a prominent link to delivery details and a map. I put a wedding ideas blog, award-winning arrangements and best sellers in the lower, less prominent part of the screen, to entice curious current and future customers.
Design Approach 2 – To Build Online Customers and Brand Advocates
I focused this approach on current customers and designed it to grow the store’s online business. I also drafted it to foster brand advocates through social channels. While it has features for new customers, I gave these items lower priority and a less prominent place.
Since these concepts were developed using a ‘mobile first’ approach, the mobile wireframes have the most detail.
More detail about how these approaches support the UX and wireframes for other breakpoints are in the full report (view or download PDF).
Results: This strategy and wireframes received a grade of 88% for a UX course assignment.