UXPin Design Challenge – Silicon Valley Debug
Last week, my friend Samantha messaged me:
If you’re a regular reader of the Lucid blog, you’ll recognize the name UXPin from previous posts.
UXPin is a wireframing software solution. A wireframe is essentially the “blueprint” of a website. It outlines site architecture and defines what goes where. Wireframing has been a part of my every day life at Lucid for over four years. I recently switched from Balsamiq to UXPin. Read more about the transition.
Intrigued by Samantha’s prompt, I did more research on the contest. UXPin offered bragging rights and an Apple Watch to whichever contestant could provide the best wireframe for the beneficiary, Silicon Valley Debug (SVDB), a community advocacy organization located in the South San Francisco Bay area.
To me, this sounded like the perfect opportunity to fine-tune my UXPin skills and help a positive community organization. While I’m not usually the biggest fan of spec work, this felt different. I wouldn’t be doing it to “win business;” I would be doing it to benefit a good cause and refine my own skills. I was in!
I began this project as I would begin any other – with research and requirements. First, to understand how information should be organized, I needed to understand the client. The existing Silicon Valley Debug website obfuscated the organization’s purpose. It took me at least 10 passes and 15 minutes of reading to figure out what exactly this organization was all about.
After some digging, I found out Silicon Valley Debug consists of three main branches:
- Media – this includes content creation and curation
- Community advocacy – advocacy is mainly focused on justice projects
- Entrepreneurial initiatives – a sort of incubator for entrepreneurs in the region, focused mainly on photography and printing
I had to find a way to make these three, rather disparate functions, resonate with the site audience. My initial goal was to develop a site map that would allow a user to understand SVDB in 15 seconds instead of 15 minutes.
In my usability analysis, I identified some of the current site’s key issues:
- The main homepage is not congruent with the rest of the site
- Several links in the main navigation go to external websites with no contextual support
- The call for donations was hidden and un-inspiring
- The website was not mobile-friendly
However, the biggest issue was the muddled information architecture. The current website included main sections for “justice” and “darkroom.”
This layout focuses on specific, individual initiatives instead of introducing the fact that SVDB supports a variety of community and entrepreneurial projects.
This confusion created an identity crisis. I needed to create a wireframe demonstrating a focused message that clearly outlined the three main sections of SVDB, before calling out specific successes. It was time to put the horse before the cart!
Armed with a game plan and a new site map:
I began wireframing. I decided to wireframe this site mobile-first, which is best-practice. I find a mobile-first approach helps me identify the key pieces of content more quickly. Once I have the content, the rest tends to fall into place.
My biggest challenge lately has been trying to maintain a healthy amount of vertical padding between elements on my wireframes. For this project, I spent a few hours digging into the grid and alignment options, pushing myself to achieve a pixel-perfect result.
I had a lot of fun with this project; methodically going through each page of the existing site, cutting out and restructuring content until the architecture made sense. Because SVDB was seeking higher conversion rates for donations, I highlighted “donation” calls to action with design and placement. I also wanted to try adding a suggested amount below the donation button:
I think a suggested donation amount is likely to lead to more conversions because users prefer choices as opposed to coming up with amounts themselves. In real-life, I would want to A/B test this assumption to see if it was effective on this particular site.
Once all my pages were built, I went back through and “jacked it up,” as Monty would say on “Say Yes to The Dress.”
“Jacking up” a wireframe consists of adding designer touches – images, colors, interactions, etc. Essentially, I took the wireframe from lo-fidelity to hi-fidelity. In a normal project, I would weigh the pros and cons of a high-fidelity vs a low-fidelity mockup to see which was appropriate for the situation. In this case, high-fidelity was definitely in order, since I was trying to win a contest and thought higher fidelity visuals would help me win!
You can check out the finished result here:
In the end, I felt good putting my best effort forward. After spending time on the SVDB site, I can say I understand their organization and support what they’ve done for their community. I am happy to help them, whether I win or not. No matter which wireframe they choose, I am sure their new site will more effectively showcase what they do for their community, and I wish them the best with their rebuild!
Finally, I’d like to give a big thank you for UXPin for creating this challenge. It’s awesome they set out to do something that would benefit both the design and local Silicon Valley community.