Responsive Web Design

TDLR

Duration: 1 Month

Client: Local Jewelry & Metal maker Maggie Agnew

Role: UX/UI

What’s the problem?

Maggie Agnew’s current website isn’t responsive, and is missing a few things features to her business.

Why was it necessary for the problem to be solved?

Maggie has no storefront, and so online presence is extremely important. She also makes a lot of commissioned work but there’s no information or way to request a commission on her current site.

How was the problem approached?

Design thinking process of empathize, define, ideate, prototype, test, iterate.

What was the final deliverable?

A new fully responsive website with a commission form page and a stronger clearer brand.

Out with the old.

Maggie Agnew’s previous website had some glitchy margin issues, and was not responsive to different display sizes.

Additionally, Maggie does commissioned pieces but there was currently no page on her website to submit a commission, or even alert shoppers that was an option.

Conducting Research

I interviewed people of all ages, varying incomes and occupations, about their shopping preferences, about thoughts on small business vs big business, where each prevails and why.

Interview Insights

People shop on all devices equally So a responsive website is crucial. If someone has to wait to get home and try again on their desktop, they probably just wont.

Small business are hard to find from a simple google search. Getting people to your smaller site can be done via social media presence, at craft fairs or pop-ups. In any case, when get someone onto your site, it is imperative you telegraph professionalism. A website that looks like it was made in 2016 does not instill conrfidence or impress a person to hit buy!

How Might We

  1. Allow customers to request a one-of-a-kind commissioned piece?

  2. Ensure a customer knows exactly what they purchasing online?

  3. Make both mobile and laptop shoppers able to use the site with ease?

Design

Because I knew Maggie would be using Squarespace to host her website, I started by looking at their templates and designing wireframes from there.

I wanted Maggie to be able to edit her site without me.

  • Main shopping page

  • Product Page

  • Shopping Cart

  • Checkout Form- Email

  • Checkout Form- Email

  • Checkout Form- Payment

  • Checkout Form-Check info

  • Thank you for your purchase

My Favorite Part

My favorite part about this process was talking to a business owner about her needs and goals. I really admire the work of this artist, and wanted to help her shine brighter, but I also didn’t want to overstep. It was great to understand business goals because I had a very clear image of what needed to be done, and how quickly. One thing that was very clear to both of us after talking about interviews and also her business at present, is that social media plays a huge role. And while revamping the business’ social media content was out of scope, I did make a component library of color paletes, font types, and logos of varying color combos, so that the business has the ability to make social media cotent cohesive with her website, building a stronger, more recognizeable brand.

  • Homepage

  • About the artist and the business

  • Dropdown navigation

  • Shop for necklaces, rings, bracelets, earrings, or all of the above

  • Product Page

  • Additional photos available for each product

  • Contact page

Testing

What tasks were tested?

  1. Locate commission page on mobile and submit form

  2. Locate shop page on mobile site and add item to cart

  3. Complete checkout process on desktop site. 

What were the test results?

All five users were able to complete all three tasks without very little to no difficulty and described the level of ease for all three tasks as a 9-10 (easiest being 10 and hard being 1) .

I tested primarily on mobile as my research suggested that, while both were used, mobile was always at least used some of the time. With positive test results I began to work on high-fi desktop screens.

Hompage

Hompage

Out Of Stock message

Out Of Stock message

Start a commission form

Start a commission form

Submit commission

Submit commission

Commission submitted

Commission submitted

Cart

Cart

Checkout process

Checkout process

Review information and Purchase

Review information and Purchase

Confirmed purchase page

Confirmed purchase page

Contact page

Contact page

Conclusion

Key takeaways?

For this project I had to work faster than normal, and make decisions quickly, which I think was great practice for me as I tend to want to stretch out process. I also appreciated working for a real client who had real constraints as that dissuaded me from too much scope creep.

Check out Maggie’s jewlry work at maggieagnew.com