This gift shop is operated by St. Louis Service Bureau, a non-profit organization that provides opportunities for people with disabilities. The shop gives customers a chance to buy items from various local vendors and support the work of this worthwhile cause.
I was hired to create an eCommerce website for them that would allow them to keep their information and stock updated and be easy for customers and volunteers to use.
With their current website being so broken, it was essential to take a step back to find out what the client was looking for in their new eCommerce website. The focus was on making the new system quick and easy to use while reflecting modern best practices for eCommerce shops.
For this project, I conducted interviews with customers and volunteers at the Service Bureau Shop and observed how people interacted with the existing website as well as competitors’ websites. This information helped me understand how their users typically shop so I could tailor the new website to their needs.
[INSERT VISUAL]
I compared their existing website with several competitors to determine what features they included and how their sites were laid out. This research helped me to establish design guidelines for this project.
Even though it’s a non-profit, I still wanted this shop to look like a store that anyone would be proud to support with their hard-earned money.
When building out our information architecture, I kept the users in mind. Creating user flows and sitemaps helped me understand the user’s journey on the site and make improvements.
By understanding how users move through the site, I could design pages that were more user-friendly and easy to navigate. This also helped me identify any potential roadblocks users might encounter while using the site.
After the information architecture was complete, I began working on low-fidelity wireframes for each page using Adobe XD. I created several different options and presented them to the Service Bureau Shop board members to determine which style fit their vision best.
After finishing the wireframes, I created a clickable prototype for each page using Adobe XD. This allowed us to see all pages in action and get feedback from users about what they liked or disliked.
The prototype also allowed the client to visit their website in an interactive form, which helped them better understand the final product I would deliver.
Due to the limited nature of Adobe XD’s animation tools at the time, I used InVision to demonstrate certain animations for the client.
Finally, I conducted a usability test with a handful of users. This was to find out if the website was easy to use and see if any features needed improvement. Given the straightforward nature of the design and templated nature of Shopify’s build tools, the only edits we had to concern ourselves with were grammatical.
With our wireframes and IA complete, I began work on the visual design of the new website. I started with the homepage design and worked my way through each of the high-level pages.
To begin, I took their existing brand guidelines and expanded them out into an entire color palette. This included a primary color as well as several accent colors.
I used a combination of sans serif and serif fonts to find the perfect balance between keeping things simple while still being easy to read. I also chose two different font weights for the headlines to differentiate them from body copy—a heavyweight for titles, a thin weight for subtitles, and a regular weight for body copy.
In addition to creating wireframes and a clickable prototype, I also made a UI kit for future employees or freelancers to use. This included things like buttons and forms as well as a color guide and type scale to ensure any future updates would retain the same design system.
After creating the visual assets, style guides, and UX for this project, it was time to put it together into a final design. Since I was working on a Shopify website, it could be published to the internet almost immediately after the design was complete and removed the need for the client to hire a developer to implement my designs.
From start to finish, development only took six days, with an additional two days for quality assurance testing.
With a happy client and a completed user-friendly website, it was time to hand the reins off to the client.
Because this was a non-profit organization with various volunteers entering and leaving, knowledge sharing could be difficult. To help combat transition issues, I created a video training presentation to guide the volunteers and employees through updating the site’s design, content, and the store’s inventory.
Thanks to the clarity of my instructions and the ease of using the new tools, they have made numerous changes to the site since it launched.
The shop launched its new website with immediate success. I designed the site around users, not just for aesthetic purposes but also with the business’s bottom line in mind.
Because of this, online sales increased, online returns decreased, and they were even able to develop a new business vertical (local pickup) due to the website’s design.
