My role:
Designer
Team:
1 Project Manager
1 Designer
Project type:
Web design & development
Timeline:
September - November 2023
10 weeks
Software:
Figma, Shopify
Project summary:
This project was conducted in partnership with re:Bloom, a non-profit web agency that connects small business owners with developers and designers. By attending both weekly workshops and team/client meetings, our team created an e-commerce site for RubyDawn International, a high-fashion brand founded by independent fashion designer Dawn Surgest.
After beginning the 10-week journey without any official platform to sell her clothing, we went through the entire design process for her products, keeping her in the loop and teaching her how to maintain her site along the way.
Our client came to us without a website to sell her clothing, as she had only been making custom one-off designs, and selling them on an individual basis. She also provided us with brand guidelines which included the desired color palette, logo, and font pairings for the site.
The proposed solution:
After having a conversation with our client about her goals for the end of the 10 week timeline, we outlined attainable goals we could address to help her reach her goals. We planned to launch an online boutique that would increase traffic to the client's existing social media accounts, build brand awareness and credibility, and allow her international customer base to more easily purchase her designs.
The audience:
We catered our project towards both her existing and anticipated customer bases. According to our client, this included afroproud people of ages 30-65 who are ready to feel empowered as career-women and men.
Each member of our team researched a competitor site that had similar features to the site we wanted to create. We wanted to make sure our website followed traditional designs for e-commerce sites, because especially with an audience not guaranteed to be technologically-savvy, a comfortable and "normal" shopping experience was one of the goals of our site.
Competitor research document
Based on similarities drawn from the competitor sites, we outlined a sitemap for our e-commerce website. Across the board, many e-commerce sites have very similar sitemaps, increasing the familiarity and comfort of the online shopping experience. This was something we did not want to change in our design.
Sitemap
The next step was to create a lo-fidelity wireframe for the site. My fellow designer and I each created a lo-fi wireframe, and as a team we critiqued both of them, commenting on pros, cons, and considerations for the future design iterations. Ultimately we chose to iterate off of the wireframe that I designed, as linked below.
Figma file
The last step in our design process before implementing the design on the Shopify site was to create a mid to high fidelity wireframe. We combined these two steps because of the limited time frame. We also held a team and client critique session after the creation of this wireframe.
Figma file
With a client-approved wireframe to use as a basis for our design, we went ahead and translated it into a Shopify site. Certain aspects of the site proved challenging to implement into Shopify's template based platform, combined with our goal to keep any code to a minimum as it would make the website harder to maintain later.
After developing the first iteration of the site in Shopify, we began user testing. Gathering contacts of previous customers from our client, we observed ease of tasks, like finding and purchasing items, and asked for specific feedback about the design of the site. We then summarized the feedback given and made the according changes to the site, including adjusting the background color of the site to increase color contrast.
User testing summary
Given the time frame and circumstances of the project, I am happy with the turnout. I learned a lot about the UX design process, and how to work in a team with a client. The following is a walkthrough of the site at the end of our 10 week journey.
In addition to the finished website, as shown in a video walkthrough above, the deliverables for this project included 9 comprehensive training videos made by me and my co-designer. As we developed the site on Shopify, we identified situations our client might face as she continued to maintain the site after our project timeline ended. For each of these situations, we recorded a personalized training video teaching her how to complete the given task for her site.