VCE Solution Exchange

UX Designer & UX Design

Brand new website

2014


The Ask

VCE wanted to create an exchange platform where registered users can contribute solutions and connectors for their different versions of Vblock systems. These solutions after approval become available to all users to view and related files can also be downloaded by registered users.

Update

The site is currently out of maintenance due to the merger with Dell EMC. View Site
(Learn more about The Rise & Fall of the VCE Brand Name.)

My Role

I was working on this project as Experience Designer with the help of an Senior Experience Designer providing overseeing support. I was fully responsible for the creation of wireframes.

Responsive wireframe for VCE Solution Exchange Homepage.
VCE Solution Exchange - Homepage

The Process

The local scrum team includes myself, an senior UX designer and a project manager, with occasional tech support from a back end developer.

Main steps are listed below.

Requirements gathering: Work with client to understand business goals, user needs and technical difficulties of developing the site.

Wireframing: Depends on the requirements, design and create wireframes to communicate, explore and refine the final structure of the site.

Resposification: Revisit the desktop wireframe and turn the pages into mobile view.

Visual design: Once the wireframes was approved by client. Visual designers kicked in and started to bring the page alive with detailed design.

Development: After the approval of visual design, all design files will be handed over to dev team for development.

Responsive wireframe for VCE Solution Exchange Homepage.
VCE Solution Exchange - Solution

Requirement Gathering:

Before brainstorming and creating wireframes for the new site, it’s important to understand the overarching scope of work, expectation and limitation from client side, and most importantly project timeline and type of deliverables.

PM team coordinated numbers of meetings with clients to discuss, identify and define the business requirements, types of users, and key functionalities. After the discovery, we came up with a list of functions that were prioritized by looking at the level of importance, target audience , technical complexity, and readiness of contents.

Wireframing:

Depends on the requirements we gathered, UX team works together to ideate the information architect of the new site. I was responsible creating detailed wireframes for all the pages based on user flows.

Site Structure

As identified during requirement gathering phase, two types of users will visit the new website. One is the Vblock owners looking for solutions for their needs. Another kind of user will be the solution providers who create specialized applications following Vblock's framework and submit to the VCE Solution Exchange platform for others to download and install.

Since the main purpose of this site is to spread solutions to end users. We decided to make the site Vblcok owner-facing as we present solutions upfront on the homepage. Also, we display contributor informaiton and resources on the homepage. To the end of main nav, we included access point for contributors to submit their solutions.

Desktop First

Many people say we should design in the method of mobile first for the sake of responsive design. However, i don’t think it is always true. it depends case by case. For this case, we approached with desktop first.

  1. Working at a design agency, we deal with clients who pay millions of dollars to have us create wireframes for them. Normally(but not always true), most clients would prefer to see the desktop version as the first thing, since desktop pages look bigger and more believable from the aspect of familiarity. (No matter what, you will most likely think about the desktop site rather than mobile site when you think about a website. Now, think about google.com. Did you think about the desktop page at the first second? Try amazon.com this time.)
  2. The users of this website are more than likely be browsing, downloading and submitting solutions on a desktop than mobile. As an iOS user, you will never be able to download or upload any solutions on this site since iOS is a closed system. As an Android user, the odd of uploading a solution via your mobile phone is close to none. For this reason as well, we chose to start with desktop when designing the site.
  3. Desktop first is not desktop only. Even we started the design process with desktop version, that didn’t mean that we never thought of mobile site when we were designing the desktop version. Actually, I prefer to call the process as “Desktop Led” rather than “Desktop First”. That means, I will always think about mobile version from time to time when designing the desktop site. Having the light of “Mobile Site" blinking behind the back of my head, I frequently check the design I’m working on to make sure it works well on mobile as well. The frequency of checking could be as often as every component, or after a section had been designed.

Responsification

Since we designed desktop first, to need to design tablet view and mobile view for the pages we create on desktop. Since we were designing desktop view with the method of “Desktop Led” as mentioned above, we did’t run into too many issues when converting the page to tablet and mobile view. Mostly, it was a practice of re-organizing, re-prioritizing, and re-sizing components on the page.

Visual Design:

Since it was a redesign project, and on-going project. My job was to follow existing visual style and logic, represented existing content in a better way to improve usability and find-ability.

Development:

Approved visual design files, along with original wireframes were handed over to dev team for development.

Conclusion

This project was my very first design-from-scratch work ever done for real world client at a high degree of completion. I was stumbling through my way and performing inexperienced. But I learned a lot from it, and it got me started quick and steady on the road of being an Experience Designer.

Experience With Clients Below

Wellington Management Fiat Chrysler Automobile LOGO LeggMason LOGO The Hartford LOGO VCE LOGO Travelers OGO McGraw Hill Education LOGO Voya Finance LOGO

All Trade Marks/Logos belong to their respective owner. I didn't receive endorsements from any of them. Please notify me if you feel uncomfortable to have your Trademark/Logo shown in the list.

Not available at this point.